Menu on mobile

Hi there,

its possible, can you share a link to the site where you want it applied so i can see the current layout ?

yeah sure

here is an example of a website that has the menu underneath but when it's on mobile, then three lines are next to the logo instead of below

Hi there,

I believe having a mobile header will work best for your site.

You can enable it through Appearance > Customize > Layout > Header and set the Mobile Header dropdown to "On".

That Sorta Worked. Is there a way to have the menu come in from the left or the right like the example I provided?

Also that seems to have got rid of my logo?

Also can I get rid of the word "Menu" on the menu on mobile?

Can you enable the Mobile Header and add a Logo to the Mobile header logo field provided.
Once thats in place i can help sort the layout order.

Done

You can remove the label through this option - https://share.getcloudapp.com/p9uk8QBY

This is found on Appearance > Customize > Layout > Primary Navigation.

Thanks Elvin! I've sorta got the look I'm after.

Is there a way to change the colors but for mobile only?

You can try playing around with this CSS:

@media (max-width:768px){

    /* Menu item container background */
    nav#mobile-header ul.menu {
        background-color: white;
    }

    /* Default menu color */
    nav#mobile-header ul.menu li a {
        color: white;
        background-color: red;
    }

    /* Current Menu item */
    nav#mobile-header ul.menu li.menu-item.current-menu-item.current_page_item a {
        color: red;
        background-color: blue;
    }

    /* Hover color */
    nav#mobile-header ul.menu li:hover a,
        nav#mobile-header ul.menu li.menu-item.current-menu-item.current_page_item:hover a {
        color: black;
        background-color: white;
    }
}

I'll labeled them to indicate what they do. :D

Thanks!

How do i change the color of the mobile header?

Use this CSS:

nav#mobile-header {
    background-color: red;
}

Change red to your preference. :D

ok i've changed the color to white, but that's changed the 3 lines, err... can I change the three lines to #000000 ?