Change Background Colour On Mobile View Menu (Sense Theme)

Store Design
, , , , ,
1

Hi,

I am using the Sense theme. In the mobile view the menu Bar is showing as transparent. I would appreciate some help in having a solid colour behind it, without affecting the desktop view.

There is a screenshot of how it currently looks below;

Printatme_0-1699441676828.png
Printatme_0-1699441676828.png276×547 178 KB

I want the mobile menu to look something like the below

Printatme_1-1699441930246.png
Printatme_1-1699441930246.png350×657 2.77 KB

My website is as below;

https://printreality.co.uk/

Send me a message in private if you need the password.

Thank you.

2

Hey @Printatme

Please share your website password as well

3

Hi,

identify the class or ID of the mobile menu bar and add custom CSS

Example of CSS code

/* Replace '.your-mobile-menu-class' with the actual class or ID of your mobile menu bar */
@media screen and (max-width: 767px) {
  .your-mobile-menu-class {
    background-color: #your-color-code; /* Change 'your-color-code' to the desired background color */
  }
}
4

Hey @Moeed I have sent you a private message with the password to help find a solution.

5

Hey @Printatme

Follow these Steps:

  1. Go to Online Store

  2. Edit Code

  3. Find theme.liquid file

  4. Add the following code in the bottom of the file above tag

RESULT:

Moeed_0-1699445637129.png
Moeed_0-1699445637129.png369×659 37.5 KB

If I managed to help you then, don’t forget to Like it and Mark it as Solution!

Best Regards,
Moeed

1 Like
6

Hi @Small_Task_Help

Thank you for the suggestion. I am not sure how you identify the class or ID of the mobile menu bar. Would you be able to guide me on how to do this please ?

Thank you