Celebrating 7 Years! Get up to $30 off GeneratePress Premium!

[Resolved] Menu Underline on Current/Hover and Sytling Dropdown Menu

Home Forums Support [Resolved] Menu Underline on Current/Hover and Sytling Dropdown Menu

Home Forums Support Menu Underline on Current/Hover and Sytling Dropdown Menu

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #594885
    Jhorene

    Hi guys,

    I need to have a nice underline on the current menu item and hover. I got some of the code from a previous support ticket you helped someone else with, however it’s not working when the menu item has a drop-down. It jumps all over the place when you are on e.g. on HOmepage and wants to got the services pages and there is an extra line showing up just above the drop-down once you have selected one of the dropdown menu items.

    This is the code I got from the previous support ticket.

    .main-navigation .main-nav ul li[class*=”current-menu-“] a span, .main-navigation .main-nav ul li a:hover span {
    text-decoration: none;
    border-bottom: 3px solid #191f61;
    padding: 0px 0px 5px 0px;

    }

    Can you please help me to correct the jumping effect to disappear and the extra line to not show above the drop-down menu?

    Also, how can I style the drop-down menu? is the width set or can I maybe increase it to be slightly wider to have my menu items on one line each rather. I would also like to include a faint border line in-between the sub-menu items.

    Thank you for your help.

    Kind regards,
    Jhorene

    #594933
    David
    Staff
    Customer Support

    Hi there,

    can you provide a link to the site

    #594934
    Jhorene

    Hi David,

    Sorry, here you go: http://wedemo.co.za/cs/google-adwords/

    Regards,
    Jhorene

    #594949
    David
    Staff
    Customer Support

    Hi Jhorene,

    1. Fix the underline. We can use a direct child combinator, so in your CSS change
    a span to a > span:first-child
    a:hover span to a:hover > span:first-child

    2. Width of sub Menu:

    .main-navigation ul ul {
    	width: 240px;
    }

    3. Bottom border on sub menu items:

    .main-navigation ul ul li {
        border-bottom: 1px solid rgba(255, 255, 255, 0.3);
    }
    #594958
    Jhorene

    Hi David,

    Thank you for the quick reply. No 2 & 3 works great!

    On no 1 I’m not really seeing a difference. See this screenshot: https://snag.gy/L1nxkU.jpg
    If you are on a standard page like Contact for example the menu looks great, but once you hover over Services or select an item in the submenu the spacing goes weird on the services and still shows the little bottom extra underline.

    Regards,
    Jhorene

    #594971
    David
    Staff
    Customer Support

    I updated the changes above, can you try that.

    #594974
    Jhorene

    Hi David,

    THAT WORKED 100% !!!

    Thank you so much for the great support. Really appreciate it.

    Kind regards,
    Jhorene

    #594976
    David
    Staff
    Customer Support

    Glad i could be of help!

    #1225959
    Rickard

    Hello,

    I have a underline when I hover over the menu items using the code below, but how can I make it underline the sub menu items also?

    @media (min-width: 769px) {
        .main-navigation .menu > .menu-item > a::after {
            content: "";
            position: absolute;
            right: 0;
            left: 50%;
            bottom: 12px;
            -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: 80%;
        }
    }
    #1226451
    Leo
    Staff
    Customer Support

    Any chance you can open a new topic for your question and link us to the site?

    Thanks 🙂

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