Archived topic
navigation bar over image
16 replies · Started by Ohad on February 4, 2020
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.
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.
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
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 ?
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.
Hi there,
Do you have a Navigation Location set for it?: https://docs.generatepress.com/article/navigation-location/
Let me know :)
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
Well thats odd.
Can you try disabling all other plugins apart from GeneratePress Premium to see if there is a conflict.
Ok, I just did. There was still no option for navigation location.
Can only the primary navigation overlay the banner? Or can the secondary navigation also overlay?
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 ?
So that's working nicely for homepage and pages, but for posts I have a white background behind the navigation
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.
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...
Try creating a new Header Element - that just has the Site Header set to Merged and set the Location to Posts > All Posts