Archived topic
Sticky navigation on top of full screen slideshow
8 replies · Started by Tony on December 16, 2018
Hello.
I'm trying to do the following:
https://www.willpearson.co.uk/
I have already followed the instructions below:
https://generatepress.com/forums/topic/keep-menus-visable-with-scroll/#post-54453
I have two issues:
- My sticky menu won't stick!
- I'm forcing the Beaver Builder slideshow to cover the whole screen, by using a negative number as a top row margin. (-60). The side effect is that the logo and tagline are then hidden behind the slideshow.
My login credentials are the same as for the resolved case below:
#754481
Thanks for your time.
Chris.
Hi again!
I 've made progress. My navigation is now sticky after setting the following:
Customize > Layout > Sticky Navigation > ON
The remaining issues are:
- Logo and tagline are hidden behind the slideshow (or photo).
- The default navigation background color is transparent. When I start scrolling down I would like to have a #hex color or image as a background, in other words, doing this:
https://www.willpearson.co.uk/
- After page load, when I scroll down, there is a tilt in the menu (note that there is also css in Customize > Additional CSS).
Thanks.
Chris.
Hi there,
Have you tried the exact steps here?
https://docs.generatepress.com/article/navigation-as-a-header/#merge-with-header-elements
Looks like it's exactly what you needed.
Let me know :)
Hi Leo.
It is exactly what I need!
I have already followed the instructions you sent me and changed it.
There's only one issue. I need the tagline below the logo and the following CSS which does that, doesn't work anymore.
Thanks.
Chris.
---
.inside-header {
display: grid;
grid-template-columns: 240px auto;
}
.site-logo {
grid-column: 1;
grid-row: 1;
margin-bottom: 0.3em;
}
.site-branding {
grid-column: 1;
grid-row: 2;
}
#site-navigation {
grid-column: 2;
grid-row: 1 / 3;
align-self: center;
}
.main-navigation .main-nav ul li a {
padding-left: 5px;
padding-right: 20px;
line-height: 60px;
}
.main-navigation li {
float: right;
position: relative;
}
I have also tried, as an alternative, to put a tag below the logo using a Hook in Elements, but the after_logo hook only works for the normal logo and not for the sticky one...
So you want to add tagline to navigation logo?
If so try this method:
https://generatepress.com/forums/topic/how-i-add-tagline-below-logo-in-primary-nav/#post-623313
Hi Leo.
I have put the code in functions.php.
It's (almost) working.
I can see the tagline when I start to scroll down but I cannot see it when I'm at the top of the page.
Thanks.
Chris.
Hi Leo.
It worked! The problem was an Element I created yesterday as I was trying to place the tagline below the logo. I removed the Element and now everything is fine.
Thanks very much for helping.
Chris.
No problem :)
