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.
Is this what you are trying to achieve?