Archived topic

Sub-navigation/menu styling

5 replies · Started by Oskar on November 25, 2021

Viewing posts 1–6 of 6

November 25, 2021 at 9:12 pm #2022624

I've added a separator line between my submenu items but don't need this line to show for the last submenu item. I tried with last child display none but this didn't work. Also the submenu is overlapping with the main nav a little bit. It disappears tho when you scroll a little. I'd appreciate a little help with this.

November 25, 2021 at 10:32 pm #2022669

Hi Oskar,

On your site's custom CSS, you have this:

.main-navigation .main-nav ul ul li a {
    text-transform: none;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 2px;
    text-align: left;
    border-bottom: 1px solid;
    border-color: #83918b;
    padding-top: 15px;
    padding-bottom: 15px;
}

Replace it with this:

.main-navigation .main-nav ul ul li a{
    text-transform: none; 
    font-size: 12px; 
    font-weight: 500; 
    letter-spacing: 2px; 
    text-align: left; 
    padding-top: 15px; 
    padding-bottom: 15px;
}

.main-navigation .main-nav ul ul li:not(:last-child) a{     
    border-bottom: 1px solid; 
    border-color: #83918b; 
}

As for the submenu overlap, try playing around with the menu item's height on Appearance > Customize > Layout > Primary Navigation

November 25, 2021 at 11:17 pm #2022709

Thank you, that's amazing! It worked for desktop, how do I get the same for the mobile menu?

November 25, 2021 at 11:28 pm #2022720

Try modifying the selector not(:last-child) to not(:last-child,:only-child) so it applies only to submenus with multiple items. :D

November 26, 2021 at 5:40 am #2023319

Thank you! That worked.

November 28, 2021 at 5:05 pm #2028374

No problem. Glad to be of any help. :D

This archived topic is closed to new replies.

Start building better websites today.