- This topic has 17 replies, 3 voices, and was last updated 5 years, 2 months ago by David.
-
AuthorPosts
-
February 15, 2019 at 9:14 am #811436Eric
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.
February 15, 2019 at 9:20 am #811443TomLead DeveloperLead DeveloperHi 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?
February 15, 2019 at 9:30 am #811450EricHi 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.
February 15, 2019 at 9:36 am #811452EricThis might be more helpful. Without the CSS fix, this is what happens:
https://drive.google.com/open?id=1gJORN7AuJVZa3IWHw7_2I3Td5QmA8vpYFebruary 15, 2019 at 5:01 pm #811661TomLead DeveloperLead DeveloperCan 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 🙂
February 18, 2019 at 8:12 pm #814160EricDone!
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).
February 19, 2019 at 8:10 am #814711TomLead DeveloperLead DeveloperIt 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.
February 19, 2019 at 8:28 am #814733EricThanks, Tom!
That does fix the menu issue. Any suggestions on how to get that search magnifying glass back to being vertically centered?
February 19, 2019 at 3:36 pm #814977TomLead DeveloperLead DeveloperI’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?
February 19, 2019 at 6:01 pm #815042EricJust 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.
February 20, 2019 at 9:45 am #815776TomLead DeveloperLead DeveloperReally strange. Were you able to find anything?
February 20, 2019 at 10:28 am #815824EricNope. 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.
February 20, 2019 at 4:37 pm #816064TomLead DeveloperLead DeveloperI wonder if it’s something in your custom CSS. What happens if you temporarily remove it?
February 20, 2019 at 5:22 pm #816083DavidStaffCustomer SupportHi there,
try this CSS:
.search-item a:before { line-height: 60px !important; }
February 21, 2019 at 7:22 am #816686EricTom, 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; }
-
AuthorPosts
- You must be logged in to reply to this topic.