Different color on Mobile primary navigation

[Huseyin]

Hi GeneratePress,

Hope your weekend is going well?

So I need help on changing the color Mobile primary navigation. The colors I chose for the default is basically white background white, black text with a black coloured logo.

But I want to have a black background, white text with a white logo on mobile devices.

Wondering how could I achieve this with CSS?

However, I have seen this post from Jamal regarding
https://generatepress.com/forums/topic/how-to-style-navigation-menu/#post-347001

[Leo]

Hi there,

Any chance you can link us to the site in question?

You can edit the original topic and use the private URL field.

Let me know 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Huseyin]

Thanks for the reply Leo,

I have inserted the URL but the site is not live so I have attached the wp-admin details too

[Leo]

Are you referring to just the header or the actual navigation as well?
https://www.screencast.com/t/423Rg7fByM

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Huseyin]

Just the header, please

[David]

Hi there,

if you’re using the Mobile Header then try this CSS:

#mobile-header {
    background-color: #ff0000;
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Huseyin]

Hi David,

That CSS code doesn’t work.

[Leo]

Try turning on the mobile header option:
https://docs.generatepress.com/article/mobile-header/

Then you can upload a separate (white) logo and use David’s CSS.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Huseyin]

Done, got the white logo upload and inserted David’s CSS.

However, can’t get the .menu-toggle to be white. Also used the same code from Jamal but doesn’t seem to work.

https://generatepress.com/forums/topic/how-to-style-navigation-menu/#post-347001

[Leo]

Can you disable the maintenance mode so I can see the site and provide the CSS?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Huseyin]

sorry for the late reply.
I have disabled the maintenance mode

[Leo]

Try this CSS:

.mobile-header .menu-toggle {
    color: #FFFFFF !important;
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Huseyin]

Hi Leo,

It’s not working.

(SORRY FOR THE LATE REPLY, BEEN VERY BUSY)

[Leo]

What is not working?

I see the last CSS I’ve provided working fine:
https://www.screencast.com/t/P2FubXLB1Y

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Huseyin]

Ohhhhhh sh*t sorry mate,

Sorry for wasting your valuable time.

Once again thank you for helping out.

[Author]

Posts