Celebrating 7 Years! Get up to $30 off GeneratePress Premium!

[Resolved] Header color on mobile view

Home Forums Support [Resolved] Header color on mobile view

Home Forums Support Header color on mobile view

  • This topic has 18 replies, 3 voices, and was last updated 3 years ago by Larry.
Viewing 15 posts - 1 through 15 (of 19 total)
  • Author
    Posts
  • #561517
    Larry

    I’m not finding an option to modify the header color on the mobile view. It looks like it’s defaulting to transparent. That looks great on the pages with custom page headers, but not on the others.

    I’d like it to be the brown color that’s used on the desktop view.

    http://save.boulderwordpress.com/about-us/

    Cheers

    Larry

    GeneratePress 2.0.2
    GP Premium 1.6.2
    #561870
    Leo
    Staff
    Customer Support

    Hi there,

    Try setting the primary navigation background color to the same as the header background color.

    Let me know.

    #562068
    Larry

    Hi

    I tried that, It only affects the bg color of the nav. I need the whole header to be that color, because I’m using a transparent png for the logo and my client doesn’t like the look of the nav in a box.

    Thanks

    #562252
    Leo
    Staff
    Customer Support

    Can you try using this method?
    https://docs.generatepress.com/article/navigation-logo/#navigation-as-header

    It should solve the problem and give you the same layout.

    Let me know.

    #562690
    Larry

    I tried that and it failed in couple of different ways.

    Is there a way to target the header color on pages without w/o a custom page header by using css and media queries when in mobile view?

    Thanks!

    #562853
    Leo
    Staff
    Customer Support

    I see this CSS being added currently:

    .main-navigation {
        margin-top: 15px;
    }

    Can you change this to the below so it’s only desktop:

    @media (min-width:769px) {
        .main-navigation {
            margin-top: 15px;
        }
    }

    It’s weird that the background color of the primary navigation isn’t working.

    Can you apply to the brown so I can take a look?

    You can also use this CSS to change it but it should do the same thing:

    @media (max-width: 768px) {
        .main-navigation {
            background-color: #492b11;
        }
    }
    #562889
    Larry

    Hey

    I added the margin above the nav so that it would vertically centered relative to the logo.

    I made the nav color transparent because my client didn’t the want nav boxed in, I had forgotten that I did that and then I set the header color to the brown. For some reason it looks like the header color doesn’t show on the mobile nav.

    I’ll try adding the media query to make the nav brown on mobile and see how that works.

    Thanks

    #562903
    Larry

    I added 15px of padding to the nav, instead of 15px of margin and seems to have fixed the gap on the mobile view.

    Yay!

    However my client is a big fan of the transparent nav merged with the page header look. Is there a way to keep that look on the Home and Our Brands page in the mobile view and still have the tweaks we just made on the other pages?

    I realize it’s kind of a pain in the butt, but my client is somewhat particular…

    Thanks

    #563159
    Leo
    Staff
    Customer Support

    I would recommend my second block of CSS here: https://generatepress.com/forums/topic/header-color-on-mobile-view/#post-562853

    It is using media query so the margin wouldn’t show up on mobile but it will on desktop.

    As for the background color, can you try applying your desire color in Colors > Primary Navigation > Background?

    It should work and meet both of your requirement. If it doesn’t please leave it in so I can see.

    #563166
    Larry

    Hi

    I tried using that block of code and it didn’t work.

    Cheers

    #563174
    Larry

    Hey

    I also tried using the brown color for the nav bg and it made the nav brown instead of transparent on the pages that merge page header w/ the nav

    #563179
    Leo
    Staff
    Customer Support

    I’m still seeing this being added:

    .main-navigation {
        padding-top: 15px;
    }

    My code above should do the exact same thing as you have before except it’s targeted only on desktop:

    @media (min-width:769px) {
        .main-navigation {
            margin-top: 15px;
        }
    }

    Please apply so I can see why it isn’t working.

    As for the background color, you can set custom navigation color when you are merging it:
    https://docs.generatepress.com/article/merging-header-navigation-content/#merging-our-header

    Then set the global color in the customizer for other pages.

    #572083
    Larry

    Hi

    Finally getting back to this issue. I tried using the advanced settings on the pages with custom page headers and it’s not overriding this css that I’m using to to get the mobile nav bg color to be brown.

    @media (max-width: 768px) {
        .main-navigation {
            background-color: #492b11;
        }
    }

    I tried using the primary nav bg color in the customizer, but that didn’t work because I have the nav floated to the right of the logo and the bg was only applied to a small part of the header.

    Thanks

    #572497
    Leo
    Staff
    Customer Support

    Sorry what’t not working?

    I see the brown color in both desktop and mobile. Isn’t that what you were going for?
    2018-05-10_0838.png
    2018-05-10_0838_001.png

    #572794
    Larry

    Hi

    I’d like to have the nav transparent on the home page and the Our Brands in the mobile view, they both have custom page headers that are merged with the nav. I’d like to have brown headers on the rest of the pages in the mobile view.

    So far adding this css is the only way we’ve been able to make the nav brown on most of the pages in the mobile view, unfortunately it also gives the pages with custom page headers a brown nav, which I’d like to avoid.

    @media (max-width: 768px) {
        .main-navigation {
            background-color: #492b11;
        }
    }

    Thanks

Viewing 15 posts - 1 through 15 (of 19 total)
  • You must be logged in to reply to this topic.