Several menu items are highlighted under the GeneratePress Theme

@dwscorewp Hello and thanks for explaining the issue in detail.

The highlighting you see (red color and underlined link text) comes from your theme (not the plugin).

Almost all WordPress themes highlight current menu items/links, i.e. menu links that point to the same/current page, like your #section-1, #section-2 and #section-3. That’s why your “Home” link is also highlighted: we’re in homepage and the “Home” link points to the homepage.

You simply need to adjust the existing theme CSS for such links. We basically want to avoid links that point to specific targets within the page getting highlighted.

So, to remove the highlighting from the links that are handled by “Page scroll to id”, add the following CSS:

.main-navigation .main-nav ul li[class*="current-menu-"] > a.__mPS2id:not(:hover){
	color: inherit;
	background-color: inherit;
}

@media (min-width: 769px){
	.main-navigation .menu > .menu-item.current-menu-item > a.__mPS2id:not(:hover)::after,
	.main-navigation .menu > .menu-item.current-menu-ancestor > a.__mPS2id:not(:hover)::after,
	.main-navigation .menu > .menu-item > a.__mPS2id:not(:hover)::after{
		width: 0;
	}
}

Now, if you want to remove the highlighting from those links and have them highlighted by the plugin when scrolling the page, change the above CSS to:

.main-navigation .main-nav ul li[class*="current-menu-"] > a.__mPS2id:not(.mPS2id-highlight):not(:hover){
	color: inherit;
	background-color: inherit;
}

@media (min-width: 769px){
	.main-navigation .menu > .menu-item.current-menu-item > a.__mPS2id:not(.mPS2id-highlight):not(:hover)::after,
	.main-navigation .menu > .menu-item.current-menu-ancestor > a.__mPS2id:not(.mPS2id-highlight):not(:hover)::after,
	.main-navigation .menu > .menu-item > a.__mPS2id:not(.mPS2id-highlight):not(:hover)::after{
		width: 0;
	}
}

In addition, if you want to have the links highlighted by the plugin and to prevent the theme from highlighting the “Home” link, you can change the CSS to:

.main-navigation .main-nav ul li[class*="current-menu-"] > a.__mPS2id:not(.mPS2id-highlight):not(:hover), 
.main-navigation .main-nav ul li.page-item-18[class*="current-menu-"] > a:not(.mPS2id-highlight):not(:hover){
	color: inherit;
	background-color: inherit;
}

@media (min-width: 769px){
	.main-navigation .menu > .menu-item.current-menu-item > a.__mPS2id:not(.mPS2id-highlight):not(:hover)::after,
	.main-navigation .menu > .menu-item.current-menu-ancestor > a.__mPS2id:not(.mPS2id-highlight):not(:hover)::after,
	.main-navigation .menu > .menu-item > a.__mPS2id:not(.mPS2id-highlight):not(:hover)::after, 
	.main-navigation .menu > .menu-item.page-item-18 > a:not(.mPS2id-highlight):not(:hover)::after{
		width: 0;
	}
}

Let me know if everything works ??

• This reply was modified 1 year, 10 months ago by malihu.

Hello malihu,

Thank you very much for your quick response to my request.

I have now tried all 3 of your variants and the first thing I noticed, no matter which variant, was that the menu links of #section-1, #section-2 and #section-3 light up briefly when the start page is reloaded before they disappear.

Is there any way to prevent this?

My idea of the solution comes closest to the 2nd variant (see current CSS on the website), whereby the home button still remains active, although you have already scrolled to section 1, 2 or 3.

However, the home button should only remain active until you either scroll into one of the sections or click on it.

Is there a way to do this too?

Because with your 3rd variant, the home button is not activated again at all, even if you click on home and have not yet scrolled to a section.

Many thanks again for your support.

The way to make your “Home” link behave like the other ones (section 1, 2 and 3) is to change its URL to point to a section at the top of the homepage.

For example you can give your “Headline” section the id headline and change your “Home” link URL to: https://wema.notecloud.de/#headline.

This while using the 3rd CSS variant.

The links briefly highlighting while the page is loading is normal. To avoid it, change the (3rd) CSS variant to:

.main-navigation .main-nav ul li[class*="current-menu-"] > a[href*='#']:not([href='#']):not(.mPS2id-highlight):not(:hover), 
.main-navigation .main-nav ul li.page-item-18[class*="current-menu-"] > a:not(.mPS2id-highlight):not(:hover){
	color: inherit;
	background-color: inherit;
}

@media (min-width: 769px){
	.main-navigation .menu > .menu-item.current-menu-item > a[href*='#']:not([href='#']):not(.mPS2id-highlight):not(:hover)::after,
	.main-navigation .menu > .menu-item.current-menu-ancestor > a[href*='#']:not([href='#']):not(.mPS2id-highlight):not(:hover)::after,
	.main-navigation .menu > .menu-item > a[href*='#']:not([href='#']):not(.mPS2id-highlight):not(:hover)::after, 
	.main-navigation .menu > .menu-item.page-item-18 > a:not(.mPS2id-highlight):not(:hover)::after{
		width: 0;
	}
}

If you do change your “Home” link URL as described above (i.e. using a target like #headline), you can change the CSS to:

.main-navigation .main-nav ul li[class*="current-menu-"] > a[href*='#']:not([href='#']):not(.mPS2id-highlight):not(:hover){
	color: inherit;
	background-color: inherit;
}

@media (min-width: 769px){
	.main-navigation .menu > .menu-item.current-menu-item > a[href*='#']:not([href='#']):not(.mPS2id-highlight):not(:hover)::after,
	.main-navigation .menu > .menu-item.current-menu-ancestor > a[href*='#']:not([href='#']):not(.mPS2id-highlight):not(:hover)::after,
	.main-navigation .menu > .menu-item > a[href*='#']:not([href='#']):not(.mPS2id-highlight):not(:hover)::after{
		width: 0;
	}
}

Let me know

Hello malihu,

the fact that the links are no longer briefly highlighted when the page loads works great.

However, as far as your suggestion is concerned to set a section ID for the home link and to create an individual link for the home button, I have now installed it once (see website), but it does not meet my expectations, since it does not scroll should, but it does instead of just loading the home page.

I really appreciate your effort, but it can’t stay the way it is now, as the home page isn’t supposed to have its own section and just isn’t allowed to scroll.

Isn’t there another option here?

Many thanks again for your support.

No problem. You can try this:

Instead of giving the headline id to your section, create a “Page scroll to id target” (via the plugin block or shortcode) and give it the id headline.

You can then give it the following CSS:

#headline{
    position: absolute;
    top: 0;
}

This should create an invisible headline target and make it “stick” to the top of the page.

Hello malihu,

thank you very much, that works great, except for one tiny little thing and then you’ve made it. ??

If I scroll down even a little with the mouse so that the sticky menu appears, the highlighting of the home button disappears again. Actually, this should remain until the next section Section 1 is displayed.

If you can do that, then you really are a superhero ??

Greetings DWC

The way your HTML markup is set now, this can be done by moving the headline target (you created) inside the “Headline” content, e.g. before the first paragraph.

If you can move it there and then change its CSS like below, it should work like you describe:

#headline{
    position: sticky;
    top: 0;
}

Just keep in mind that some specific CSS changes that you might do in the future on the “Headline” section parent element(s), might affect this. In such case we’ll probably have to use custom javascript to achieve the same behavior.

Hello malihu,

the last solution you suggested didn’t work so well, since a scrolling problem arose again in that clicking on “Home” from another page or a section no longer scrolled to the top of the start page.

But in combination with your previous solution (see code below) and a short search in the forum for “Home”, I found this post and finally found a satisfactory solution by adding the following to it.

Previously, as you suggested, I had moved the “Page Scroll to ID Target (headline)” before the first paragraph, so everything works fine now.

#headline{
  position: absolute;
  top: 0;
  height: 100vh;
}

Here is the complete CSS again, which, in conjunction with the GeneratePress Menu Hover Animation and your great support, has now led to a really satisfactory result.

/* Source: https://docs.generatepress.com/article/adding-menu-hover-animation */
@media (min-width: 769px) {
  .main-navigation .menu > .menu-item > a::after {
    content: "";
    position: absolute;
    right: 0;
    left: 50%;
    bottom: 15px;
    -webkit-transform: translate3d(-50%,0,0);
    transform: translate3d(-50%,0,0);

    display: block;
    width: 0;
    height: 2px;

    background-color: currentColor;
    transition: 0.3s width ease;
  }
  .main-navigation .menu > .menu-item.current-menu-item > a::after,
  .main-navigation .menu > .menu-item.current-menu-ancestor > a::after,
  .main-navigation .menu > .menu-item > a:hover::after {
    width: 50%;
  }
}


/* Fixed "Page scroll to id" issue when multiple menu items are highlighted when using GeneratePress Hover Animation (see above) */
.main-navigation .main-nav ul li[class*="current-menu-"] > a[href*='#']:not([href='#']):not(.mPS2id-highlight):not(:hover) {
	color: inherit;
	background-color: inherit;
}

@media (min-width: 769px) {
	.main-navigation .menu > .menu-item.current-menu-item > a[href*='#']:not([href='#']):not(.mPS2id-highlight):not(:hover)::after,
	.main-navigation .menu > .menu-item.current-menu-ancestor > a[href*='#']:not([href='#']):not(.mPS2id-highlight):not(:hover)::after,
	.main-navigation .menu > .menu-item > a[href*='#']:not([href='#']):not(.mPS2id-highlight):not(:hover)::after{
		width: 0;
	}
}

#headline {
  position: absolute;
  top: 0;
  height: 100vh;
}

By the way, I think I’m not the only one with this problem, but this might also be helpful for others who work with GeneratePress.

I knew you were a superhero ?? and thanks again for your support.

• This reply was modified 1 year, 10 months ago by DWsCoreWP.
• This reply was modified 1 year, 10 months ago by DWsCoreWP.

Great! Keeping the position to absolute and setting the height to 100vh will work too ?? Alternately a similar way (if you don’t want to use vh) is:

#headline{
    position: absolute;
    top: 0;
    bottom: 0;
}

If you need more help let me know.

Hello malihu,

I have now used the alternative you suggested.

I have another question. If I’m on a page other than Home (e.g. About) and then e.g. click on the “Section 3” menu link, then there is a restless jerking when loading the page before the page then scrolls.

Do you perhaps have an idea how I can prevent this restless bucking? I have already installed a delay of 400 milliseconds in the plugin for “Links behavior” and yet the transition when loading the page is just so jerky. I know that this may also be due to the cache if the link has already been visited before.

PS By the way, I sent you an email about a private question via your plugin page.

Thanks so much
DWsCoreWP

Hey, I can’t see any jerking when loading https://wema.notecloud.de/#section-3. I’ve test it with Chrome, Firefox etc. and it scrolls smoothly to the section without any issue.

What browser/OS/device are you testing this on?