[Resolved] Sticky navigation on top of full screen slideshow

[Tony]

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.

[Tony]

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.

[Leo]

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 🙂

[Tony]

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;
}

[Tony]

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…

[Leo]

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

[Tony]

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.

[Tony]

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.

[Leo]

No problem 🙂

[Author]

Posts