Changing Main Menu Background and Making It Full Width

Store Design
, ,
1

Hi there!

I am trying to change the background menu to black , add divider and I want it to occupy the fully width but I can’t seem to do it.

Store link - https://1bc201-61.myshopify.com/
password: eashal

I wanted to make it something like this -

atomicshinji_1-1732033461102.png

2

Hello @atomicshinji
Navigate to customize > theme settings> custom CSS and paste the below code .

.header__inline-menu {
    background-color: black;
    border-bottom: 2px solid #ffffff;
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0;
}

.header__inline-menu, .header {
    width: 100%;
}
3

Hi @atomicshinji !

You can achieve the menu design changes you want by following these steps:

  1. Access Theme Customization:

    • Go to your Shopify Admin panel.
    • Navigate to Online Store > Themes.
    • Click on the Actions dropdown for your current theme and select Edit Code.

  2. Edit the base.css File:

    • In the left-hand menu, find the base.css file. You can locate it under Assets.

  3. Add the Following Code: Paste the code below at the bottom of your base.css file:

    /* Make menu items take full width / .header__inline-menu { width: 100%; } .list-menu.list-menu–inline { width: 100%; display: flex; justify-content: space-between; } / Make each menu item grow equally / .list-menu–inline > li { flex: 1; text-align: center; } / Keep menu items text centered / .header__menu-item { text-align: center; } / Adjust search input width / .search__input.field__input { padding-right: 9.8rem; width: 120vh !important; } / Set menu background color */ .gradient { background: black !important; }

    • Look for the cart SVG icon in your theme files. You can search for the element in your header or navigation liquid file.

    • Replace the fill attribute with #ffffff or ensure the following code is added to the element:

      Update the SVG Icon:

  5. Save and Preview:

    • Save the changes to the base.css file.
    • Refresh your storefront to check the updated menu styling.

This should give you the desired result, including a black background for the menu, full-width layout, centered text, and a white cart icon. Let me know if you encounter any issues, I’d love to make the changes in your store.

Thanks,
Shubham | Untechnickle

4

Hi there!

This didn’t work, please see screenshot below:

atomicshinji_0-1732039684078.png
atomicshinji_0-1732039684078.png1340×816 223 KB

5

Hi there!

This didn’t work as well, it made my website full black.

atomicshinji_1-1732039791947.png
atomicshinji_1-1732039791947.png1857×258 91.9 KB

I only want to change this part -

atomicshinji_2-1732039838398.png
atomicshinji_2-1732039838398.png1815×929 226 KB

6

Hey @atomicshinji ,

Can you DM the collaborator code, I’ll make the changes in a jiffy. It’s a little tough to explain where to change what.

Looking forward to your response,
Shubham | Untechnickle

1 Like
7

It makes the text black as well. Please use the below code, I make the text color white .

.header__inline-menu {
    background-color: black;
    border-bottom: 2px solid #ffffff;
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0;
    color: white;
}

.header__inline-menu a {
    color: white;
}

.header__inline-menu, .header {
    width: 100%;
}
1 Like
8

Thank you so much for your assistance! I changed my mind and change the overall color.

9

Thank you so much for your replies and assitance!
I changed my mind and change the overall color.

1 Like