[Support request] How do i connect one page navigation link to rest of website?

Home Forums Support How do i connect one page navigation link to rest of website?

This topic contains 5 replies, has 2 voices, and was last updated by  David 4 days, 18 hours ago.

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #777859

    Sean

    Hi,

    For my navigation link “Gallery” I have set it as a custom link so it scrolls down to the relevant section on home page.

    However, the link is only working on the home page, if I browse on any other page, about or contact, the Gallery navigation link will not link back to gallery section on the homepage.

    How do I rectify this?

    GeneratePress 2.2.1
    #778177

    David Customer Support

    Hi there,

    you would need to use the full url: eg. https://mywebsite.com/#link

    #778872

    Sean

    Great, thanks! The only problem now is on the home page hero section both the home and gallery link are underlined as active at the same time. How do I fix this? here is the css:

    @media (min-width: 769px) {
        .main-navigation .menu > .menu-item > a::after {
            content: "";
            position: absolute;
            right: 0;
            left: 50%;
            bottom: 15px;
            -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
    
            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%;
        }
    }
    
    #779013

    David Customer Support

    So as long as you don’t mind that the Gallery Link won’t show as the active link, as that is real tricky to do, then this:

    1. Go to Appearance > Menus – edit the gallery menu item and give it a CSS Class ( make sure this option is active under the Screen Settings in the Menu editor). example class: jump-link:

    2. Edit this line of CSS:

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

    So it looks like:

    .main-navigation .menu > .menu-item:not(.jump-link).current-menu-item > a::after,
        .main-navigation .menu > .menu-item:not(.jump-link).current-menu-ancestor > a::after,
        .main-navigation .menu > .menu-item > a:hover::after {
            width: 50%;
        }

    This will exclude that item from the current menu item effect.

    #779619

    Sean

    Great all working, thanks very much David!

    #779639

    David Customer Support

    awesome. glad to be of help.

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.