Home › Forums › WoodMart support forum › To remove side sticky navigication from header categories

To remove side sticky navigication from header categories

Viewing 16 posts - 1 through 16 (of 16 total)
  • Author
    Posts
  • October 21, 2024 at 5:39 pm #606584

    epanda.tan
    Participant

    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.
    October 22, 2024 at 2:06 pm #606789

    Hung Pham
    Keymaster

    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,

    October 22, 2024 at 5:50 pm #606886

    epanda.tan
    Participant

    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.
    October 23, 2024 at 3:50 pm #607121

    Luke Nielsen
    Keymaster

    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

    October 23, 2024 at 4:44 pm #607140

    epanda.tan
    Participant

    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?

    October 24, 2024 at 11:37 am #607292

    Luke Nielsen
    Keymaster

    Hello,

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

    Thank you in advance.

    Kind Regards

    October 24, 2024 at 1:54 pm #607359

    epanda.tan
    Participant

    Hi The menu element is ” Categories Menu”.

    October 24, 2024 at 2:20 pm #607364

    Luke Nielsen
    Keymaster

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

    Kind Regards

    October 24, 2024 at 2:56 pm #607385

    epanda.tan
    Participant

    Hi Luke,

    Please help review the link.

    October 24, 2024 at 3:48 pm #607403

    epanda.tan
    Participant

    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,

    October 24, 2024 at 4:57 pm #607427

    Luke Nielsen
    Keymaster

    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

    October 24, 2024 at 7:41 pm #607461

    epanda.tan
    Participant

    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

    October 25, 2024 at 12:20 pm #607573

    Luke Nielsen
    Keymaster

    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

    October 25, 2024 at 12:38 pm #607580

    epanda.tan
    Participant

    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/”

    October 26, 2024 at 12:01 pm #607757

    epanda.tan
    Participant

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

    October 28, 2024 at 11:54 am #608035

    Luke Nielsen
    Keymaster

    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

Tagged: 

Viewing 16 posts - 1 through 16 (of 16 total)

The topic ‘To remove side sticky navigication from header categories’ is closed to new replies.