[Resolved] Anchor Link has line in menu

Home Forums Support [Resolved] Anchor Link has line in menu

Home Forums Support Anchor Link has line in menu

Viewing 15 posts - 1 through 15 (of 18 total)
  • Author
    Posts
  • #2014031
    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

    #2014050
    Elvin
    Staff
    Customer Support

    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.

    A wise man once said:
    "Have you cleared your cache?"

    #2016764
    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

    #2016775
    Elvin
    Staff
    Customer Support

    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. πŸ˜€

    A wise man once said:
    "Have you cleared your cache?"

    #2016783
    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?

    #2016821
    Elvin
    Staff
    Customer Support

    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. πŸ™‚

    A wise man once said:
    "Have you cleared your cache?"

    #2016836
    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?

    #2016845
    Elvin
    Staff
    Customer Support

    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;
        }

    A wise man once said:
    "Have you cleared your cache?"

    #2016860
    troyw

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

    #2016867
    Elvin
    Staff
    Customer Support

    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;
        }

    A wise man once said:
    "Have you cleared your cache?"

    #2016883
    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

    #2016893
    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.

    #2016896
    Elvin
    Staff
    Customer Support

    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) πŸ˜€

    A wise man once said:
    "Have you cleared your cache?"

    #2025195
    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

    #2025274
    Ying
    Staff
    Customer Support

    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
Viewing 15 posts - 1 through 15 (of 18 total)
  • You must be logged in to reply to this topic.