[Resolved] Header color on mobile view

[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

[Leo]

Hi there,

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

Let me know.

[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

[Leo]

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.

[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!

[Leo]

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;
    }
}

[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

[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

[Leo]

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.

[Larry]

Hi

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

Cheers

[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

[Leo]

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.

[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

[Leo]

Sorry what’t not working?

I see the brown color in both desktop and mobile. Isn’t that what you were going for?

[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

[Author]

Posts