[Support request] Help with Mobile Header Logo

[Randy]

Hey guys!

I’m totally stumped on this one. I’ve searched the forums for an answer, but can’t seem to find a fix that applies specifically to what I’m trying to accomplish.

I’d like to have my mobile header kick in at 1100px. I found this css (https://gist.github.com/generatepress/282078076cd8631c17717d5b8640c043) which does initiate the mobile header at 1100px. However, once that CSS is applied, the mobile site logo doesn’t display until 768px AND the menu toggle icon loses its functionality. Once, the screen size reaches 768px, everything works how I’d like. What am I missing here? Any help would be greatly appreciated.

Thanks!

[Leo]

Hi there,

Did you remove the code to change the breakpoint?

I don’t see it currently.

[Randy]

Yea, sorry! I had it commented out. Tom’s snippet is active again and I’ll leave it there until you have a chance to take a look. Thanks Leo!

[Leo]

It’s not showing because you’ve added a lot of padding to it:

.mobile-header-navigation .mobile-header-logo img {
    padding: 20px;
}

Removing that CSS should work.

[Randy]

Hmm. After removing that line of CSS I’m still not seeing the logo kick in until 768px. I also just noticed that the menu toggle doesn’t seem to working at all below 1100px. Is it possible it’s hiding behind the images I’m using in the header?

[Leo]

Try increasing the menu item height with mobile toggle on:
https://docs.generatepress.com/article/menu-item-height-width/#height

[Randy]

That solved the logo issue. Thanks!

However, I’m still having trouble with the menu toggle not showing anything after clicking. Any ideas there?

[Leo]

Hmm not seeing anything very obvious.

Was it working before we add the CSS to change the breakpoint?

[Randy]

Looks like this was hiding it…

.main-navigation:not(.slideout-navigation) .main-nav > ul {
display: none;
}

Everything is working how I’d like now. Thanks for all your help Leo! The GP support team is the best in the business 🙂

[Leo]

Yeah I saw that too but just wasn’t sure why it was included in Tom’s code.

Just wanted to check 🙂

Glad you found a working solution.

[Author]

Posts