Expand menu (with sub-menu) on hover AND on focus - Acme Themes

Expand menu (with sub-menu) on hover AND on focus

Best Premium and Free WordPress Themes › Forums › Education Base Pro › Expand menu (with sub-menu) on hover AND on focus

Tagged: , , , ,

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • March 8, 2018 at 8:48 pm #26518
    Gabriel
    Participant

    The main navigation menu will not expand if there are sub-menu items while using tab key. It will only expand if you use a mouse to hover over.

    Where could I add the :focus fix to allow for tab browsing to expand the menu items with sub-menus? Or, is there another solution (JavaScript?) that may work better?

    Thanks,
    Gabriel
    TCSG.edu

    March 9, 2018 at 5:14 pm #26553
    Acme Themes
    Keymaster

    Hello Gabriel,

    It takes some time to research, sorry for late reply. Please use the following custom CSS

    .main-navigation li:focus > a {
	background: rgba(0,0,0,0);
}

.main-navigation ul li:focus > ul {
	left: auto;
}
.main-navigation ul ul li:focus > ul {
	left: 100%;
}
.main-navigation li:focus-within > a {
	background: rgba(0,0,0,0);
}

.main-navigation ul li:focus-within > ul {
	left: auto;
}
.main-navigation ul ul li:focus-within > ul {
	left: 100%;
}

    Let us know if this works!

    Best Regards!
    Acme Themes

    March 9, 2018 at 7:06 pm #26554
    Gabriel
    Participant

    This works perfect! Thanks for the reply and the code!

    March 10, 2018 at 8:03 am #26574
    Acme Themes
    Keymaster

    You are most welcome!

  • Author
    Posts
Viewing 4 posts - 1 through 4 (of 4 total)
  • The topic ‘Expand menu (with sub-menu) on hover AND on focus’ is closed to new replies.