Archived topic

Menu Underline on Current/Hover and Sytling Dropdown Menu

9 replies · Started by Jhorene on June 8, 2018

Viewing posts 1–10 of 10

June 8, 2018 at 1:06 am #594885

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

June 8, 2018 at 2:22 am #594933

Hi there,

can you provide a link to the site

June 8, 2018 at 2:24 am #594934

Hi David,

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

Regards,
Jhorene

June 8, 2018 at 2:42 am #594949

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

June 8, 2018 at 2:55 am #594958

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

June 8, 2018 at 3:13 am #594971

I updated the changes above, can you try that.

June 8, 2018 at 3:33 am #594974

Hi David,

THAT WORKED 100% !!!

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

Kind regards,
Jhorene

June 8, 2018 at 3:36 am #594976

Glad i could be of help!

April 4, 2020 at 1:59 am #1225959

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

April 4, 2020 at 8:58 am #1226451

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

Thanks :)

This archived topic is closed to new replies.

Start building better websites today.