Header Drop Down Menu Items Are Not Showing Fully In Mobile View!

[Alliance]

Hi guys,

I have got few issues with drop down menu in Mobile View:

1- Drop down menu items are not showing fully as in desktop.

2- Got that white gap at the end of the menu.

3- would like to style the mobile menu to look link the desktop one, here is the code used:

.site-nav__dropdown{
background-color:#000000;

}
.site-nav__dropdown .site-nav__link:hover{
background-color:#d0021b;
}
.site-nav__childlist{
background-color:#000;
}
.site-nav__dropdown–centered{
width:auto !important;
left: auto !important;
}
.site-nav__dropdown {
background-color: rgba(0,0,0,.7) !important;
padding: 5px 2px !important;
}
.site-nav__dropdown–left:not(.site-nav__dropdown–centered) {
left: 0;
margin-top: -17px !important;
}

Thank you

allianceautoproducts.com

[Ujjaval]

@Alliance
put below css into base.css file

nav.mobile-nav-wrapper.medium-up--hide.js-menu--is-open {
    height: auto !important;
    scroll-behavior: smooth;
}

[Alliance]

Thank you so much. Any solution for the other issues?

[Ujjaval]

@Alliance
IF you add more sub menu option . so it will be after that menu . so that empty space will be full fill . btw that’s not empty space it’s mobile nav bar container.

[Alliance]

I got it. Can we do the styling. I focused on desktop a lot.

[Ujjaval]

@Alliance Which kind of styling do uh wanna?

[Alliance]

Like the desktop, this is the code used:

would like to style the mobile menu to look link the desktop one, here is the code used:

.site-nav__dropdown{
background-color:#000000;

}
.site-nav__dropdown .site-nav__link:hover{
background-color:#d0021b;
}
.site-nav__childlist{
background-color:#000;
}
.site-nav__dropdown–centered{
width:auto !important;
left: auto !important;
}
.site-nav__dropdown {
background-color: rgba(0,0,0,.7) !important;
padding: 5px 2px !important;
}
.site-nav__dropdown–left:not(.site-nav__dropdown–centered) {
left: 0;
margin-top: -17px !important;
}

1- Back ground color black transparent.

2- hover tabs.

3- Menu cancel button “x” color: White. And resize to to be even with other menu items.

4- Reduce the padding in drop menu heading.

Thank you

[Ujjaval]

@Alliance We can’t hover in mobile .but we can change background color.
For close button below css code

button.btn--link.site-header__icon.site-header__menu.js-mobile-nav-toggle.mobile-nav--close {
         color: white !important;
         border: solid 1px white !important;
}

[Alliance]

Background color and padding?

[Alliance]

The cancel needs to be resized to be smaller to be aligned with other menu items.

[Ujjaval]

add below css code

button.btn--link.js-toggle-submenu.mobile-nav__link {
    background-color: black !important;
    color: white !important;
}
a.mobile-nav__link.mobile-nav__link--active {
    background-color: black !important;
    color: white !important;
}
a.mobile-nav__link {
    background-color: black !important;
    color: white !important;
}
li.mobile-nav__item.border-bottom {
    background-color: black !important;
}
.mobile-nav__item .icon {
    color: white !important;
}
.mobile-nav__label {
    border-bottom: 1px solid transparent !important;
    color: white !important;
}
nav.mobile-nav-wrapper.medium-up--hide.js-menu--is-open.sub-nav--is-open {
    background-color: black !important;
}
.icon {
  width: 10px !important;
    height: 10px !important;
}
button.btn--link.site-header__icon.site-header__menu.js-mobile-nav-toggle.mobile-nav--close {
    height: 29px !important;
    width: 34px !important;
    padding-top: 0px !important;
}

[Alliance]

The cart icon became very small in all views

Even the search bar icon became very small

[Ujjaval]

@Alliance
so put it in mobile view only by adding media query

@media only screen and (max-width: 600px) {
.icon {
  width: 10px !important;
    height: 10px !important;
}
}

[Alliance]

In mobile view, all very small. Can we make the icons bigger and aligned to the same size of the currancy converter.

[Ujjaval]

@Alliance

@media only screen and (max-width: 600px)
.icon {
     width: 22px!important;
     height: 15px!important; 
}
}

Replace above css with below one

@media only screen and (max-width: 600px)
{
svg.icon.icon-close {
    height: 10px !important;
    width: 13px !important;
}
}

[Alliance]

[Ujjaval]

@Alliance You want more smaller ?

[Alliance]

No. Box must be smaller and the x in the middle of it. Have a look.

[Ujjaval]

@Alliance

width: 25px!important;

Can you add above width in previous css