[Resolved] Logo in canvas menu

[David]

You’re welcome – glad to be of help

[_blank]

Hello, is it possible that the code broke? Since some days the hamburger menu is again in the middle in front of the photo.
Could you help me again? thank you SO much 🙂
Best wishes
Hannah

[Elvin]

Hi,

I’m not sure I see the issue.

Here’s how it looks like on my end: https://share.getcloudapp.com/xQuYnKpy

Can you try clearing site and browser cache to check if it still occurs on your end?

Let us know.

[_blank]

The issue occurs as soon as you start scrolling.
Thanks a lot for your help 🙂

[Elvin]

You can try adding this CSS:

media(max-width:768px){
#mobile-header.navigation-stick .menu-toggle {
    order: 0;
}
}

[_blank]

Thank you. Unfortunately this removed the sticky menu. Can we solve this?

[Elvin]

Thank you. Unfortunately this removed the sticky menu. Can we solve this?

Ah my bad. I forgot to include the .navigation-stick selector. I’ve fixed the code on the previous reply to work properly.

Here’s a demo of it on chrome devtool: https://share.getcloudapp.com/2Nu0EKzg

[_blank]

Unfortunately the problem is still occurring: https://prnt.sc/vzogw8

With the CSS that you colluege gave me, I have the following now:

.main-navigation.has-branding .menu-toggle {
order: -1;
margin-right: auto;
}
.mobile-header-navigation.is_stuck .menu-toggle {
   order: -1 !important;
}
.wof-wheel-standalone .wof-right {
padding-left: 55px;
}
media(max-width:768px){
#mobile-header.navigation-stick .menu-toggle {
order: 0;
}
}

[David]

Hi Hannah,

change this CSS:

.main-navigation.has-branding .menu-toggle {
    order: -1;
    margin-right: auto;
}

to:

.main-navigation.has-branding .menu-toggle,
.main-navigation.has-sticky-branding.navigation-stick .menu-toggle {
    order: -1;
    margin-right: auto;
}

[_blank]

Thank you so much 🙂 It now works 🙂

[David]

You’re welcome

[Author]

Posts