[Resolved] Overriding transparent navigation on mobile

Home Forums Support [Resolved] Overriding transparent navigation on mobile

Home Forums Support Overriding transparent navigation on mobile

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #274944
    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
    #275117
    Tom
    Lead Developer
    Lead Developer

    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?

    #275199
    Dave Foy

    Yes that would be great Tom. Thanks. πŸ™‚

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

    #275202
    Tom
    Lead Developer
    Lead Developer

    Give this a shot:

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

    That will do very nicely indeed Tom. Beautiful!

    Huge thanks (again).

    #275340
    Tom
    Lead Developer
    Lead Developer
Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.