Mobile Menu has gone transparent

Hi there,

The CSS code you shared has a missing close ‘}’ bracket.

I have fixed the CSS code and added a few more lines to fix the transparent menu on mobile.

Let us know if this works for you:

ul.products li.product {
  width: 46.411765%;
  float: left;
  margin-right: 5.8823529412%;
}

ul.products li.product:nth-of-type( 2n ) {
  margin-right: 0;
}

@media ( min-width: 768px ) {
  ul.products li.product:nth-of-type( 2n ) {
    margin-right: 5.8823529412%;
  }
}
.home.blog .site-header, .home.page:not(.page-template-template-homepage) .site-header, .home.post-type-archive-product .site-header {
    margin-bottom: .25em;
}
@media screen and (max-width:768px) {
    .site-search {
        display: block !important;
    }
}
@media screen and (max-width: 767px) {
  .storefront-primary-navigation {
        position: absolute;
        top: 40px;
        right: 10px;
    }
    .storefront-primary-navigation .menu-item {
      background-color: #ffffff;
      padding-left: 15px;
    }
    #masthead .site-search {
        padding-top: 20px;
    }
  .storefront-primary-navigation .menu {
      background: #fff;
      padding: 10px;
      box-shadow: 0 0 7px #ccc;
  }
}

Hello @kaushiksomaiya thank you so much, that has sorted the background out. However I now have 2 issues:

The mobile menu is not showing my Main Menu for some reason – do you know why that it?

The desktop site is showing the correct Nav (Main Menu) but the mobile menu is showing a completely different one.

Also, I have 2 white boxes appearing now since changing the CSS – please see attached screenshot here…https://i.ibb.co/3FSnxBh/Hollings-menu-2.jpg

Thanks again.

Update: I had forgotten to choose Handheld menu as Main Menu, so that is now fixed. Just need help with the white boxes which are showing prior to clicking on Menu icon.

Thanks.

Hi there,

In that case, we’ll just need to remove the “padding: 10px;” on the menu. Here is the updated code:

ul.products li.product {
  width: 46.411765%;
  float: left;
  margin-right: 5.8823529412%;
}

ul.products li.product:nth-of-type( 2n ) {
  margin-right: 0;
}

@media ( min-width: 768px ) {
  ul.products li.product:nth-of-type( 2n ) {
    margin-right: 5.8823529412%;
  }
}
.home.blog .site-header, .home.page:not(.page-template-template-homepage) .site-header, .home.post-type-archive-product .site-header {
    margin-bottom: .25em;
}
@media screen and (max-width:768px) {
    .site-search {
        display: block !important;
    }
}
@media screen and (max-width: 767px) {
  .storefront-primary-navigation {
        position: absolute;
        top: 40px;
        right: 10px;
    }
    .storefront-primary-navigation .menu-item {
      background-color: #ffffff;
      padding-left: 15px;
    }
    #masthead .site-search {
        padding-top: 20px;
    }
  .storefront-primary-navigation .menu {
      background: #fff;
      box-shadow: 0 0 7px #ccc;
  }
}

Cheers,
Kaushik S.
Happiness Engineer

Brilliant, thank you for that! That has been a massive help thank you so much.

Hi there @garethrtac,

Happy to hear Kaushik’s code worked for you!

I’ll go ahead and mark this post as resolved for now. If you need any further help here, please let us know. Or, if you need additional help with Storefront, please start a new thread and we’ll be able to help you out there.

Thank you!

Hi, Dont want to hijack this thread, but I’m trying to achive the opposite and looking to making my menu transparent in Storefront Boutique.

Any thoughts?

RT

https://www.jomcallister.co.uk/

Hello @dietredthunder ,

It seems I’ve already addressed your problem on your thread. You will need to use the opacity value along with the background color RGB values:

.boutique-primary-navigation {
    background: rgb(20, 105, 180, .5);
}

Please reply on your own thread so that we can keep the forums clean for all of us ??