How To Add Background Colour For Header Menu Buttons

Store Design
, ,

Topic summary

A user wants to create a full-width horizontal menu bar with a solid background color that changes on hover, similar to a provided example image showing black background with color-changing rollover effects.

Solution Provided:

  • Access Shopify Admin → Online Store → Themes → Actions → Edit Code
  • Locate Asset > base.css file
  • Add custom CSS code at the bottom of the file

Key CSS Features:

  • Creates full-width (100vw) black background for navigation menu
  • Sets white text color for menu items
  • Implements hover effect with yellow background (#fff684) and black text
  • Media query ensures styling applies only on desktop screens (min-width: 992px)
  • Uses viewport calculations to extend menu across entire screen width

The solution includes a screenshot demonstrating the expected result. The issue appears resolved with working code provided.

Summarized with AI on October 29. AI used: claude-sonnet-4-5-20250929.
1

Hi,

I’m trying to edit the menu bar on my website so it acts like this menu bar below:

Menu Background Colour With Rollover Example.jpg

Essentially I’m looking to have a solid horizontal background colour, in this case black, that stretches horizontally all the way across the screen, and when the mouse cursor is hovered over a button it changes to a different solid colour.

Any help here would be greatly appreciated.

Thanks.

2 Likes
2

Hello @ljespec300
Please share your store URL and password (if it’s password-protected),
so that I can check and provide you with the exact solution.

3

I just sent an email with the info, subject line: “Re: How To Add Background Colour For Header Menu Buttons”

Thanks!

1 Like
4

Hello @ljespec300

  1. In your Shopify Admin go to online store > themes > actions > edit code
  2. Find Asset > base.css and paste this at the bottow of the file:
@media (min-width: 992px){
nav.header__inline-menu>.list-menu {
width: 100vw;
position: relative;
margin-left: calc(-50vw - 9px) !important;
left: 50%;
background: black;
margin-bottom: -12px;
}
nav.header__inline-menu>.list-menu summary {
color: white;
}
nav.header__inline-menu>.list-menu .list-menu__item {
color: white;
}
nav.header__inline-menu>.list-menu .list-menu__item:hover {
background: #fff684;
color: black;
}
}

devcoders_0-1743914105992.png
devcoders_0-1743914105992.png1332×172 45.9 KB