- This topic has 9 replies, 3 voices, and was last updated 3 years, 3 months ago by
.
-
Posts
-
After much fiddling around and searching these forums I managed to get my mobile menu to display with the logo in the middle and the hamburger icon on the left and the search icon on the right, but I cannot get the menu which drops down when you click the hamburger icon to look okay.
The height of each item is huge and the logo is also visible underneath (https://imgur.com/EJtwYr7)
I know the height of the items can be changed in Customize by reducing the menu item height but then my logo gets squished as well and is still visible behind it. How do I reduce the menu item height without squishing my logo and hide the logo when the menu is dropped down?
Customer Support
Hi there,
if you want to remove the CSS you have added to center the logo and position the navigation elements, then set your menu item height to something more appropriate, i will provide you the exact CSS you need for that layout.
Hi David thanks, I have removed the CSS and resized the menu item height but have noticed that now when the mobile header is on, it is completely breaking all the styling on my homepage when my website is opened on desktop like this https://imgur.com/F3Nnj0R so I have had to temporarily turn it off – it will look okay for a few seconds and then break.
Customer Support
it is completely breaking all the styling on my homepage when my website is opened on desktop like this https://imgur.com/F3Nnj0R
Turning off the mobile header option cannot cause an issue like that.
Any chance you can disable all plugins except GP Premium to eliminate conflicts from other plugins first?
Let me know 🙂
If at all possible I’d like to avoid deactivating all my plugins as my ads are running, it looks fine on mobile now and the menu dropdown is perfect, the only thing is that the logo is giant https://imgur.com/o0C270V – is there a way to show the logo in a smaller size and centred when on mobile without turning on the mobile header?
Can you re-enable the Mobile Header with the Logo in place and ill provide the CSS required.
Hi David, I’ve just enabled the header.
Try adding this CSS:
#mobile-header { position: relative; } #mobile-header .inside-navigation { padding: 0 20px; } .site-logo.mobile-header-logo { margin: unset; position: absolute; top: 30px; left: 50%; transform: translate(-50%); } #mobile-header .menu-toggle { order: -1; margin-right: auto; } @media (max-width: 768px) { .mobile-header-navigation .site-logo.mobile-header-logo img { height: 96px !important; } .main-navigation .menu-toggle, .main-navigation .mobile-bar-items a { line-height: 96px !important; } }Perfect, that worked and looks great and no homepage issues, thanks so much!
Glad to be of help
- You must be logged in to reply to this topic.