How do I change the menu background to white colour and not the entire header?

[Lishagautam]

Hi, 

I have added a background colour to the whole site, but I want to keep a white background only for the area of the menu section and not the entire header.
THEME- SENSE 

Kindly suggest to me what can I do

[Lishagautam · Accepted solution]

Hi, 

Thank you so much. The above code worked but I want the white background to stretch all the way to the edges. Right now it covers only half the area. Kindly advice. 

[suyash1]

@Lishagautam - can you please share this page link?

[Sweans]

Hi @Lishagautam,

There are two ways to achieve your desired requirement:

Method 1:

1. Go to Shopify Admin Panel

2. Select Online Store

3. In Online Store click the "customize button"

4. In Customize page, select the "header" section.

5. In header section there is a field to add custom css.

6. Add below given CSS style code in the field and save.

.header__inline-menu {
background-color: #ffffff;
width: 100%;
display: flex;
justify-content: center;
}

Method 2:

In this method, you might require some knowledge about the Shopify themes and CSS

1. Go to Shopify Admin Panel

2. Select Online Store

. In Online Store click the "..." and choose “edit code” from the menu.

4. In base.css, you’ll find the following code in line - 2731 (can vary depending on the version of theme and customization done on it)

/* Header menu */
.header__inline-menu {
margin-left: -1.2rem;
grid-area: navigation;
display: none;
}

Change the above code as following:

/* Header menu */
.header__inline-menu {
margin-left: -1.2rem;
grid-area: navigation;
display: none;
background-color: #fffff;
}

5. Just below the updated code, you’ll find the following code: (line - 2743/2744)

@media screen and (min-width: 990px) {
.header__inline-menu {
display: block;
}

.header--top-center .header__inline-menu {
justify-self: center;
}

Update these code into:

@media screen and (min-width: 990px) {
.header__inline-menu {
display: flex;
width: 100%;

}

.header--top-center .header__inline-menu {
justify-content: center;
}

6. Save the file and reload your website, the style will be applied

Note: instead of #ffffff, you can give any color code of your choice.

If you need further assistance, feel free to reach out!
I hope this helps! If it does, please like it and mark it as a solution!

Regards,

Sweans

[Lishagautam · Accepted solution]

Hi, 

Thank you so much. The above code worked but I want the white background to stretch all the way to the edges. Right now it covers only half the area. Kindly advice. 

[Sweans · Accepted solution]

To stretch the white background all the way to the edges you need to edit the code in theme files and update css in base.css file. To make these edits you might need development knowledge in Shopify liquid and css.

You can follow the below mentioned steps to achieve your requirement:

1. Go to Shopify Admin Panel

2. Select Online Store.

3. In Online Store click the "..." and choose “edit code” from the menu.

4. In edit code, Open "header.liquid" in sections directory

5. Make the following change in the header.liquid file:

Find the following code: (line 191)

{%- liquid
      if section.settings.menu != blank
        if section.settings.menu_type_desktop == 'dropdown'
          render 'header-dropdown-menu'
        elsif section.settings.menu_type_desktop != 'drawer'
          render 'header-mega-menu'
        endif
      endif
    %}

Cut the above code from there and paste it in the next line after the following code: (line 308 - add a new line and paste the code)

</header>

Eg:-

</header>
{%- liquid
      if section.settings.menu != blank
        if section.settings.menu_type_desktop == 'dropdown'
          render 'header-dropdown-menu'
        elsif section.settings.menu_type_desktop != 'drawer'
          render 'header-mega-menu'
        endif
      endif
    %}

After making the changes save the file

6. Open the base.css file and make the following changes in there:

Replace the previously updated code with the code given below: (line - 2743/2744):

@media screen and (min-width: 990px) {
  .header__inline-menu {
    display: flex;
    justify-content: center;
    width: 100%;
    margin-left: 0;
  }

After making the changes save the file and reload your website

If you need further assistance, feel free to reach out!

I hope this helps! If it does, please like it and mark it as a solution!

Regards,

Sweans