[Resolved] navigation bar over image

[Ohad]

1. i am trying the different backend options but can’t figure out how to get my navigation bar to overlap the image as shown in the generatepress library:
https://gpsites.co/aspire/

in my site it keeps appearing as a separate bar over the image.

2. also i’d like to modify the appearance of the text in the navigation bar.

[David]

Hi there,

edit the Header Element:
https://docs.generatepress.com/article/header-element-overview/

And on the Site Header tab where it set to Merged you have an option to edit the Navigation Colors – you can set the background to transparent, text color etc.

If you want to change the font size then you will do that from the Customizer > Typography > Primary Navigation.

[Ohad]

as you can see, i have the navigation background set to transparent, but the navigation bar still shows a black background
cbtisrael.co.il/images/navi-bg.png

[David]

Aah ok – you are using the Secondary Navigation instead of the Primary. The merged header colors only apply to the Primary.

Any reason you’re not using the Primary Nav ?

[Ohad]

The primary navigation is not being displayed, only the secondary navigation. I’ve tried different settings to show the primary and checked the help docs, I don’t see anyway to display it.

[Tom]

Hi there,

Do you have a Navigation Location set for it?: https://docs.generatepress.com/article/navigation-location/

Let me know 🙂

[Ohad]

There is no option for navigation location there:
https://www.dropbox.com/s/dgwvmolago6erls/1.png?dl=0

I have set the navigation location here:
https://www.dropbox.com/s/hftdbujdgjvvwir/2.png?dl=0

[David]

Well thats odd.
Can you try disabling all other plugins apart from GeneratePress Premium to see if there is a conflict.

[Ohad]

Ok, I just did. There was still no option for navigation location.

[Ohad]

Can only the primary navigation overlay the banner? Or can the secondary navigation also overlay?

[David]

No the Secondary nav and anything with the Site Header can overlay.
You can change Customizer > Colors > Secondary Navigation background color to transparent.

And then add this CSS if you want the drop down menus to be the solid color:

.secondary-navigation ul {
    background-color: #090909;
}

However it would be good to find out why the primary navigation option is not displaying.

Do you have a child theme installed with any custom functions ?

[Ohad]

So that’s working nicely for homepage and pages, but for posts I have a white background behind the navigation

[David]

Edit the Merged Header Element and include the Post > All Posts in your Display Rules – or you can apply it to the Entire Site if that is appropriate.

[Ohad]

Unfortunately that just added another banner image over the post image. I haven’t been able to figure out why the navigation bar background was white for posts even though I selected transparent (it’s as if the post banner image is being pushed down with a white background above it), so unless you have an idea how to make it truly transparent, I’m just going to add a darker overlay:
https://elementor.cbtisrael.co.il/2019/10/08/%d7%9e%d7%94-%d7%96%d7%94-%d7%98%d7%99%d7%a4%d7%95%d7%9c-%d7%a2%d7%a6%d7%9e%d7%99-%d7%91%d7%a9%d7%99%d7%98%d7%aa-%d7%98%d7%99%d7%a4%d7%95%d7%9c-%d7%a7%d7%95%d7%92%d7%a0%d7%99%d7%98%d7%99%d7%91%d7%99/

Unfortunately the homepage image in the background of the navigation bar is dark while the background for the navigation bar in posts is white, so I’m trying to find a good middle ground between both for the colors of the navigation bar. Not at all what I wanted but it doesn’t seem like we’re able to figure this out…

[David]

Try creating a new Header Element – that just has the Site Header set to Merged and set the Location to Posts > All Posts

[Author]

Posts