[Support request] Underline Colors in Menù

Home Forums Support [Support request] Underline Colors in Menù

Home Forums Support Underline Colors in Menù

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

    Hi, we’re new in GeneratePress and not so expert on code.

    We have found on forum that code for underline our menu:

    .main-navigation .main-nav ul li[class*=”current-menu-“] > a:after,
    .main-navigation .main-nav ul li:hover > a:after,
    .main-navigation .main-nav ul li.sfHover:hover > a:after {
    content: “”;
    display: block;
    width: 100%;
    border-bottom: 2px solid #e62a32;
    position: relative;
    top: -15px;
    opacity: 1;
    }

    It works for us, but we need a more implement: we wish the underline on active page be #184590 (instead of #e62a32).
    So on hover text and underline goes #e62a32, but on active page test and underline rest #184590.
    Inactive page should remain #184590, for completness.

    I think it is a so common request that I feel real noob.

    Could you help us?

    Thanks for patience.

    Alberto

    #970947
    David
    Staff
    Customer Support

    Hi there,

    we can add an additional CSS rule to change the color on current menu – so your entire code will look like so:

    .main-navigation .main-nav ul li[class*="current-menu-"]>a:after,
    .main-navigation .main-nav ul li:hover>a:after,
    .main-navigation .main-nav ul li.sfHover:hover>a:after {
        content: "";
        display: block;
        width: 100%;
        border-bottom: 2px solid #e62a32;
        position: relative;
        top: -15px;
        opacity: 1;
    }
    
    .main-navigation .main-nav ul li[class*="current-menu-"]>a:after {
        border-bottom: 2px solid #184590;
    }
    #970951
    Alberto

    Thank you David!

    It fits perfect (no doubt about that…^^).

    Just another question: if we want to apply to the widget menu on the side?

    If we click on “Convenzione Ginecologi” (or Cliniche Private, it’s the same) the text is #e62a32 (while inactive stand #184590).
    How to underline that #e62a32 on hover and active page?

    #970969
    David
    Staff
    Customer Support

    So its a beaver builder module – not sure if that function is available through the beaver builder editor if it isn’t then try this CSS – i have commented it to explain how this works:

    /* Force menu item to width of text */
    .fl-builder-content nav ul li a {
        display: inline-block;
    }
    /* Create hidden underline on all menu items but hide it */
    .fl-builder-content nav ul li a:after {
        content: "";
        display: block;
        width: 100%;
        border-bottom: 2px solid #e62a32;
        position: relative;
        opacity: 0;
    }
    /* Change colors and show underline on hover and current */
    .fl-builder-content nav ul li:hover>a:after {
        border-bottom: 2px solid #e62a32;
        opacity: 1;
    }
    .fl-builder-content nav ul li[class*="current-menu-"]>a:after {
        border-bottom: 2px solid #184590;
        opacity: 1;
    }
    #970990
    Alberto

    David, you’re a drake.

    Applied it and it’s great.
    I’ve just added the

    top: 10px;

    to the CSS in order to make a little distance to the underline.

    Try it, if you can.
    For us is suitable.

    Thanks a lot!!!

    #971215
    David
    Staff
    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.