[Resolved] Transparent Navigation Bar Question

Home Forums Support Transparent Navigation Bar Question

Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • #1354677
    Andres

    Could you please help me recreate this primary navigation bar – – on a site we’re currently developing at

    The current site uses GP Pro + Elementor. The site in development uses GP Pro with no page builder.

    I’m not sure if I made the navigation bar transparent correctly. I followed the instructions on the page below on making the nav bar transparent, but it requires using a header, and were not using headers on our site (I don’t know if this a good or bad thing, but it’s helped us get the look we wanted, so far).

    https://docs.generatepress.com/article/transparent-header-and-navigation/

    In Customizing > Layout > Header > Use Navigation as Header is enabled. We’re not using headers on our site. There are a few pages (regular and category pages) where we use a Header Element for a hero image.

    In Customizer > Colors > Primary Navigation, we adjusted the colors until the nav bar was transparent.

    We also set the site title and tagline in Customizer > Site Identity and Site Tagline to Hide.

    Is this the best/right way to make the nav bar transparent? Are there any issues with not using the header and hiding the Site Identity

    Thank you for your patience and help. We really appreciate it!

    Regards,

    Andrés

    #1354834
    David
    Staff
    Customer Support

    Hi there,

    yes, that is the easiest way to create a transparent navigation.

    I would make one change. Instead of using Customizer > Colors > Primary Navigation to make the colors transparent, you can change them in the Header Element > Site Header tab.

    Then you can use the colors you set in Customizer > Colors > Primary Navigation for pages that do not require a transparent navigation.

    So the only changes:

    1. Make the nav full width – go to Customizer > Layout > Primary Navigation and set both Navigation Width and Inner Navigation Width to full width

    2. Add Social Icons to the menu. I can see you have Font Awesome loaded, so you can apply the instructions here:

    https://docs.generatepress.com/article/adding-icons-to-menu-items/

    #1355624
    Andres

    Transparent Navigation Bar Question

    Hi David,

    Thanks for the response. I think I need some additional assistance to get it to work. These are the Navigation and Header settings in Customize:

    Setting in: Customize > Layout > Primary Navigation
    · Navigation Width: Full
    · Inner Navigation Width: Full
    · Navigation Location: Above Header
    · All Slider Settings: Default

    Setting in: Customize > Colors > Primary Navigation
    · Navigation Color Presets: Default

    Settings In: Customize > Layout > Header
    · Header Presets: Default
    · Header Width: Full
    · Inner Header Width: Contained
    · Header Alignment: Left
    · Header Padding All at 40
    · Use Navigation as Header: Not Enabled

    By, “to make the colors transparent, you can change them in the Header Element > Site Header tab”, do you mean I need to create a Header Element (Appearance > Elements) and configure the settings to make the navigation bar transparent?

    I created a Header Element with these settings
    · Element Settings
    · Merge with Content: Merge
    · Header Background: Clear
    · Navigation Location: Above Header
    · Navigation Colors: Selected, (all background color options set to transparent)

    This did make the navigation bar transparent. However, I cannot figure out how to get the navigation bar to be in the same location as the one on our current site

    This is an example on the development site where the nav bar is transparent but not in the correct position:

    Another issue I encountered is that the navigation bar on the category pages that have a page hero, the navigation bar is in the correct location but it is not transparent, e.g.,

    Are all the above settings as you would recommend for a transparent navigation bar?

    If they are, how do I configure Customize to have the navigation bar in the desired location and have it transparent on the category pages with a Page Hero Element?

    Sorry! The things that seem simple turn out to be complicated, and those that appear complicated, simple.

    Thanks for your time, David.

    Have a good day!

    Andrés

    #1355806
    Tom
    Lead Developer
    Lead Developer

    Hi there,

    The problem page doesn’t seem like it should support a transparent navigation. Have you set your Display Rules for the Header Element to only apply on pages that would support it (something with a page hero + background image)?

    #1365890
    Andres

    Hi Tom,

    Sorry for the delay in getting back to you. There was an issue with the SSL for the staging site, and I was not able to access it for quite a few days.

    I figured out that the nav bar on the custom PHP category pages was not transparent because the background in in the Header Element was not set to clear. It’s now clear on all posts, and category pages.

    What I cannot figure out now is how to have the nav bar in the same vertical location on all pages, posts, and category pages.

    On pages and category pages, it is in the same vertical position. However, on posts, it’s about an inch lower, for example:

    Note: On pages, it’s on top of the page title. I need to move the container down an inch or so. I think you already provided CSS that can do this.

    How do I adjust the nav bar so that it’s in the same vertical position on all pages, posts, and category pages?

    Thank you, Tom, and have a good day.

    Cheers!

    Andrés

    #1366158
    Tom
    Lead Developer
    Lead Developer

    Hi there,

    From what I can see, the only place that Header Element should be active is on the gallery page (category).

    The transparent/merged header won’t work on the other pages, as they don’t have a page hero with an image to separate it from the content below.

    You should make sure the Display Rules for that Header Element only apply to pages (or categories) that will have an image hero like that. Otherwise, you’re going to run into trouble with the transparency/placement (as you’re seeing on the other pages).

    #1366989
    Andres

    Hello Tom,

    Thank you for the response. The vertical position of the nav bar on all posts is lower than that on all other content. Below are the settings we have for our two header element.

    1. Header Element for clear nav bar is set to display on all pages, posts, and category pages that do not have a page hero image header element.

    2. Header Element for category pages with page hero image is set to display on category pages with a page hero image only and has been configured for clear nav bar.

    · These 2 header elements are not set to appear on the same content. There is no overlap in the display rules.

    · The navigation location in both elements is: Above Header

    · The “Merge with Content” option in both elements is set to “Merge”

    Issue: Position of nav bar on all posts is lower than on pages and category pages.

    Question: How do I set the vertical position of the nav bar on posts so that it’s the same as on all other content?

    Your help and patience is greatly appreciated.

    Thank you and have a good day!

    Cheers,

    Andrés

    #1367201
    Tom
    Lead Developer
    Lead Developer

    I think it’s only lower on those pages because it’s set to merge when it shouldn’t be.

    It looks like you’ve tweaked something now – all the navigations are in the same position, but none are transparent.

    #1367238
    Andres

    Hi Tom,

    I think you were checking it out just a bit ago when I happened to be trying to figure it out.

    From your response, it looks like I should not have it set to No Merge in Merge with Content.

    I set the two Element Headers to No Merge. This does make the nav bar have the same vertical position on all pages, posts, and category pages. The problem now is that none of the nav bars are transparent.

    According to the following doc on GP on transparent nav bars, Merge with Content needs to be set to “Merge”.

    How do I make the nave bar transparent without setting it to “merge”?

    Cheers!

    Andrés

    #1367918
    Tom
    Lead Developer
    Lead Developer

    You can’t, but you should only want/need a transparent navigation on pages that have a page hero – something for the transparent navigation to sit on top of.

    The issue was that the navigation was transparent on pages where a transparent navigation doesn’t work.

    Out of the 3 pages you linked to, this is the only one that will work with a transparent navigation: https://wordpress-424710-1336702.cloudwaysapps.com/gallery/

    The other two aren’t built to have that kind of layout – they need a regular navigation.

    #1367956
    Andres

    Hi Tom,

    Got it.

    To make the nav bar transparent on posts and pages that are not category pages (with the header merged) was set the Background color in Customizer > Colors > Primary Navigation to 100% transparent.

    Set as such, the nav bar is in the same location and is transparent on all content.

    Does this work? Will this cause any issues?

    I do have another question regarding the nav bar – specifically the drop-down menu arrows – if you have time. In the wp-content directory folder, if have the following code:

    Order deny,allow
    Deny from all
    <Files ~ ".(xml|css|jpe?g|png|js)$">
    Allow from all
    </Files>

    This code causes the arrows in the drop-down menu to turn into squares. If it’s removed, they return to being arrows, leading me to believe it’s the cause. In the code, there is a list of exceptions. Do I need to add an additional exception to resolve the issue with said arrows?

    Thank you Tom, and have a good day.

    Andrés

    #1368123
    Tom
    Lead Developer
    Lead Developer

    Yes, if you want the navigation to always be transparent, the Customizer is the way to go.

    As for the icon issue, try turning on SVG icons in Customize > General.

    Let me know 🙂

    #1368169
    Andres

    Hi Tom,

    Thanks! That did it.

    Have a good night.

    Andrés

    #1368831
    Tom
    Lead Developer
    Lead Developer
Viewing 14 posts - 1 through 14 (of 14 total)
  • You must be logged in to reply to this topic.