Hi smart people I hope you can help.
If I open my nav on mobile it works fine. However when I expand the inner dropdown the nav automatically closes and I need to reopen the nav. I feel I am missing something basic and hope that someone can assist on this.
What I would like to have is that the nav stays open when a user expands the inner dropdown menu
/* Navigation bar style */
.nav {
display: flex !important;
justify-content: center;
text-align: center;
}
.nav-tabs {
list-style: none !important;
background: transparent !important;
border: none !important;
text-align: center;
font-family: Nunito Sans !important;
font-size: 18px !important;
}
.nav .nav-item .nav-link {
background: transparent !important;
border: none !important;
text-align: center;
color: white !important;
}
.nav .nav-item .nav-link.active {
background: transparent !important;
border: none !important;
text-align: center;
color: #00fff2 !important;
}
.nav .nav-item a.nav-link.active:hover {
background: transparent !important;
border: none !important;
text-align: center;
color: #00fff2 !important;
text-decoration: underline !important;
}
.nav .nav-item a.nav-link:focus,
.nav .nav-item a.nav-link:hover {
background: transparent !important;
border: none !important;
text-align: center;
color: #00fff2 !important;
text-decoration: underline !important;
}
.nav .nav-item a.nav-link.active:focus {
background: transparent !important;
border: none !important;
text-align: center;
color: #00fff2 !important;
}
.dropdown-menu {
background: #141414 !important;
border: 1px solid #00fff2 !important;
font-family: Nunito Sans !important;
margin-top: 30px !important;
display: none;
/* Initially hide all dropdown menus */
}
/* Show dropdown menu when parent link is focused */
.dropdown-toggle:focus+.dropdown-item,
.dropdown-toggle:hover+.dropdown-item {
display: block !important;
}
/* Additional CSS for keeping dropdown menu open on mobile when focused */
@media (max-width: 767px) {
.nav-item.dropdown .dropdown-item,
.nav-item.dropdown .dropdown-item a:focus,
.nav-item.dropdown .dropdown-item a:hover {
display: block !important;
}
}
.dropdown-item {
letter-spacing: 0.6px;
line-height: 1em;
text-shadow: 0em 0.1em 0.1em rgba(0, 0, 0, 0.4);
font-size: 18px !important;
color: white !important;
padding-bottom: 15px !important;
padding-top: 5px !important;
}
.dropdown-item i {
display: none !important;
}
.dropdown-item:hover {
background: transparent !important;
border: none !important;
color: #00fff2 !important;
text-decoration: underline !important;
}
.dropdown-item a:hover {
background: transparent !important;
border: none !important;
color: #00fff2 !important;
text-decoration: underline !important;
}
.et-menu a:hover {
background: transparent !important;
border: none !important;
color: #00fff2 !important;
text-decoration: underline !important;
opacity: 1 !important;
}
.et_pb_menu_0_tb_header.et_pb_menu ul li a:hover {
font-family: 'Nunito Sans', Helvetica, Arial, Lucida, sans-serif;
font-size: 17px;
color: #00fff2 !important;
letter-spacing: 0.6px;
line-height: 0.5em;
text-shadow: 0em 0.1em 0.1em rgba(0, 0, 0, 0.4);
}
.nav-content nav.navbar .navbar-nav>.active>a,
nav.navbar .navbar-nav>.active>a:hover,
nav.navbar .navbar-nav>.active>a:focus {
color: #00fff2;
}
.nav-content nav.navbar .navbar-nav>li>a {
color: theme_navigation_text_color;
}
@media (max-width: 767px) {
nav.navbar .navbar-nav .show .dropdown-menu>a {
color: #00fff2 !important;
}
nav.navbar .navbar-nav .show .dropdown-menu>a:hover,
nav.navbar .navbar-nav .show .dropdown-menu>a:focus {
color: #00fff2 !important;
}
}
.nav-content nav.navbar .navbar-nav>li>a:hover {
color: #00fff2 !important;
}
.nav-content nav.navbar .navbar-nav>.open>a,
nav.navbar .navbar-nav>.open>a:hover,
nav.navbar .navbar-nav>.open>a:focus {
color: #00fff2 !important;
}<div class="et_pb_module et_pb_menu et_pb_menu_0_tb_header et_pb_bg_layout_light et_pb_text_align_left et_dropdown_animation_fade et_pb_menu--without-logo et_pb_menu--style-centered">
<div class="et_pb_menu_inner_container clearfix">
<div class="et_pb_menu__wrap">
<div class="et_pb_menu__menu">
<nav class="et-menu-nav">
<ul id="menu-mainmenu" class="et-menu nav">
<li class="et_pb_menu_page_id-home menu-item menu-item-type-custom menu-item-object-custom menu-item-home menu-item-1104"><a href="https://www.hosting.webadventures.co.za/">Home</a></li>
<li class="et_pb_menu_page_id-home menu-item menu-item-type-custom menu-item-object-custom menu-item-home" class="nav-item active dropdown">
<a href="/acc/client/" class="nav-item dropdown-toggle" data-toggle="dropdown">
<i class=""></i> Dashboard </a>
<div class="dropdown-menu">
<a class="dropdown-item dropdown-toggle" href="/acc/client/services/index/"><i
class=""></i>
Services</a>
<a class="dropdown-item dropdown-toggle" href="/acc/plugin/domains/client_main/index/"><i
class=""></i>
Domains</a>
</div>
</li>
<li class="et_pb_menu_page_id-home menu-item menu-item-type-custom menu-item-object-custom menu-item-home" class="nav-item dropdown">
<a href="/acc/plugin/support_manager/client_main/" class="nav-item dropdown-toggle" data-toggle="dropdown">
<i class=""></i> Support </a>
<div class="dropdown-menu">
<a class="dropdown-item dropdown-toggle" href="/acc/plugin/support_manager/client_tickets/"><i
class=""></i>
Tickets</a>
<a class="dropdown-item dropdown-toggle" href="/acc/plugin/support_manager/knowledgebase/"><i
class=""></i>
Knowledge Base</a>
</div>
</li>
<li class="nav-item dropdown et_pb_menu_page_id-home menu-item menu-item-type-custom menu-item-object-custom menu-item-home">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
Frana Test <b class="caret"></b>
</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="/acc/client/main/edit/"><i
class="fas fa-edit fa-fw"></i>
Manage Account</a>
<a class="dropdown-item" href="/acc/client/emails/"><i
class="fas fa-inbox fa-fw"></i>
Email History</a>
<a class="dropdown-item" href="/acc/"><i
class="far fa-circle fa-fw"></i>
Return to Portal</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="/acc/client/logout/"><i
class="fas fa-sign-out-alt fa-fw"></i>
Log Out</a>
</div>
</li>
</ul>
</nav>
</div>
<div class="et_mobile_nav_menu">
<div class="mobile_nav closed">
<span class="mobile_menu_bar"></span>
</div>
</div>