[Resolved] Can't get Menu/Nav or Footer to be sticky

[Martin]

Hi there. I have looked through the forum and found many entries about sticky menu (nav) and sticky footers but oddly, nothing seems to be working for me. I have a fresh GP Pro install with menu plus etc activated. To style the site I used the ‘Marketer’ style form Site Library. I then went in my child theme and tried all the various CSS snippets for getting the footer to be at the bottom of an almost empty page but none of it worked. The copyright text simply would not move to the bottom.

So, I gave up on that and moved to the Header area where I hoped to make the top nav be sticky. I created a menu and in Layout > Sticky Navigation I enabled sticky navigation. With ‘Sticky Navigation’ enabled and ‘Hide when scrolling down’ disabled, the menu stays at the top at all times. However, with ‘Hide when scrolling down’ enabled, the menu does not reappear when scrolling stops regardless of the ‘Transition’ setting.

Over the years of using GP Pro, must admit this is always one of the most frustrating parts of setting up a website – especially the footer part. Many people want it but requiring code to do it seems a bit of an out dated method and rather pot luck as to whether it will work.

What could be causing the frustration here?

Thanks for reading.

Martin

[David]

Hi there,

Footers on short pages are troublesome – without throwing Javascript at the site there isn’t a defacto method that works for all setups or at least not without introducing some possible issues. This is probably the most solid that works on most sites:

body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}
.container.grid-container {
    width: 100%;
}
.site-footer {
    margin-top: auto;
}

Sticky Navigation – there isn’t an option for the Nav to appear when Hide when scrolling down is enabled , other then the user scrolling up unfortunately.

[Martin]

Wow that CSS for ‘sticky footer’ worked an absolute treat.

I understand what you mean about the Sticky Navigation.

Thank you David.

[David]

Glad to be of help

[Cleo]

Did you manage to get sticky working with your header? I have Layout > Header > Sticky ON but the logo and nav just happily scroll on by. I have toggled Use Navigation as Header option and that doesn’t change anything. It’s just the non-mobile view that is not sticky. The mobile-header is sticky. The WP top-bar is sticky by default.

Looking at dev tools, I see three nav tags with three different id’s: #mobile-header, #sticky-placeholder, #site-navigation. The first two navs (#mobile-header and #sticky-placeholder) have class .has-sticky-branding but the last nav (#site-navigation), does not. Thinking that this might be the problem, using dev tools, I added class .has-sticky-branding to the #site-navigation classes but it had no effect.

Usually, I figure out what I’m doing wrong right after I post. So here we go…

[Martin]

I do have sticky navigation turned on with no transition.

When I scroll, the top nav stays at the top and the logo shrinks down (too small actually).

I’m not entirely swift with setting up GP but I’m sure the experts will help you.

Martin

[Cleo]

Woah, I’m an idiot! I just saw the Sticky Navigation item in the Layout fly-out. I had been entirely focused on Header which has a Sticky toggle. When I turned on Sticky from the Sticky Navigation menu it worked. So, it’s a little confusing to be editing Layout > Header where there’s a sticky option that doesn’t work. Maybe don’t even put it in there and force people to look around and discover the Sticky Navigation tab which will be obvious when you spend a second 🙂

[Martin]

Pleased you found it. I usually spend lots of time hunting for settings and end up confused about logos, icons, stickies etc.

[samuel]

doing this makes a scroll bar how do i get ride of that?

[Fernando]

Hi Samuel,

Can you open a new ticket and share the link to the site in question?

We’ll check there what’s occurring.

[Author]

Posts