[Support request] Mobile navigation

Home Forums Support Mobile navigation

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #1058683
    Olga

    Hi! How do I add a logo into my mobile primary navigation so it displays in the centre of the screen, to the right of the burger?
    Also, because my mobile menu is sticky, I would like to make it less transparent than desktop. How do I control the mobile menu transparency separately?

    Thank you!

    #1058706
    David
    Staff
    Customer Support

    Hi there,

    you can enable Mobile Header in Customizer > Layout > Header this provides a separate option to add a logo. Once added i can provide some CSS to center the logo and reduce its opacity.

    #1058720
    Olga

    Ok, that worked.

    I don’t need the search icon though – it appeared as I loaded the logo. The menu burger should be on the left, logo in the centre, and background less transparent than desktop, how do I do this please?

    #1058735
    Leo
    Staff
    Customer Support

    I don’t see the mobile header option activated.

    Did you upload a mobile header logo in the customizer as well?

    Make sure to clear all caching you might be using including site ground.

    Let me know 🙂

    #1058865
    Olga

    It’s not because it is not finished. I would not like to leave a messy site online.

    #1058874
    Leo
    Staff
    Customer Support

    The site shouldn’t be messy when the mobile header option is activated with a logo uploaded.

    We will need to see it to provide the CSS.

    Thanks 🙂

    #1058877
    Olga

    Done

    #1058888
    Leo
    Staff
    Customer Support

    Try this:

    @media (max-width: 768px) {
        #mobile-header .mobile-bar-items {
            display: none;
        }
        #mobile-header .menu-toggle {
            position: absolute;
            left: 0;
        }
        .site-logo.mobile-header-logo {
            margin-left: auto;
        }
    }

    Make sure to clear all caching you might be using including site ground.

    #1058929
    Olga

    Thank you. It works. I made the mobile/tablet header sticky. How do I make it less transparent than on desktop please?

    #1058962
    Leo
    Staff
    Customer Support

    You can try this to change the mobile header color:

    #mobile-header {
        background-color: #000;
    }
Viewing 10 posts - 1 through 10 (of 10 total)
  • You must be logged in to reply to this topic.