To remove side sticky navigication from header categories

We are using the default Sticky Navigation menu, but we don’t prefer to have the sticky navigation left side panel.
We use it because. we like its design of categories icon (Hamburger menu + Text) and have a circle column wrap on top of both icon and text.

We had to remove the side sticky navigation as it taking left space of the home page. What we want is When click on the Categories icon, it should show categories list menu under the categories icon instead of showing the side left panel.

If we use the the Categories menu instead of Sticky Nagivation, we could only get the circle column wrap arond the Text. We need the circle column wrap around BOTH menu icon + text.

Please see the websie for the 2 icons,
1. first one is look good, but has not drop down menu
2. doesn’t look like what we want, but has the drop down menu.

Attachments:

You must be logged in to view attached files.

Hello epanda.tan,

Thanks for reaching to us.

I can see now there are 3 icons to show categories menu, please let me know which one you want to remove? this will allow me to thoroughly investigate and address your concerns more efficiently.

Regards,

Hi Hung,
The first button and the second button is part the Sticky Navigation.
Once the second button is clicked, the 1st side sticky navigation pop up as per default design.

We want to remove the first sticky navigation button as it’s taking side space.
However when we remove the first button, and click on the second button it doesn’t show up the categories item.

The 3rd button is there to show you for your reference only. So once the button is click it should shows the menu item. However we want the 3rd button look like the second button design, but we couldn’t make it. Please assist and find photoshop design of our requirement of the button layout.

Attachments:

You must be logged in to view attached files.

Hello,

Add the code below in Theme Settings -> Custom CSS.

.wd-header-cats {
    display: flex;
    align-items: center;
}

.wd-header-cats.wd-style-1 .menu-opener {
    border-radius: 42px 42px 42px 42px !important;
    min-width: 165px !important;
    padding: 10px 6px !important;
    max-height: 40px;
    
    border: 1px solid #dcdddf;
}

.wd-header-cats .menu-opener-icon:not(.custom-icon):after {
    background-color: transparent;
    color: #333 ;
    padding: 10px;
    border-radius: 50%;
}

body .wd-header-cats .menu-opener-icon:not(.custom-icon):after {
    padding: 8px;
}

https://take.ms/MSDQ0

Kind Regards

Hi Luke, I have applied the code and it doesn’t work. Would you like to have a look into details or setup a zoom meeting?

Hello,

Please define the Browse categories element so I can check the above code – https://take.ms/xV3j0

Thank you in advance.

Kind Regards

Hi The menu element is ” Categories Menu”.

Send me access to your website so I can check the site settings.

Kind Regards

Hi Luke,

Please help review the link.

Hi, how are we wth the update of the categories list to the menu ?

Since you have access, once this is solved, please also have a quick look to why filter by brand doesn’t show up in shop page.

Regards,

Hello,

Checked the above code and changed the bg to transparent and here is a result – https://take.ms/yJ2Qb

I await your response.

Kind Regards

Hi Luke,

I had a look at the picture it look good.
Please help applied the change or provide me instruction to do applied the change.

Regards,
Edwin

Hello,

1. Define the “Categories” element in the header – https://take.ms/z0ZhU

2. Use the below updated code:

.wd-header-cats {
    display: flex;
    align-items: center;
}

.wd-header-cats.wd-style-1 .menu-opener {
    border-radius: 42px 42px 42px 42px !important;
    min-width: 165px !important;
    padding: 10px 6px !important;
    max-height: 40px;
    
    border: 1px solid #dcdddf;
}

.wd-header-cats .menu-opener-icon:not(.custom-icon):after {
    background-color: transparent;
    color: #333 ;
    padding: 10px;
    border-radius: 50%;
}

body .wd-header-cats .menu-opener-icon:not(.custom-icon):after {
    padding: 8px;
}

body .wd-header-cats .menu-opener:not(.has-bg) {
    background: transparent !important;
}

3. If you have light text, change the color scheme in the Categories element settings – https://take.ms/lUmeJ

In the end, the result should be as in this https://take.ms/yJ2Qb screenshot.

Kind Regards

Thank you Luke, it work very nice. It’s fixed now. You are champion.

I have issue with other ticket where I could’t filter by brand in shop page.
Can you also please have a quick on this as we have been spending time like a week now and couldn’t get this solved.
“https://xtemos.com/forums/topic/filtered-by-brand-is-not-working-on-shop-page-attribute-filter-is-not-working/”

Hi Luke, it’s all good now. Please proceed to close the ticket. Thank you for your support. Regards,

Hello,

I’m glad to hear that everything is working well now, and it’s always a pleasure to assist. I will go ahead and close the ticket as requested. If you need any further help in the future, don’t hesitate to reach out.

Kind Regards

[Author]

Posts