How to style navigation menu

Hi

First make sure you have the color add on activated https://docs.generatepress.com/article/installing-gp-premium/#activate-your-add-ons

Then you can change the menu colors https://docs.generatepress.com/article/colors-overview/

great, that really helped!

but please how can i do it specifically for mobile only?

You will have to use custom css for that, try this changing the hex values as you desire

@media ( max-width: 768px ) {
    .main-navigation {
        background-color: #222222;
    }
    .main-navigation .main-nav ul li a, 
    .main-navigation .menu-toggle {
	color: #FFFFFF;
    }
    .main-navigation .main-nav ul li > a:hover, 
    .main-navigation .main-nav ul li > a:focus,
    .main-navigation .main-nav ul li.sfHover > a {
	color: #FFFFFF;
	background-color: #1e72bd;
    }
}

https://gist.github.com/generatepress/793804f553c25c70823c

nice one, it worked. thank you for your support.

Thanks Jamal!

Hi,

nice code and works well but I want to change active link and submenu colors on mobile menu. With that code how can I do these Jamal?

Hi there,

All the CSS are in here: https://docs.generatepress.com/article/changing-navigation-colors/

Just add in media query for mobile only: https://docs.generatepress.com/article/responsive-display/#responsive-breakpoints

Let me know if you need more info :)