[Resolved] How can I get my sticky navigation to act as permanent header?

[kyle]

Hello, I just went premium for the sticky navigation add on and I would like to use the sticky navigation as my permanent header.

I have followed the instructions on the page about sticky navigation and removed my site logo and set my site header to display: none; all good so far, however, I don’t know how I can get the navigation to display even when the page is at the top. It simply disappears.

I know this is what it’s mean to do, I just need to know how to change it.

Thanks in advance

Kyle

[kyle]

Nevermind, I’m happy to keep my normal header and just have the sticky navigation fade in when needed.

🙂

[Tom]

For anyone wondering the same thing, you would need to set your sticky effect to “None” and remove the site header:

.site-header {
    display: none;
}

Glad you like it 🙂

[David]

Tom,

I’m using GP Pro. Several questions:

(1) Simply put, I need a sticky responsive menu. The website title and tagline are hidden. I have not altered header.php or functions.php, and the only customization of style.css is what you’ve shown above. Can you be more specific on how to achieve a basic sticky responsive menu?

(2) On a related issue, can the aforementioned sticky responsive menu display text instead of a logo on the left side? I understand that I’ll need to adjust the font-size based on the breakpoint.

(3) The mobile menu is not hiding itself when the link is an anchor tag on a one-page menu.

Thanks. Love the product. Nice job.

David

[Leo]

Hi David,

(1) You shouldn’t need that CSS above for a basic sticky navigation. This page shows you how to use the sticky navigation feature in GP: https://docs.generatepress.com/article/sticky-navigation/

(2) So you want the navigation to display logo on desktop/tablet and switch to text on mobile?

(3) Are you looking to hide the navigation all together on mobile?

Might help if you show us the site 🙂

[David]

(1) Your documentation provided the answer regarding the sticky responsive menu except for one thing. Why is the hamburger icon visible in desktop mode? See here:

http://davidwoosley.com

(2) I need text (my name) on the left side of the sticky responsive menu regardless of the device size. In other words, always text, never icon. I know how to adjust the font-size below/above the device breakpoint.

(3) When the responsive menu item is a link to an anchor on a one-page site, here is what happens: (a) The page scrolls to the (almost) correct place; and (b) The responsive remains open, which it clearly shouldn’t.

[David]

I’ll gladly give you access to the site dashboard.

[Leo]

(1) Customizer > Layout > Primary Navigation > Slideout Navigation > Mobile Only

(2) First obviously unhide site title/tagline then you can remove the logo/icon.
Then Customizer > Layout > Header > Mobile Header > Disable so the title/tag line should show up.
I’m looking for a way to move the icon to the right instead of below without using the mobile header.

(3)
(a) The page does scrolls to the correct place – it’s just blocked by the sticky navigation.
I think it would work if you set Sticky Navigation to Desktop Only
(b) This post might help: https://generatepress.com/forums/topic/close-menu-on-mobile-after-clicking/#post-265481

[David]

(1) Resolved, looks great. Thanks.

(2) and (3): We would save time for both of us, and I would really appreciate it, if you logged as admin and configured the header text and the non-disappearing responsive menu on my behalf. You can’t hurt the website. Everything is backed up.

Site:

http://www.davidwoosley.com/wp-admin

Here is the desired effect:

Many, many thanks. –David

[Tom]

Using an image is definitely easier, but you can insert HTML instead using a hook: https://generatepress.com/forums/topic/sitetitle-in-navbar-instead-of-icon/#post-225010

[Author]

Posts