Solved

Menu bar background colour full width issue

hem0903
Tourist
14 0 2

hem0903_0-1716791355964.png

store url -https://50ef2d-2.myshopify.com/

Hi i used below code to make background white.

div.site-header__nav-standalone {max-width: 100%;
background: white !important;
}

but it is not showing on full width.

Accepted Solutions (2)

BSSCommerce-HDL
Shopify Expert
680 214 229

This is an accepted solution.

Hi @hem0903

Step 1: Go to Shopify Admin -> Online Store ->Theme -> Edit code

Step 2: Search file base.css, theme.css, styles.css or theme.scss.liquid

Step 3: Insert the below code at the bottom of the file -> Save

 

.site-header.logo_above {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

div.site-header__nav-standalone {
  max-width: 100%;
  background: white !important;
  width: 100vw !important;
  margin: 0 !important;
}

 

 

Here is result: 

BSSTechVenture_0-1716792097075.png

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you 😍

If our suggestions are useful, please let us know by giving it a like or marking it as a solution.

For B2B solutions and custom pricing, check out B2B Solution & Custom Pricing |
For adding product labels/badges, visit Product Labels by BSS

BSS Commerce - Shopify Apps & Store Development Service Provider

Hire a Shopify expert | Shopify Plus Store Development

View solution in original post

BSSCommerce-HDL
Shopify Expert
680 214 229

This is an accepted solution.

Hi @hem0903, Pls insert this code to your file css: 

 

.site-header.logo_above {
    padding-bottom: 0 !important;
    transform: translateY(1px) !important;
}

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you 😍

 

If our suggestions are useful, please let us know by giving it a like or marking it as a solution.

For B2B solutions and custom pricing, check out B2B Solution & Custom Pricing |
For adding product labels/badges, visit Product Labels by BSS

BSS Commerce - Shopify Apps & Store Development Service Provider

Hire a Shopify expert | Shopify Plus Store Development

View solution in original post

Replies 3 (3)

BSSCommerce-HDL
Shopify Expert
680 214 229

This is an accepted solution.

Hi @hem0903

Step 1: Go to Shopify Admin -> Online Store ->Theme -> Edit code

Step 2: Search file base.css, theme.css, styles.css or theme.scss.liquid

Step 3: Insert the below code at the bottom of the file -> Save

 

.site-header.logo_above {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

div.site-header__nav-standalone {
  max-width: 100%;
  background: white !important;
  width: 100vw !important;
  margin: 0 !important;
}

 

 

Here is result: 

BSSTechVenture_0-1716792097075.png

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you 😍

If our suggestions are useful, please let us know by giving it a like or marking it as a solution.

For B2B solutions and custom pricing, check out B2B Solution & Custom Pricing |
For adding product labels/badges, visit Product Labels by BSS

BSS Commerce - Shopify Apps & Store Development Service Provider

Hire a Shopify expert | Shopify Plus Store Development

hem0903
Tourist
14 0 2

Thankyou so much it is working, one more little help it is showing little bit orange in bottom, how to make that white as well.

hem0903_0-1716792331766.png

 

BSSCommerce-HDL
Shopify Expert
680 214 229

This is an accepted solution.

Hi @hem0903, Pls insert this code to your file css: 

 

.site-header.logo_above {
    padding-bottom: 0 !important;
    transform: translateY(1px) !important;
}

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you 😍

 

If our suggestions are useful, please let us know by giving it a like or marking it as a solution.

For B2B solutions and custom pricing, check out B2B Solution & Custom Pricing |
For adding product labels/badges, visit Product Labels by BSS

BSS Commerce - Shopify Apps & Store Development Service Provider

Hire a Shopify expert | Shopify Plus Store Development