Changing attributes of navigation in custom css for mobile

Hi there,

Are you trying to change the background color of mobile menu?

If so give this a shot: https://generatepress.com/forums/topic/background-color-font-color-and-transparency-for-sticky-and-mobile-navigation/#post-281077

Let me know.

You can target the sticky navigation with this selector:

.main-navigation.navigation-stick

I tried

#main-navigation {
    background: rgba(42,42,42,0.8);
}
#sticky-navigation {
    background: rgba(42,42,42,0.8);
}
@media (max-width: 768px) {
    #main-navigation {
        background: rgba(42,42,42,0.8);
    }

But this causes two navigations to appear, and stops the sticky from working. (I tried a few variations based on the link you sent, but nothing appears to work).

#main-navigation {
    background: rgba(42,42,42,0.8);
}
#sticky-navigation {
    background: rgba(42,42,42,0.8);
}

This alone is what I want - a transparent navigation: but I want the same color and transparency when viewed on mobile.

Did you try Tom's suggestion?

Any chance you can provide a link to your site? Thanks!

Yes, I tried Tom's suggestion but it didn't seem to work http://artobatours.com/

Sorry what exactly are you trying to change?

the sticky navigation or mobile navigation?

The sticky navigation has changed successfully, but I cannot change the mobile navigation: i.e. when I reduce the screen size the sticky navigation truns to the mobile but reverts to a black non-transparent navigation. I want the main, sticky, and mobile to all be a certain color and transparency (e.g. background: rgba(42,42,42,0.8);)

Couple things here:

Looks like you are using an old version of GP theme so you might want to update that.

Any reason you are writing all the CSS for styles instead of using the customizer?
https://docs.generatepress.com/article/colors-overview/

Also how are you adding the CSS currently? Make sure you use one of these methods: https://docs.generatepress.com/article/adding-css/

Looks like you are using an old version of GP theme so you might want to update that.

I downloaded it from your site yesterday: first time to use it was yesterday, so I presumed the one on offer would be up to date

Any reason you are writing all the CSS for styles instead of using the customizer?
https://docs.generatepress.com/article/colors-overview/

I would like to use the customizer but can't find any option to control transparency of the navigation bar: so, I've had to do it myself via css. Can I control transparency via the customizer? I use the css when I am given no other options!

Also how are you adding the CSS currently? Make sure you use one of these methods: https://docs.generatepress.com/article/adding-css/

Via child theme

Ahh ok I just saw your child theme has different version number but I guess you created that yourself.

There should be transparent options in all of the background color options. Try checking Customizer > Colors > Primary Navigation > Background color again.

There should be transparent options in all of the background color options. Try checking Customizer > Colors > Primary Navigation > Background color again.

Found it ;) Thanks,

Awesome :)