How can I remove the transparent header on desktop?

Retired Boards Appdev Store Design
1

I am trying to make the menu no longer transparent on the desktop! How can I do this?

Website: moroccanplus.com

Screenshot 2024-07-27 at 6.55.32 PM.png
Screenshot 2024-07-27 at 6.55.32 PM.png2918×976 112 KB

1 Like
2
  • Here is the solution for you @omar_ab
  • Please follow these steps:

step.png
step.png1865×854 125 KB

  • Then find the base.css or theme.css file.
  • Then add the following code at the end of the file and press ‘Save’ to save it.
@media (min-width: 991px) {
    .site-header-white.index-header:not(:hover):not(.active) {
        background: #e76565 !important;
    }
}
  • Here is the result you will achieve:

BSSTekLabs_0-1722132397150.png
BSSTekLabs_0-1722132397150.png1886×896 185 KB

  • Please press ‘Like’ and mark it as ‘Solution’ if you find it helpful. Thank you.
3

Hello @omar_ab

You can add code by following these steps

  1. Go to Online Store → Theme → Edit code.

  2. Open your theme.liquid file

  3. Paste the below code before on theme.liquid

.site-header-white.index-header:not(:hover):not(.active) { background: var(--header-background) !important; } #shopify-section-sections--18180441506050__header .js-cart-count{ color: #fff !important; }

techlyser_web_0-1722067070739.png

Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution.