Archived topic

Cannot get menu on mobile to look right

9 replies · Started by Deirdre on January 10, 2021

Viewing posts 1–10 of 10

January 10, 2021 at 7:24 am #1613194

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?

January 10, 2021 at 8:29 am #1613267

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.

January 10, 2021 at 2:42 pm #1613622

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.

January 10, 2021 at 4:17 pm #1613696

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

January 11, 2021 at 2:36 am #1614060

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?

January 11, 2021 at 5:38 am #1614203

Can you re-enable the Mobile Header with the Logo in place and ill provide the CSS required.

January 11, 2021 at 5:54 am #1614220

Hi David, I've just enabled the header.

January 11, 2021 at 6:20 am #1614254

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;
    }
}

January 11, 2021 at 7:06 am #1614502

Perfect, that worked and looks great and no homepage issues, thanks so much!

January 11, 2021 at 7:35 am #1614552

Glad to be of help

This archived topic is closed to new replies.

Start building better websites today.