[Resolved] Overriding transparent navigation on mobile

[Dave Foy]

In Customizer, my primary navigation background color is set to:

rgba(255,255,255,0)

I’ve done this because in my custom CSS, I’ve set a subtle gradient background on my site header. If I give the navigation a block color it looks odd. I want the nav background to be transparent so the gradient naturally shows through.

Here’s an example page:

http://www.designbuildweb.co/my-best-stuff/

On mobile, the menu works perfectly. The navigation on the mobile menu has a solid background, containing the same gradient as in my desktop/tablet side header.

All good so far. 🙂

Here’s the problem. On some pages, I’m merging the page header and site header. Example:

http://www.designbuildweb.co/

On this page on mobile, the menu background has no background whatsoever. Meaning, I can’t see the navigation items clearly.

In the Page Header settings for this page, I’ve turned off ‘Transparent Navigation’ in the ‘Advanced’ tab. Of course this makes no difference, because the Customizer setting is overriding it.

So: will it be possible to have the mobile menu on ‘merged header’ pages behave like it does on normal pages, while still maintaining my current Customizer navigation transparent background setting?

Thanks!

GeneratePress 1.3.44

[Tom]

The issue I’m seeing here is your merged header is merging with the next section, so it’s set to position: absolute.

This is taking it out of the flow of the page, so it doesn’t push the content down at all when you open it.

There’s not really a solution for that, but what we can do is give the mobile menu a background color when you open it within a merged header. Would that work for you?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Dave Foy]

Yes that would be great Tom. Thanks. 🙂

Can you advise which element I should add the solid background color to?

[Tom]

Give this a shot:

@media (max-width: 768px) {
    .generate-combined-header .main-navigation.toggled {
        background: #222;
    }
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Dave Foy]

That will do very nicely indeed Tom. Beautiful!

Huge thanks (again).

[Tom]

Glad I could help! 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Author]

Posts