[Resolved] Can't disable custom header for pages

[Derek]

I have a custom header for my home page to allow a transparent effect of the main menu, I selected the page edit on the home page edit screen and its working great, but I de-selected the header on my other pages and its still showing up as transparent menu in header. What I’m trying to accomplish here, is a transparent effect on the home page only, and the classic menu style on my other pages.

I am using simply css to put css for the home page only via edit mode:

.main-navigation .navigation-stick {
background-color: rgba(32,32,32,0.64);
}

But the css doesn’t seem to be working.

[Leo]

Hi there,

If I understand this correctly, you can use custom navigation color in page header to set special color you want for the home page: https://docs.generatepress.com/article/merging-header-navigation-content/#merging-our-header

Then the rest of the page will just be using the settings from the customizer.

No CSS should be required.

Let me know if this helps.

[Derek]

Oh thats what I’m also doing, I had transparency set in page header and also page css (I have since deleted the page css). Still the transparency effect is there only inside the home page header when the page first loads, so once you start to scroll, the transparency goes away back to solid. If I change the color in customizer to transparent then it works just fine, however, in theory should make the other pages have a transparent menu since the page header is not selected (but thats not the case because although I do not have my page header selected for those other pages, the menu is still transparent). Ironically, if I select solid colors in the customizer they do not effect the other pages either, only the home page. I don’t understand why this is. I’m really lost actually. I thought the page headers had to be selected individually for each page? Do I need to make a seperate page header for my other pages? Essentially I just want to apply the transparency to home page. Maybe its the global settings 😛

[Derek]

YUP! I just removed the global settings. I guess there is a bug I can report though all of this. Apparently, if you have global options set, then changing the individual pages i.e. de-selecting the header from them in edit mode, will not turn it off.

[Derek]

The only problem left to fix is the issue where their is no transparency upon scroll on the home page. I thought that page css would have done it but nope.

[Tom]

The sticky navigation won’t take the colors set inside the Page Header options.

You can imagine having a transparent navigation as you scroll down the page – it might be hard to read the text, as it would appear directly on top of your content text.

It’s possible with CSS though if you’d like?

Let us know if that makes sense or not 🙂

[Derek]

Hi Tom,

It’s mostly for pictures. I’m taking inspiration from apple.com 😛

This code isn’t working

.main-navigation .navigation-stick {
background-color: rgba(32,32,32,0.64);
}

Yeah I would like to accomplish this. What code should I try, and should I paste is on the home page css, or global css?

Also I’m having trouble getting all of this to show up on mobile….should I open a new thread or is this just something easy that I missed? I don’t care so much about the transparency on mobile if its not possible, but I would like the logo to show up if at all possible. I’m assuming there must be an easy way to just enable all the transparency and such for the home page on mobile too?

Thanks!

[Tom]

Try this instead:

.main-navigation.navigation-stick {
    background-color: rgba(32,32,32,0.64);
}

I would add it only to pages where you need it.

What exactly isn’t showing up on mobile?

[Derek]

Cool that worked ty.

As far as mobile-
The home page: sticky, transparency, and logo are not showing.
Other pages: logo not showing (color is supposed to be solid).

Thank you!

[Tom]

The URL to your mobile header seems to be broken. Try re-uploading it in “Customize > Layout > Header”.

The mobile header has its own sticky option in that same area.

To force it to be transparent as well, you can do this:

#mobile-header {
    background-color: transparent;
}

[Derek]

Ah ok ya that fixed it. The only thing I need to figure out is how to get the color change effect for the logo in mobile to. Is there something I need to do to my function to make it work on mobile?

add_action( 'generate_inside_navigation','in_menu_nav_logo_hover' );  
function in_menu_nav_logo_hover() { ?> 
    <div class="site-logo sticky-logo navigation-logo">
      <a href="home page url">
            <img src="white image" alt="" class="logo-regular-state" />
            <img src="color image" alt="" class="logo-hover-state" />
      </a>
    </div>
<?php }

Thanks!

[Leo]

Hmm there isn’t cursor/hover on mobile touch screen so that effect won’t work on mobile.

[Derek]

Well its not really on “mobile” per say. If my windows 10 device has chrome docked to the left or right of my screen the theme will switch into a mobile view, and in this view the color change effect doesn’t work. So it’s not possible?

[Leo]

Uhh it should be possible. Just that generally people don’t view websites on desktop under 768px nowadays.

Can you open a new topic for additional question again?

Might take a few tries 🙂

[Leo]

Actually on a second thought, since you are using navigation as header, it might work if you simply disable the mobile header feature 🙂

[Author]

Posts