[Resolved] GP update today broke my sticky menu

[Jessica]

I just updated GP and now my site’s sticky menu is broken and is thrown all the wya over to the left side, hiding half of the menu.

I tried 2 computers & 3 browsers and nothing is working. I disabled and reenabled the theme, same with plugins, but the only thing that changed is that I updated the GP theme.

I looked through my custom styles and nothing should be interfering with this.
https://jessicarosengard.com/

Any ideas what’s causing this?

[Tom]

Can you link me to the page please?

[Jessica]

Sorry… i edited my first comment but you’re too fast for me:
https://jessicarosengard.com/

[Tom]

Thanks for reporting this. For now, can you just set your navigation width to full in Customize > Layout > Primary Navigation?

[Jessica]

that worked but the “icon” logo for the sticky menu is teeeeeeeny-tiiiiiiny unless I change the styles and make it bigger. The native/original size of that icon is 40x40px and it’s showing at about 2-5px… :/

[Tom]

Hmm I don’t believe anything there changed from the last version. The problem there is the height of the navigation logo takes the height of the menu and minuses 20px from it so we can add 10px on top and bottom (as seen in the navigation on this site right now).

You can adjust the size of your navigation logo with some CSS:

.main-navigation .navigation-logo img {
    height: 20px;
}

.main-navigation .navigation-logo {
    padding-top: 3px;
}

[Jessica]

I just purged my server cache but it wasn’t until I added an extra style to my style.css that it showed the normal size.

[Jessica]

I did what you said but it seems that by default the logo will be only about 3px in size unless you override it. The image I used it WAY bigger than that.

[Jessica]

Also… this refers to the sticky nav logo… the regular site logo I also had to adjust to make less massive. They have the opposite effects (for both states)

[Tom]

The navigation logo isn’t really built for very skinny navigations. There needs to be room for the logo to breathe a bit.

By default, the navigation height is 60px.

So, we resize the logo to 40px – that way we can put 10px of padding on top of the logo, and it will be centered in the navigation bar.

Now if your navigation is 30px tall, your logo will be 10px tall so we can add that padding. This is the issue your having.

There’s definitely some room for improvement there on my side, although you could probably up your navigation height a little and it would still look awesome.

[Jessica]

Ah! Got it and tweaked. All seems good now. Thanks!!!!

[Tom]

No problem – thanks for reporting that bug! 🙂

[Author]

Posts