[Resolved] Sticky navigation on the bottom

[Ash]

What’s the best way to make navigation sticky on the bottom with GP?
But I’d like to keep header on top.

like this.
http://www.22centralparksouth.com/

[Tom]

You could try this:

#site-navigation {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
}

[Ash]

Thank you.
Is it possible to add some elements below navigation something footer-ish such as copyright.

[Tom]

So it’s always sticky as well?

[Ash]

Yes it is.

[Tom]

Try this:

.site-info,
#primary-navigation {
    position: fixed;
    left: 0;
    right: 0;
}

.site-info {
    bottom: 0;
}

#primary-navigation {
    bottom: 40px; /* height of copyright bar */
}

[Ash]

Works. Thank you.
Is it possible to show mobile navigation to opposite direction?
top to bottom -> bottom to top

[Tom]

Not sure I understand. Are you wanting the navigation to be stuck on top while on mobile?

[Ash]

My bad,
I thought mobile menu still opens downward but actually it opens upward when it’s on the bottom..
So no problem.

[Ash]

Actually it was not mobile menu, desktop menu still opens downward even though it’s on the bottom.

[Tom]

Ah, the regular dropdown menu you mean? Can you link me to the site?

[Ash]

Yes, regular dropdown.

[Tom]

Add this:

.main-navigation ul ul {
    top: auto;
    bottom: 60px;
}

.dropdown-menu-toggle:before {
    content: "\f106";
}

[Ash]

Worked!
Awesome 🙂

[Tom]

Glad I could help 🙂

[Author]

Posts