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

[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!

[David]

Hi there,

odd one … try adding this CSS to fix it:

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

[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!

[David]

Awesome – thanks for sharing your final fix 🙂

[Author]

Posts