Archived topic

Current and selected menu items underline

7 replies · Started by Harris on July 15, 2018

Viewing posts 1–8 of 8

July 15, 2018 at 1:37 pm #624368

Hello,

How can I underline the current and selected menu items of the main menu items only (not submenus) and having the line just under the text, with a width of i.e. 50% of the text and aligned on left according to the text?

I am trying this

.main-navigation .main-nav ul li a {
text-decoration: none;
border-bottom: 3px solid #ff8c3d;
padding: 0 30px;
}

but the underline goes at the bottom of the div and as the menu items height is big (in order to center it with the logo) it doesn't look nice.

Additionally how can I give a left and right padding inside to the submenu's div?

Thanks
Harris

July 15, 2018 at 1:43 pm #624372

Worked it out a bit further with

.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: 50%;
border-bottom: 6px solid #ff8c3d;
position: relative;
top: -35px;
opacity: 1;
}

Still can't exclude the submenu items

By the way, is there some way to remove the arrow showing the submenu existance (and don't count it either when counting the underline width)?

July 15, 2018 at 2:17 pm #624386

Worked it out a bit more further

Now I am with

.main-navigation .menu > .menu-item > a::after {
content: "";
position: relative;
top: -35px;
opacity: 1;
display: block;
width: 0;
border-bottom: 6px solid #ff8c3d;

background-color: currentColor;
transition: 0.3s width ease;
}
.main-navigation .menu > .menu-item.current-menu-item > a::after,
.main-navigation .menu > .menu-item > a:hover::after {
width: 50%;
}

It seems not affecting the submenu items and have added a slight animation too.

Please just confirm that this code is ok and please have a look at my previous questions.

Thanks
Harris

July 15, 2018 at 3:07 pm #624412

Hi Harris,

the code looks fine and works well. Looks like you have it working as you want. Code provided here to remove the drop down arrow:

https://generatepress.com/forums/topic/arrow-on-menu-drop-downs/#post-172450

let us know

July 15, 2018 at 10:50 pm #624565

Thanks David for confirming!

Can you please let me know how can I add some padding to the drop down menu "box" (box containing child items).

Thanks
Harris

July 16, 2018 at 4:30 am #624674

You can try this:

.dropdown-hover .main-navigation:not(.toggled) ul li.sfHover>ul, .dropdown-hover .main-navigation:not(.toggled) ul li:hover>ul {
    padding: 10px;
    right: 0;
}

July 16, 2018 at 8:30 am #624925

Thanks!

July 16, 2018 at 10:21 am #625044

Glad to be of help

This archived topic is closed to new replies.

Start building better websites today.