[Resolved] Menu not right for logged in users

[Eric]

I just updated GP Premium and Generatepress and noticed immediately that the primary navigation menu when I’m logged in is very tall, creating a white space for an entire page. I’ve had to force the following CSS for both the desktop and mobile menus for it to look somewhat normal, but things aren’t aligning properly and the search button is even off.

#site-navigation {
height: fit-content;
}

Screenshot of what’s happening on desktop (same with mobile): Example on desktop

How can I fix both the tall menu and search icon not being centered vertically, and why did this break in the first place?

Thanks in advance.

GeneratePress 2.2.2

GP Premium 1.7.7

[Tom]

Hi there,

Hard to tell without being able to see the issue, but perhaps there’s a javascript error on the page? Is there anything in the “Console” area if you right click + inspect the page?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Eric]

Hi Tom,

The screen shot should show what’s happening (that white space is literally what I see before applying the CSS fix). No errors at all in the console. This only affects logged in users – the site looks perfect to everyone else. Very strange.

I’ve cleard out all caches, disabled optimization plugins for testing, etc. no change unless I force the height in CSS, but that doesn’t fix the misaligned search icon.

[Eric]

This might be more helpful. Without the CSS fix, this is what happens:
https://drive.google.com/open?id=1gJORN7AuJVZa3IWHw7_2I3Td5QmA8vpY

[Tom]

Can I get a user account so I can login to see the issue myself?

If so, you can send it here: https://generatepress.com/contact

Be sure to mention this topic 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Eric]

Done!

Interestingly enough, regular user accounts don’t seem to show this problem, but admin accounts do (I sent you two accounts you can test with).

[Tom]

It seems the placeholder element for your sticky navigation is somehow broken. Hard to tell why though – I’m not seeing anything super obvious.

For now, you can add this CSS to your site:

#sticky-placeholder {
    height: 60px;
}

If the height of your sticky navigation every changes, you’ll want to update that value.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Eric]

Thanks, Tom!

That does fix the menu issue. Any suggestions on how to get that search magnifying glass back to being vertically centered?

[Tom]

I’m actually stumped as to why that’s happening. It has the same line-height as everything else. Can you try deactivating your caching plugin?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Eric]

Just disabled all caching plugins and anything I could think of that might influence CSS and Javascript (Autoptimize, Gonzales, Lightspeed). Still happening only when logged into an admin account.

I’m going to try and fiddle with some menu settings to see what happens.

[Tom]

Really strange. Were you able to find anything?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Eric]

Nope. Trying to hack my way to fixing it via CSS just breaks it on non-admin accounts, since it over-corrects.

The search icon is misaligned in all cases: mobile, tablet, desktop view. However, when you click on it, the text field where you’d enter a search phrase is vertically aligned just fine. Not sure what else to even try at this point. Same issue on different browsers.

[Tom]

I wonder if it’s something in your custom CSS. What happens if you temporarily remove it?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[David]

Hi there,

try this CSS:

.search-item a:before {
    line-height: 60px !important;
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Eric]

Tom, disabling custom CSS was the first thing I did and it doesn’t fix anything.

David, using that code, along with the ones I already had in place seems to fix everything in the meantime.

So, this is what I have in place.

.search-item a:before {
    line-height: 60px !important;
}

#site-navigation {
height: fit-content;
}

#menu-mobile-menu
{
height: fit-content;
}

[Author]

Posts