[Resolved] Anchor Link has line in menu

[troyw]

Hey team,
I had a similar issue several weeks back, where the anchor link was displaying the wrong color on the Home Page Navigation. This issue has occured again on a differnt website build, so I have fixed the color the problem using your previous adice. However, I have a line appearing under the menu item which is an anchor link. I do not wnat this line, I just want the menu item to look like any other. The menu is the ‘About Us’ which is an anchor link to a section on the home page. How do I remove the line under it?
Thanks

[Elvin]

Hi there,

That underline applies because of this CSS:

    .main-navigation .menu>.menu-item>a:before,
    .main-navigation .menu>.current-menu-item:not(.wc-menu-item)>a:before,
    .loud-link a:before {
        content: "";
        position: absolute;
        display: block;
        bottom: 1em;
        width: 0%;
        height: 2px;
        background-color: currentColor;
        -webkit-transition: 0.3s width ease;
        transition: 0.3s width ease;
    }

It’s because of the .current-menu-item being added to the menu item’s class since it’s within the same page.

That said, you may have to consider applying IsInViewport script on anchors for the menu items as a condition to apply this style.

or something like this:

<script type="text/javascript">
let mainNavLinks = document.querySelectorAll(".main-navigation li.menu-item > a");
let mainSections = document.querySelectorAll("#main .gb-container");

window.addEventListener("scroll", event => {
  let fromTop = window.scrollY;
  let pagemenu = document.querySelector(".main-navigation");
  let offset = pagemenu.offsetHeight;

  mainNavLinks.forEach( link => {
    let section = document.querySelector(link.hash);

    if ( document.readyState === 'complete' &&
      section.offsetTop <= fromTop + offset &&
      section.offsetTop + section.offsetHeight > fromTop + offset
    ) {
      link.parentNode.classList.add("active-section");
    } else {
      link.parentNode.classList.remove("active-section");
    }
  });
});
</script>

You then apply the underline styling to .active-section selector for the jump links.

[troyw]

Hey Elvin,
Not sure what to do with this script? It doesn’t work as CSS and I tried adding it to Functions.php but it errors? Where do I add this code?
Also, what is the active-section selector?
Thanks

[Elvin]

It’s a JS script you hook to the wp_footer. You can use a Hook element for this and set its display rule location to “Front page” if the jump link is only on the front page.

active-section is a class selector you can use to style the button to add its underline.

Example:

.active-section {
        content: "";
        position: absolute;
        display: block;
        bottom: 1em;
        width: 0%;
        height: 2px;
        background-color: currentColor;
        -webkit-transition: 0.3s width ease;
        transition: 0.3s width ease;
    }

It’s a class being toggled by the script I provided so your #about menu item link only gets it link when the actual anchor element is in viewport. 😀

[troyw]

Still no luck. I have added that code to a Hook Element as you described and put .active-section in the Additional CSS class(es) field. Nothing is happening?

[Elvin]

Try this script instead:

<script type="text/javascript">
let mainNavLinks = document.querySelectorAll(".main-navigation li.menu-item > a");
let mainSections = document.querySelectorAll(".entry-content .gb-container");

window.addEventListener("scroll", event => {
  let fromTop = window.scrollY;
  let pagemenu = document.querySelector("nav.main-navigation");
  let offset = pagemenu.offsetHeight;

  mainNavLinks.forEach( link => {
		
		if(link.hash){
			let section = document.querySelector(link.hash);
			
			if ( document.readyState === 'complete' && isInViewport(section) ) {
				link.parentNode.classList.add("active-section");
				console.log(link.hash);
			} else {
				link.parentNode.classList.remove("active-section");
			}
			 
		}

  });
});
	
var isInViewport = function (elem) {
	var distance = elem.getBoundingClientRect();
	return (
		distance.top >= 0 &&
		distance.left >= 0 &&
		distance.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
		distance.right <= (window.innerWidth || document.documentElement.clientWidth)
	);
};
</script>

Make sure the selector .main-navigation .menu>.current-menu-item:not(.wc-menu-item)>a:before, is removed from the CSS mentioned here – https://generatepress.com/forums/topic/anchor-link-has-line-in-menu/#post-2014050

What should happen is, the anchor link menu item should have its underline WHEN the about element is fully in viewport. 🙂

[troyw]

Hey Elvin,
I have changed the code in the Hook element as you suggested and removed line 135 from the custom css .main-navigation .menu>.current-menu-item:not(.wc-menu-item)>a:before,
Still nothing is happening?

[Elvin]

There’s another CSS adding it.
https://share.getcloudapp.com/E0uKe8wJ

The selector indicated has to be removed as well. 🙂

After removing it, the final tweak would be to change this:

.active-section {
        content: "";
        position: absolute;
        display: block;
        bottom: 1em;
        width: 0%;
        height: 2px;
        background-color: currentColor;
        -webkit-transition: 0.3s width ease;
        transition: 0.3s width ease;
    }

to this:

.active-section a:before {
        content: "";
        position: absolute;
        display: block;
        bottom: 1em;
        width: 0%;
        height: 2px;
        background-color: currentColor;
        -webkit-transition: 0.3s width ease;
        transition: 0.3s width ease;
    }

[troyw]

Where would I find this CSS?
Also, what do you mean by “The selector indicated has to be removed as well.”?

[Elvin]

Where would I find this CSS?

It’s a custom CSS added on your site’s Appearance > Customize > Additional CSS.

It’s this one:

/* Navigation and Links */

@media (min-width: 768px) {
    .main-navigation .menu>.menu-item>a:before,
    
    .loud-link a:before {
        content: "";
        position: absolute;
        display: block;
        bottom: 1em;
        width: 0%;
        height: 2px;
        background-color: currentColor;
        -webkit-transition: 0.3s width ease;
        transition: 0.3s width ease;
    }

Try changing it to this:

/* Navigation and Links */

@media (min-width: 768px) {
    .loud-link a:before {
        content: "";
        position: absolute;
        display: block;
        bottom: 1em;
        width: 0%;
        height: 2px;
        background-color: currentColor;
        -webkit-transition: 0.3s width ease;
        transition: 0.3s width ease;
    }

[troyw]

Hey Elvin,
That seems to have removed line, but it has also removed it from the ‘Home’ Link. Also, the Anchor link for ‘About Us’ is still shaded like a current page menu link would be. I just want the the ‘About Us’ link to behave like any other link?
Cheers

[troyw]

I tink all we have achived is to remove the underline completely, which I don’t want to do. I just want the ‘Aout Us’ Anchor link to look like any other link.

[Elvin]

I understand what you’re trying to do but the issue is we can’t use current-menu-item and current_page_item to apply the line because both About Us and Home has this as both this menu items links are on the same page.

That’s actually why I asked to remove selectors .main-navigation .menu>.menu-item>a:before, and .main-navigation .menu>.current-menu-item:not(.wc-menu-item)>a:before, and then suggested a script so we can programmatically add the styling for jump links. 😀

I checked the page and at its current state, the only piece missing is this CSS:

body.home li#menu-item-902.current-menu-item,
body:not(body.home) li.current-menu-item,
.active-section a:before {
        content: "";
        position: absolute;
        display: block;
        bottom: 1em;
        width: 0%;
        height: 2px;
        background-color: currentColor;
        -webkit-transition: 0.3s width ease;
        transition: 0.3s width ease;
    }

Which should apply the styling for the script and the missing underline to “Home” when you’re on home page. This CSS is crucial because this will be the one adding the underline back. It must be added properly. (don’t add it in a @media rule) 😀

[troyw]

Hey Elvin,
I added the above CSS and it broke the navigation. All it does is push the Home menu onto a new line under the Shop menu?
Please see result on Home Page now.
Thanks

[Ying]

Can you try replace this selector:

body.home li#menu-item-902.current-menu-item,
body:not(body.home) li.current-menu-item,
.active-section a:before

with this:

body.home li#menu-item-902.current-menu-item:before,
body:not(body.home) li.current-menu-item:before,
.active-section a:before

[Author]

Posts