[Support request] Semi-Transparent Main (Sticky) Navigation?

Home Forums Support [Support request] Semi-Transparent Main (Sticky) Navigation?

Home Forums Support Semi-Transparent Main (Sticky) Navigation?

Viewing 15 posts - 1 through 15 (of 19 total)
  • Author
    Posts
  • #634608
    Alan

    I really like the way this main navigation works on the following site:

    https://www.colorhousegraphics.com/

    You see how the main navigation at the top is overlaying the main header graphic (it’s semi-transparent, and it is placed 30 or so pixels below the top of the page, so as to reveal part of the image there). I like how, when you start to scroll down, the main navigation strip reduces to a smaller size and then sticks to the top of the page.

    Is it possible to replicate this with GeneratePress Premium, or do I need an additional plugin?

    If it’s possible, are you able to give me some basic steps on how to do it, or if there’s already a video or other tutorial, could you link it for me?

    Thanks in advance!

    GeneratePress 2.1.3
    GP Premium 1.6.2
    #634613
    David
    Staff
    Customer Support

    Hi there,

    you can do this with GP Page Headers, here is the overview:

    https://docs.generatepress.com/article/page-header-overview/

    Quite a few related articles, but this is what you need to merge them with your site header:

    https://docs.generatepress.com/article/merging-the-page-header-site-header/

    For the sticky Navigation that can be enabled in the Customiser > Layout > Sticky Navigation

    #634616
    Alan

    So the blue strip that contains the main navigation, what is that called in the settings?

    #634621
    David
    Staff
    Customer Support

    OK – so thats the Primary Navigation. Follow these steps:

    1. Customiser > Layout > Primary Navigation – Set the nav to full width. and inner content to contained. Position Below Header and add your Navigation Logo.
    2. Customiser > Colors > Primary Navigation – Set background color which you can set to transparent.
    3. Customiser > Layout > Sticky Navigation – enable this and select a transition if you want.

    Then create your page header and use the documentation above to set it to merged.

    #634675
    Alan

    Thank you, David.

    One more thing. Look again at the sample page I am trying to mimic. Do you see how at first, when the primary navigation is large, it is semi-transparent? Then when you scroll down, the background of the primary navigation becomes solid, so that as you scroll down the page, the items on the page don’t bleed through. I’m not able to achieve that. The primary navigation stays semi-transparent after it’s been reduced in size and stuck to the top.

    Is there a way to make the background of the “stuck” menu solid?

    ALSO: The logo ONLY appears when the menu goes sticky. In other words, before you start scrolling, no logo is visible. How do I fix this? Thanks, and sorry for all the questions.

    #634762
    David
    Staff
    Customer Support

    OK, so in the Colors > Navigation make your color solid, this will be used for both normal and sticky. Then in the Page Header Advanced you can change the nav colors to transparent. Which will only apply to the unstuck version.

    If you add a logo to your navigation another option appears below it where you can set it to sticky and static.

    #635872
    Alan

    OK that doesn’t work. I went to:

    Customize>Colors>Primary Navigation and set the background color to #daf7d4
    Then I went to my Home Page Hero page header.
    Merge with site header is on.
    Custom Navigation Colors is on and Navigation Background color is set to #daf7d4 at 80 opacity (or so, the slider doesn’t really tell me the percentage).

    When all that is saved and published, the navigation background is solid both in its stuck and unstuck states.

    Another thing, which may require a new topic, is that my header image does not take up the full width of the browser, nor does it go all the way to the top of the browser. This in spite of all settings I know of being set to “full width.” It seems that there is a setting somewhere I’m missing, but I can’t find it.

    #635932
    David
    Staff
    Customer Support

    Are you able to provide a link to the site?

    #635934
    Alan

    No, I’m doing it on my computer (localhost).

    #635966
    David
    Staff
    Customer Support

    Its really trick to diagnose without seeing it.
    Just to run through – so you created the Page Header and assigned this to the page? And that is displaying correctly?

    #635972
    Alan

    Yes, that is correct. Except, as I said, the image in the header doesn’t go full width. Nor can I get the sticky menu semi-transparent, separately from the non-sticky menu, even though I believe I have followed your directions very carefully.

    #636243
    Tom
    Lead Developer
    Lead Developer

    Any chance you can share a screenshot of your “Advanced” Page Header settings, and the front end of the page with the Page Header added?

    #636280
    Alan

    Settings
    Home page

    #636591
    Tom
    Lead Developer
    Lead Developer

    Hmm, was hoping that would give me a hint. Sorry!

    Unfortunately I think we’d actually need to see the site in this case. Any chance you can import it to a live server temporarily?

    #636837
    Alan

    You know what, I think I’ll just lay GeneratePress aside for now and explore other themes that are hopefully easier to work with. Honestly I wasn’t expecting something this simple to be this hard. Thanks for the help, and I may come back and try again before my 30 day trial period is over.

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