[Resolved] Can't disable custom header for pages

Home Forums Support [Resolved] Can't disable custom header for pages

Home Forums Support Can't disable custom header for pages

Viewing 15 posts - 1 through 15 (of 17 total)
  • Author
    Posts
  • #585931
    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.

    GeneratePress 2.1.2
    #585948
    Leo
    Staff
    Customer Support

    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.

    #585956
    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 πŸ˜›

    #585957
    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.

    #585959
    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.

    #585963
    Tom
    Lead Developer
    Lead Developer

    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 πŸ™‚

    #585964
    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!

    #586383
    Tom
    Lead Developer
    Lead Developer

    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?

    #586648
    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!

    #586710
    Tom
    Lead Developer
    Lead Developer

    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;
    }
    #586850
    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!

    #587180
    Leo
    Staff
    Customer Support

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

    #587580
    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?

    #587971
    Leo
    Staff
    Customer Support

    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 πŸ™‚

    #588193
    Leo
    Staff
    Customer Support

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

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