First click miss and formatting

1.Your header element (#site-navigation) changes its status between sticky/non-sticky depending on how much the page is scrolled.

When the page has not scrolled (i.e. you’re on the very top), the menu is not sticky (i.e. not fixed). It only becomes sticky/fixed when the page is already scrolled down a bit.

You’ve set the “Offset” value to account for the height of your :fixed menu (#site-navigation:fixed). So the offset applies only when the menu is sticky/fixed which happens only when the page has scrolled.

That’s why when you start from the top, the offset does not apply (the menu is not fixed yet). When you click the link a second time, the offset applies because the menu is now fixed/sticky.

Does this make sense?

The solution is to change your “Offset” value to:

#site-navigation:width(>992)

This will apply the offset when the menu width is greater than 992 pixels which is the breakpoint for your mobile non-sticky menu (in short, we’ll use the width expression instead of the fixed one as it works better with your theme).

2.The links highlighting happens only when you specifically add plugin’s highlight classes to your CSS.

The white text you see comes from your theme (I think it’s from bootstrap CSS). You can overwrite this by adding something like the following in your custom/additional CSS:

.dropdown-menu > .active > a:focus{
    color: black;
}

Change the black to the color you want.

Let me know if everything worked ??

Sorry, this reply was filtered out of my inbox, so just saw it now.
The CSS trick for #2 worked fine, thanks.
For #1, I changed the offset to use width (had tried this before but forgot to mention), and I’m getting the same behavior.

• This reply was modified 6 years, 1 month ago by phi11yguy19.

It seems that the offset value was not inserted correctly in your backend. Try to copy/paste the value again in the “Offset” option field:

#site-navigation:width(>992)

Let me know

Just pasted it in again to be sure – still no change

@phi11yguy19 OK, the offset value is now inserted correctly.

The issue with the navigation seems to come from the way the fixed/sticky navigation works.

There’s a CSS value in your theme’s stylesheet (...themes/shapely/shapely-style.min.css) which sets a minimum height for the navigation container element. This value does not seem correct as it seems to be 20 pixels more than it is.

The CSS that needs to be changed is:

.nav-container{
  min-height: 56px;
}

and you need to change 56px to 76px. You can do this by changing the theme’s stylesheet directly or by adding the following to additional css in wp customizer:

.nav-container{
  min-height: 76px;
}

Let me know

Thank you, that was it! You’ve been very helpful and responsive, and now it all works as expected. Thanks again!

Great! Glad I helped ??
Thanks a lot for the review.