Sticky Navigation (Desktop) Layout

Hi there,

Any chance you can link us to the site in question?

You can use the private information field.

Let me know :)

Hey Leo,

Certainly: https://tonedpeach.com/

Also, can you please tell me how to change the site-title color of the mobile header? I read that the mobile header inherits colors from the primary navigation, but none of the color settings seems to change the site-title. The parent text color only adjusts the search icon color and the menu hamburger. Do I have to adjust the color with CSS?

Thanks,
Fergal

Hi there,

There are a few things that need to be done to do this:

1. For the menu items you want to hide, give them a class: hide-on-sticky
2. For the menu items you want to show, give them a class: show-on-sticky

Then add some CSS:

.show-on-sticky,
.navigation-stick .hide-on-sticky {
    display: none !important;
}

.navigation-stick .show-on-sticky {
    display: block !important;
}

For the site title, you would need to hook in the site title into the navigation.

Something like this in the generate_inside_navigation hook: https://docs.generatepress.com/article/hooks-element-overview/

<div class="navigation-branding">
    <p class="main-title">Your title</p>
</div>

Then some CSS:

.navigation-branding {
    display: none;
}

.navigation-stick .navigation-branding {
    display: block;
}

Then it may need additional styling CSS to get it looking right.

Let us know :)

Hey Tom,

Thanks so much for your help! Can you please tell me how to add a class to HTML elements? Once I do that, I can add the CSS to .navigation-stick that you mention.

Using the hook and CSS you recommended I was able to get the site title showing up on the sticky navigation for the desktop view. I also centered and colored it with the following:

.navigation-stick .navigation-branding {
  display: block;
  color: #ff7d03;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  z-index: 101;
}

If there is a more preferred way to center the title please let me know. However, the mobile view is still showing color #fc9d44; for the .navigation-branding .main-title. Can you please tell me how to adjust this color?

Thanks,
Fergal

Hi there,

Can you please tell me how to add a class to HTML elements?

Is this for the menu items? If so, this should help: https://docs.generatepress.com/article/using-the-wordpress-menu-builder/#custom-classes

For the color, try this:

.navigation-stick .navigation-branding .main-title a {
    color: #ff7d03;
}

That centering method is a good way to do it :)

Hey Tom,

Thanks for the link to adding custom classes. I did that and now just a bit of CSS away from wrapping up the header :)

A couple styling things for the sticky nav:
Can you please tell me how to add background color on hover for the sticky nav primary menu items? I tried the following, but I'm making a mistake somewhere:

.navigation-stick .primary-menu ul li:hover > a:after, .primary-menu ul li ul li:hover > a:after {
    background-color: #fff4ea;
}

How do we adjust the font-size of those same items in the sticky menu (Fitness, Nutrition, and Blog links here)? I don't necessarily want to use typography > primary navigation > font-size as I like the social icons the size they are when not in sticky mode.

Unfortunately, the following css didn't change the site title color for the mobile header as it is still showing as #fc9d44 (can see it here):

.navigation-stick .navigation-branding .main-title a {
    color: #ff7d03;
}

Is there any other CSS we can please try to change the site title color of the mobile header?

Thanks,
Fergal

Your sticky navigation doesn't seem to be turned on so it's tough to test.

Can you please tell me how to add background color on hover for the sticky nav primary menu items?

Are you wanting the hover color to be different than the non-sticky navigation?

How do we adjust the font-size of those same items in the sticky menu (Fitness, Nutrition, and Blog links

This is your Secondary Navigation, so you can adjust the font size in Customize > Typography > Secondary Navigation.

For the mobile header title, try this instead:

.navigation-branding .main-title a, .navigation-branding .main-title a:hover, .navigation-branding .main-title a:visited {
    color: #ff7d03;
}

Hey Tom,

Thanks for your reply.

Regarding the Sticky nav, I do have it turned on and it's visible when logged in. But, I see what you mean as I also just saw in a separate incognito window that the sticky nav wasn't showing. Maybe this was a weird caching issue.

For my case, it is the primary nav that is showing up in the sticky. I'm guessing this is not the default behavior, but the layout is coming along nicely and just about finalized!

Essentially, to wrap up the navigation, I would like to apply the same CSS that is used for my secondary nav (which Ying had provided, please see below) to the pages menu items I added to the primary navigation with the css class of show-on-sticky:

.secondary-navigation .main-nav li a {
    display: inline-block;
}

.secondary-navigation .main-nav ul li:hover > a:after, .secondary-navigation .main-nav ul li ul li:hover > a:after {
    right: 0;
    transition: 0.5s all ease;
}

.secondary-navigation .main-nav ul li > a:after, .secondary-navigation .main-nav ul li ul li > a:after {
    content: "";
    position: absolute;
    bottom: 8px;
    left: 0;
    background-color: #fdc086;
    height: 1px;
    right: 100%;
}

I would also like to adjust the font-size of those show-on-sticky menu items to 15 px. I hope that all makes sense. Please let me know if I can clarify further and thanks so much for all your help Tom.

Regards,
Fergal

Also, the CSS for the mobile header title worked! Thanks.

To do that, you would copy that CSS and replace secondary-navigation with main-navigation so it applies to the primary navigation.

Then you'd need to add the class as well:

.main-navigation .main-nav li.show-on-sticky a {
    display: inline-block;
}

.main-navigation .main-nav ul li.show-on-sticky:hover > a:after, .main-navigation .main-nav ul li.show-on-sticky ul li:hover > a:after {
    right: 0;
    transition: 0.5s all ease;
}

.main-navigation .main-nav ul li.show-on-sticky > a:after, .main-navigation .main-nav ul li.show-on-sticky ul li > a:after {
    content: "";
    position: absolute;
    bottom: 8px;
    left: 0;
    background-color: #fdc086;
    height: 1px;
    right: 100%;
}

To adjust the font size, change the first bit of CSS to this:

.main-navigation .main-nav li.show-on-sticky a {
    display: inline-block;
    font-size: 15px;
}

Thanks Tom! It looks fantastic now.

Glad I could help :)