BlueOwlCreative » Topic: Menu Underline for current page or current page ancestor?

Menu Underline for current page or current page ancestor?

rgruber — Thu, 13 Oct 2016 21:58:49 +0000

I’d like to have the same underline that happens in the hover state of the menu be there when you are on current page or current page ancestor (for sub menus).

Wondering what the CSS is to make this happen. A simple bottom border goes too wide. I basically want to hook into the same CSS for the :hover state but make it apply to menus with drop downs if you are in that section and stay on in that section.

Reply To: Menu Underline for current page or current page ancestor?

BlueOwl — Mon, 17 Oct 2016 09:08:27 +0000

Ok, try something like this:

.main_menu_underline_effect #menu > ul > li.current-menu-item > a:after,
.main_menu_underline_effect #menu > ul > li.current-menu-parent > a:after {
    width: calc(100% - 30px);
    left: 15px;
    opacity: 1;
}

Reply To: Menu Underline for current page or current page ancestor?

rgruber — Mon, 17 Oct 2016 16:13:06 +0000

It works for a second when page loads and then goes away on menus with drop downs. On menus without drop downs it works perfectly.

Any ideas?

Business Banking Page

Looks like the drop down menu gets drawn over it.

Reply To: Menu Underline for current page or current page ancestor?

BlueOwl — Tue, 18 Oct 2016 07:11:48 +0000

How about this:

.main_menu_underline_effect #menu > ul > li.current-menu-item > a:after,
.main_menu_underline_effect #menu > ul > li.current-menu-parent > a:after {
    width: calc(100% - 30px);
    left: 15px;
    opacity: 1;
    display: block;
}

Reply To: Menu Underline for current page or current page ancestor?

rgruber — Tue, 18 Oct 2016 15:20:28 +0000

Yes, thanks so much. You rock.