[Resolved] Swapping icons (search and off-canvas) in sticky header

Home Forums Support Swapping icons (search and off-canvas) in sticky header

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #1156020
    Naomi

    Hi, I have a question and I have a feeling it might be very obvious and I’m sorry if that’s the case.
    I have a primary menu with the navigation search enabled.
    I also have an off-canvas menu
    and I have sticky headers enabled.
    When the page first loads, and we’re still at the top, it’s menu first, then search icon, and hamburger icon for the off-canvas last
    As soon as I scroll down, the header sticks, perfect, and the last two icons switch places and I don’t know why.
    Did I do that? How can I undo it?
    I’m trying to make the transition as smooth as possible with only the background color changing (I was using simple css for that but I’ve disabled it to make sure it’s not my CSS causing this) so I don’t like that little swap and I’m wondering if it’s something I set and just don’t remember. Any help appreciated.

    Thank you!

    #1156333
    David
    Staff
    Customer Support

    Hi there,

    odd one … try adding this CSS to fix it:

    .sf-menu>li.slideout-toggle {
        float: right !important;
    }
    #1156935
    Naomi

    I thought it was a setting I had touched. Okay, Thank you.
    The rule for the sticky menu item:
    .nav-float-right .is_stuck.main-navigation.has-sticky-branding:not(.toggled) .menu > li
    is more specific than the rule for slide out:
    .sf-menu > li.slideout-toggle
    So I ended up adding

    .nav-float-right .is_stuck.main-navigation.has-sticky-branding:not(.toggled) .menu > li.slideout-toggle {
    	float: right;
    }

    And that works beautifully. Thank you!

    #1157533
    David
    Staff
    Customer Support

    Awesome – thanks for sharing your final fix 🙂

Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.