Black Friday sale! Get up to 25% off GP Premium! Learn more ➝

[Resolved] Underline menu navigation on hover and current

Home Forums Support [Resolved] Underline menu navigation on hover and current

Home Forums Support Underline menu navigation on hover and current

Viewing 15 posts - 1 through 15 (of 16 total)
  • Author
    Posts
  • #375224
    Dennis

    Hey,

    what do I have to insert into the CSS field to get a simple underline that you see on most websites nowadays? I also want the current page to be underlined.

    #375394
    Leo
    Staff
    Customer Support

    Hi there,

    It depends on what you want to underline. But the style should be border-bottom: 2px solid #000000

    Maybe you would be interested in this? https://docs.generatepress.com/article/adding-menu-hover-animation/

    #376565
    Dennis

    So basically I want the current page in the menu to be underlined and underline on hover. I’ve tried modifying the code from the link but it ended up weird on mobile and tablets..

    Also, I don’t want any animation with it.

    #376776
    Leo
    Staff
    Customer Support

    OK then scratch that then just use this:

    @media (min-width:769px) {
        .main-navigation .main-nav ul li[class*="current-menu-"] > a {
            border-bottom: 2px solid #ffffff;
        }
    }
    #376934
    Dennis

    Awesome! I didn’t get quite the results I wanted from your code so I kinda assembled the one you posted before (from the link) and the new one:

    @media (min-width: 769px) {
    	.main-navigation .menu > .menu-item > a::after {
        content: "";
        position: absolute;
        right: 50%;
        left: 50%;
        bottom: 1px;
        transform: translateX(-50%);
        height: 4px;
    
        background-color: currentColor;
    }
    .main-navigation .menu > .menu-item.current-menu-item > a::after{
        width: 50%;
    }
    }

    What do you think about that code? It works great on desktop but I was trying to get it to work on mobile (with a max width of 768) but the underlining is always out of place.

    Any ideas?

    #377006
    Leo
    Staff
    Customer Support

    Code looks good.

    Mobile is a bit tricky. Can you show me what you have so far?

    #377169
    Dennis

    I actually settled for a different approach which works great on mobile too.

    However, I changed the text colour of the primary navigation and now the text next to the burger menu on mobile has the same colour. Is it possible to make it black instead of the text colour specified in the customize menu?

    #377412
    Leo
    Staff
    Customer Support

    Try this CSS:

    .menu-toggle .mobile-menu {
        color: #000000 !important;
    }

    Adding CSS: https://docs.generatepress.com/article/adding-css/

    #377421
    Dennis

    hey, didnt work!

    #377453
    Leo
    Staff
    Customer Support

    Can you link me to the site?

    #377455
    Dennis

    sure, here you go: http://foundwith.in

    #377457
    Leo
    Staff
    Customer Support

    Looks like you removed the menu text?

    The toggle can be changed like this:

    @media (max-width: 768px)
        .mobile-header-logo .main-navigation.mobile-header-navigation .menu-toggle {
            color: #000000;
        }
    }
    #377465
    Dennis

    yep that work! thank you so much for your patience. πŸ™‚
    had to add one bracket after the first line

    just out of curiosity, how do i tackle learning CSS best? where do I start? any tips?

    #377573
    Leo
    Staff
    Customer Support

    I learned from doing the free course here: https://www.codecademy.com/

    Then it’s just using the developer tool of your browser πŸ™‚

    #1894794
    Mihail

    hi all πŸ˜‰

    i used this code:

    @media (min-width: 769px) {
    	.main-navigation .menu > .menu-item > a::after {
        content: "";
        position: absolute;
        right: 50%;
        left: 50%;
        bottom: 1px;
        transform: translateX(-50%);
        height: 4px;
    
        background-color: currentColor;
    }
    .main-navigation .menu > .menu-item.current-menu-item > a::after{
        width: 50%;
    }
    }

    Everything works well until it comes to the dropdown menu.
    https://prnt.sc/1o238fg

    Is it possible to align the underline so that it appears exclusively below the menu text?

    I want it to be like this:
    https://prnt.sc/1o24igh

Viewing 15 posts - 1 through 15 (of 16 total)
  • You must be logged in to reply to this topic.