[Resolved] Cannot get menu on mobile to look right

Home Forums Support [Resolved] Cannot get menu on mobile to look right

Home Forums Support Cannot get menu on mobile to look right

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #1613194
    Deirdre

    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?

    #1613267
    David
    Staff
    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.

    #1613622
    Deirdre

    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.

    #1613696
    Leo
    Staff
    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 🙂

    #1614060
    Deirdre

    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?

    #1614203
    David
    Staff
    Customer Support

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

    #1614220
    Deirdre

    Hi David, I’ve just enabled the header.

    #1614254
    David
    Staff
    Customer Support

    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;
        }
    }
    #1614502
    Deirdre

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

    #1614552
    David
    Staff
    Customer Support
Viewing 10 posts - 1 through 10 (of 10 total)
  • You must be logged in to reply to this topic.