How can I extend my menu bar's colour to full screen length?

Shopify Discussion

Topic summary

A Shopify store owner using the “Sense” theme wanted to extend their menu bar’s background color across the full screen width. Initially, the background color only appeared behind the navigation titles rather than spanning the entire width.

Solution provided:

  • Navigate to Shopify admin → Online Store → Themes → Actions → Edit code
  • Locate the CSS file (base.css, style.css, or theme.css) in the Assets folder
  • Add custom CSS targeting the header navigation elements to set max-width to 100%, display to flex, and adjust flex properties

Additional question raised:
The original poster also asked if it’s possible to change a menu title’s background color when selected/active.

Status: Resolved - The CSS solution successfully extended the menu bar to full width, and the poster confirmed it works perfectly.

Summarized with AI on November 13. AI used: claude-sonnet-4-5-20250929.
1

Hello,

I was trying to modify a bit my store’s menu bar. I was able to change its background colour but I can’t get it to take up the entire screen. I think the background colour is only shown below the navigation titles but I would like it to take up the entire length of the screen. The theme is “Sense”. Here is the code I have used:

ul.list-menu.list-menu--inline {
    background-color: #F5EAF4;

Image of my menu:

ejemplo web mi menu.PNG
ejemplo web mi menu.PNG1431×208 23.7 KB

Would it also be possible for the background of a title to be a different colour when it is selected? Example here:

ejemplo web.PNG
ejemplo web.PNG1898×150 11.6 KB

1 Like
2

Hi @HeleBun

Check this one.

From your Shopify admin dashboard, click on “Online Store” and then “Themes”.

Find the theme that you want to edit and click on “Actions” and then “Edit code”.

In the “Assets” folder, click on “base.css, style.css or theme.css” file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:

@media screen and (min-width: 990px){
.header--top-center .header__inline-menu {
    justify-self: unset !important;
}
nav.header__inline-menu {
    max-width: 100%;
    display: flex;
}
ul.list-menu.list-menu--inline {
    flex-grow: 1;
}
}

And Save.

Result:

Made4uoRibe_0-1705784656269.png
Made4uoRibe_0-1705784656269.png1536×478 57.2 KB

Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!

1 Like
3

Thank you!! Now the menu bar looks perfect :grinning_face_with_smiling_eyes:

1 Like