Currently the submenu is permanently displaying. I am trying to create it so when hovering over the submenu appears. This is what I have so far, but I am missing something...
php
<a href="javascript:void(0);" class="site-mobile-menu-icon" onclick="openMenu()"><i class="fas fa-bars"></i></a>
<div class="site-mobile-menu-overlay" onclick="closeMenu()"></div>
<div class="site-mobile-menu-container">
<a href="javascript:void(0);" class="site-mobile-menu-close" onclick="closeMenu()"><i class="fas fa-times"></i></a>
<?php echo do_shortcode('[aws_search_form id="2"]'); ?>
<?php if ( has_nav_menu( 'menu-mobile' ) ) : ?>
<nav id="mobile-menu" class="mobile-menu">
<?php
wp_nav_menu(
array(
'theme_location' => 'menu-mobile',
'menu_class' => 'menu-wrapper',
'container_class' => 'menu-mobile-container',
'items_wrap' => '<ul id="menu-mobile-list" class="%2$s">%3$s</ul>',
'fallback_cb' => false,
)
);
?>
</nav>
<?php endif; ?>
</div>
CSS
/* Header */
.site-header {
width: 100%;
max-width: 100%;
padding: 0;
display: block;
position: fixed;
z-index: 999;
transition: all ease-out 0.3s;
}
.active {
background-color: white;
}
.site-header .container {
/*max-width: var(--section-width-boxed);
padding: calc(100vw * 15/1440) 0;*/
display: flex;
align-items: center;
}
.site-logo .custom-logo {
height: 50px;
}
.primary-navigation .primary-menu-container {
margin-left: 0;
margin-right: 0;
}
.primary-navigation a,
.primary-navigation .sub-menu .menu-item > a {
font-family: var(--font-family-default);
font-weight: 600;
font-size: calc(100vw * 13/1440);
line-height: 1.2;
letter-spacing: 0.22em;
text-transform: uppercase;
padding: calc(100vw * 5/1440) calc(100vw * 10/1440);
transition: color 0.1s ease-in-out;
}
.primary-navigation a:hover,
.primary-navigation a:focus {
text-decoration: none;
color: #F99DC5;
transition: color 0.3s ease-in-out;
}
.primary-navigation > div > .menu-wrapper > li > .sub-menu {
min-width: calc(100vw * 180/1440);
position: absolute;
padding-top: 0;
border: none;
box-shadow: 0px 3px 5px -2px rgb(0 0 0 / 50%);
}
.primary-navigation > div > .menu-wrapper > li > .sub-menu li {
background: white;
}
.primary-navigation > div > .menu-wrapper .sub-menu-toggle,
.primary-navigation > div > .menu-wrapper > li > .sub-menu:before,
.primary-navigation > div > .menu-wrapper > li > .sub-menu:after {
display: none;
}
Mobile CSS
/* Mobile Menu */
.site-mobile-menu a {
display: inline-block;
color: black;
padding-left: var(--primary-nav--padding);
padding-right: var(--primary-nav--padding);
transition: color 0.3s ease-in-out;
}
.site-mobile-menu a:hover,
.site-mobile-menu a:focus {
text-decoration: none;
color: #F99DC5;
transition: color 0.3s ease-in-out;
}
#mobile-menu {
margin-bottom: 55px;
}
#site-mobile-menu ul {
list-style: none;
font-size: 18px;
}
#site-mobile-menu ul li a {
text-decoration: none;
text-transform: lowercase;
font-size: 14px;
margin-bottom: 10px;
background-color: #FFE0F2;
padding: 15px 5px 15px 55px;
width: 100%;
display: block;
background-size: auto 100%;
background-repeat: no-repeat;
}
#site-mobile-menu ul li.sale a {
background-image: url('https://www.lacefronts.com.au/staging/wp-content/uploads/2022/11/sale-icon.jpg');
font-weight: 700;
color: #cc1e1e;
}
#site-mobile-menu ul li.humanhair a {
;
}
#site-mobile-menu ul li.pony a {
;
}
#site-mobile-menu ul li.synthetic a {
;
}
#site-mobile-menu ul li.glue a {
;
}
#site-mobile-menu ul li.care a {
;
}
#site-mobile-menu ul li.bundles a {
;
}
#site-mobile-menu ul li.tutorials a {
;
}
#site-mobile-menu ul li.toppers a {
;
}
#site-mobile-menu ul li.faq a {
;
}
#site-mobile-menu ul li.contact a {
;
}
#site-mobile-menu ul li.blogs a {
;
}
#site-mobile-menu ul li.build a {
;
}
#site-mobile-menu ul li.shipping a {
;
}
#site-mobile-menu ul li.matureicon > a {
;
}
#site-mobile-menu ul li.privacy a {
;
}
#site-mobile-menu ul li.accessories > a {
;
/*background-position: -23px;*/
}
#site-mobile-menu ul li.consult > a {
;
}
#site-mobile-menu ul li.wishlist > a {
;
}
#site-mobile-menu ul li.ponytails > a {
;
}
#site-mobile-menu ul li.bookappoint a {
;
}
#site-mobile-menu ul li.financialassist a {
;
}
#site-mobile-menu ul li.under100 a {
;
}
.main-nav ul li:hover > ul {
display: block;
}
#site-mobile-menu ul li .Help a {
padding-left: 0;
margin-top: 10px;
}
#site-mobile-menu .aws-container {
margin: 15px 0;
}
#site-mobile-menu .aws-container .aws-search-field {
font-family: var(--font-family-default);
font-weight: var(--font-weight-regular);
font-size: 14px;
padding: 10px 20px;
color: black;
border-image-source: var(--color-gradient-green-pink);
border-image-slice: 1;
}
#site-mobile-menu .sub-menu ul li a {
padding-left: 0;
margin-top: 10px;
}
#site-mobile-menu #menu-mobile-list {
padding-left: 0;
}
#ppc-button-minicart {
display: none;
}
@media (min-width: 601px) {
.primary-menu-container {
display: none;
}
#site-mobile-menu ul li a {
font-size: 15px;
}
.site-mobile-menu-container {
min-width: calc(100vw * 450/1900)
}
button.sub-menu-toggle {
display: none;
}
}
@media only screen and (max-width: 600px) {
#site-navigation {
display: none;
}
.site-header {
max-height: 75px;
}
.site-header .container {
display: block;
}
.site-branding {
margin-right: 0;
width: 100%;
text-align: center;
}
.site-branding .site-logo {
position: relative !important;
top: 0 !important;
}
.site-login,
.site-mobile-menu {
float: left;
transform: translate(-20px, -50px);
}
.site-search,
.site-mini-cart {
float: right;
transform: translate(20px, -50px);
}
#site-search-form .aws-container {
width: 100%;
margin-top: 15px;
}
.site-search-form-close {
top: 33px;
right: -18px;
font-size: 18px;
}
.site-mini-cart-container,
.site-mobile-menu-container {
max-width: 85%;
}
#site-search-form .aws-container .aws-search-field {
font-size: 14px;
}
#access ul li:hover > ul {;
display: none;
}
.sub-menu-toggle {
display: none;
}
HTML
<nav id="mobile-menu" class="mobile-menu">
<div class="menu-mobile-container"><ul id="menu-mobile-list" class="menu-wrapper"><li class="wishlist menu-item menu-item-type-post_type menu-item-object-page menu-item-12661"><a href="https://www.lacefronts.com.au/my-wish-list/">My Wish List</a></li>
<li class="bookapp menu-item menu-item-type-custom menu-item-object-custom menu-item-13749"><a href="https://lfa-106993.square.site">Book Appointment</a></li>
<li class="build menu-item menu-item-type-post_type menu-item-object-product menu-item-13296"><a href="https://www.lacefronts.com.au/?post_type=product&p=13039">Build-a-Wig</a></li>
<li class="toppers menu-item menu-item-type-post_type menu-item-object-product menu-item-13379"><a href="https://www.lacefronts.com.au/product/toppers/">Toppers</a></li>
<li class="pony menu-item menu-item-type-post_type menu-item-object-product menu-item-13421"><a href="https://www.lacefronts.com.au/product/ponytails/">Ponytail Wigs</a></li>
<li class="humanhair menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-1881"><a href="https://www.lacefronts.com.au/collection/human-hair-wigs/">Human Hair Wigs</a></li>
<li class="synthetic menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-1882"><a href="https://www.lacefronts.com.au/collection/synthetic-wigs/">Luxe Synthetic Wigs</a></li>
<li class="matureicon menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-12341"><a href="https://www.lacefronts.com.au/collection/mature-styles/">Mature styles</a></li>
<li class="under100 menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-11864"><a href="https://www.lacefronts.com.au/collection/wigs-under-100/">Wigs under $100</a></li>
<li class="bundles menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-3675"><a href="https://www.lacefronts.com.au/collection/bundle-packs/">Bundle packs</a></li>
<li class="glue menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-1885"><a href="https://www.lacefronts.com.au/collection/glues-grips-and-tapes/">Glues, tapes & grips</a></li>
<li class="care menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-has-children menu-item-1884"><a href="https://www.lacefronts.com.au/collection/hair-care-and-accessories/">Hair care & accessories</a><button class="sub-menu-toggle" aria-expanded="false" onclick="twentytwentyoneExpandSubMenu(this)"><span class="icon-plus"><svg class="svg-icon" width="18" height="18" aria-hidden="true" role="img" focusable="false" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M18 11.2h-5.2V6h-1.6v5.2H6v1.6h5.2V18h1.6v-5.2H18z" fill="currentColor"></path></svg></span><span class="icon-minus"><svg class="svg-icon" width="18" height="18" aria-hidden="true" role="img" focusable="false" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M6 11h12v2H6z" fill="currentColor"></path></svg></span><span class="screen-reader-text">Open menu</span></button>
<ul class="sub-menu">
<li class="ponytails menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-5197"><a href="https://www.lacefronts.com.au/collection/fashion-ponytails/">Synthetic Ponytails</a></li>
</ul>
</li>
<li class="tutorials menu-item menu-item-type-post_type menu-item-object-page menu-item-3583"><a href="https://www.lacefronts.com.au/tutorials/">Tutorials</a></li>
<li class="nails menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-1886"><a href="https://www.lacefronts.com.au/collection/press-on-nails/">Nails</a></li>
<li class="help menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-2422"><a href="#">Help</a><button class="sub-menu-toggle" aria-expanded="false" onclick="twentytwentyoneExpandSubMenu(this)"><span class="icon-plus"><svg class="svg-icon" width="18" height="18" aria-hidden="true" role="img" focusable="false" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M18 11.2h-5.2V6h-1.6v5.2H6v1.6h5.2V18h1.6v-5.2H18z" fill="currentColor"></path></svg></span><span class="icon-minus"><svg class="svg-icon" width="18" height="18" aria-hidden="true" role="img" focusable="false" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M6 11h12v2H6z" fill="currentColor"></path></svg></span><span class="screen-reader-text">Open menu</span></button>
<ul class="sub-menu">
<li class="consult menu-item menu-item-type-post_type menu-item-object-page menu-item-12334"><a href="https://www.lacefronts.com.au/consultation/">Consultation</a></li>
<li class="blogs menu-item menu-item-type-post_type menu-item-object-page menu-item-3096"><a href="https://www.lacefronts.com.au/blogs/">Blogs</a></li>
<li class="faq menu-item menu-item-type-post_type menu-item-object-page menu-item-4328"><a href="https://www.lacefronts.com.au/faq/">FAQ</a></li>
<li class="shipping menu-item menu-item-type-post_type menu-item-object-page menu-item-4287"><a href="https://www.lacefronts.com.au/shipping/">Shipping</a></li>
<li class="financialassist menu-item menu-item-type-post_type menu-item-object-page menu-item-12971"><a href="https://www.lacefronts.com.au/financial-assistance-wigs/">Financial Assistance</a></li>
<li class="contact menu-item menu-item-type-post_type menu-item-object-page menu-item-2426"><a href="https://www.lacefronts.com.au/contact/">Contact Us</a></li>
</ul>
</li>
</ul></div>
</nav>
I have tried adding:
#nav-primary :hover ul {left: 0px; top: 71px; background: none;
}
.sub-menu{
display:none;
}
Can anyone see what I am missing or have coded wrong? The goal is to show the submenu items when hovering over the main menu item it is associated with, instead of just being indented.
ul.sub-menu {
display: none;
}
.menu-item-has-children:hover .sub-menu {
display: block;
}
Is this what you are trying to achieve?