Archived topic

Help with Mobile Header Logo

9 replies · Started by Randy on January 18, 2019

Viewing posts 1–10 of 10

January 18, 2019 at 8:56 am #785700

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!

January 18, 2019 at 4:19 pm #785946

Hi there,

Did you remove the code to change the breakpoint?

I don't see it currently.

January 18, 2019 at 7:28 pm #786021

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!

January 19, 2019 at 10:22 am #786445

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.

January 19, 2019 at 10:34 am #786458

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?

January 19, 2019 at 10:38 am #786469

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

January 19, 2019 at 10:54 am #786486

That solved the logo issue. Thanks!

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

January 19, 2019 at 3:12 pm #786609

Hmm not seeing anything very obvious.

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

January 20, 2019 at 6:32 am #786929

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 :)

January 20, 2019 at 10:20 am #787231

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.

This archived topic is closed to new replies.

Start building better websites today.