Changing Main Menu Background and Making It Full Width

[atomicshinji]

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 - 

[Rukhsana]

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%;
}

[atomicshinji]

Hi there!

This didn't work, please see  screenshot below:

[Rukhsana]

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%;
}

[atomicshinji]

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

[TheUntechnickle]

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; }
4. • Look for the cart SVG icon in your theme files. You can search for the <svg> element in your header or navigation liquid file.
   • Replace the fill attribute with #ffffff or ensure the following code is added to the <svg> element:

     
     Update the SVG Icon:

   <svg class="icon icon-cart-empty" aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40" fill="#ffffff" style="fill: white;"> <path d="m15.75 11.8h-3.16l-.77 11.6a5 5 0 0 0 4.99 5.34h7.38a5 5 0 0 0 4.99-5.33l-.78-11.61zm0 1h-2.22l-.71 10.67a4 4 0 0 0 3.99 4.27h7.38a4 4 0 0 0 4-4.27l-.72-10.67h-2.22v.63a4.75 4.75 0 1 1 -9.5 0zm8.5 0h-7.5v.63a3.75 3.75 0 1 0 7.5 0z" fill="#ffffff" fill-rule="evenodd"></path> </svg>
   

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

[atomicshinji]

Hi there! 

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

I only want to change this part -

[TheUntechnickle]

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

[atomicshinji · Accepted solution]

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