Header menu bar to have a white background

[vibehome]

Hi Shopify friends,

A while ago I wanted to have the banner image merge into the search bar (Like photos attached) but I would like it not to anymore as its not very clear for the search and menu.

Does anyone know how to get it to stop the banner image merging into the top search menu and have a small white background strip so its nice and clear for people to click on the main menu.

[BSSCommerce-HDL]

Hi @vibehome, You mean like this: 

[vibehome]

Hi @BSSCommerce-HDL  Yes that would be great 😁

[BSSCommerce-HDL · Accepted solution]

Hi @vibehome, 

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

Step 2: Search file theme.liquid

Step 3: Insert this code above </head> tag:

<style>
@media screen and (min-width: 750px) {
  section#shopify-section-template--22039144890642__4c378c50-1929-4a39-ba68-9910b92141eb {
     transform: translateY(145px);
  }
}
</style>

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 😍

[vibehome]

Hi I have just done that. Thanks that just what I wanted.

Can the font be changes to black?

Also the collection section has merged in the image? screen shots attached.

[BSSCommerce-HDL]

Hi @vibehome, Pls replace old code to this new code: 

{% if template.name == 'index' %}
<style>
@media screen and (min-width: 750px) {
  section#shopify-section-template--22039144890642__4c378c50-1929-4a39-ba68-9910b92141eb {
        margin-top: 145px;
  }
  sticky-header .header li, sticky-header .header a, sticky-header .header span, sticky-header .header svg, sticky-header .header p {
    filter: none !important;
    color: black !important;
  }
}
</style>
{% endif %}

Here is result:

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  😍

[vibehome]

Thank you so much! Thats excellent!!😁

[BSSCommerce-HDL]

@vibehome, No problem. Glad to help you 😍

[vibehome]

Hey again, the drop down boxes have a clear background. Can we have this drop down box light grey (

colour code D8D8D8 - with black writing which it already it please 

[vibehome]

@BSSCommerce-HDL  for all drop down on website please 

[BSSCommerce-HDL]

Hi @vibehome, 

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

Step 2: Search file theme.liquid

Step 3: Insert this code above </head> tag:

<style>
details[open] .header__submenu {
    background-color: #D8D8D8 !important;
}
</style>

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  😍

[Made4uo-Ribe]

Hi @vibehome 

Do you mean like this? 

You add some over ride code in your theme.liquid. Check this one one if it work. 

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 "theme. Liquid" file. Find the </body> tag and paste the code below before the tag. 

<style>
sticky-header {
    background-color: white !important;
    transition: all 300ms !important;
}
.section-header {
    top: 0px !important;
    margin-bottom: 0 !important;
}
sticky-header li,
sticky-header a,
sticky-header span,
sticky-header svg,
sticky-header p {
    color: black !important;
}
</style>

And Save. 

If this code wont work you need to take out some code on the theme.liquid. 

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

[vibehome]

Hi there, could it be more like this (screen shot attached) we like it to be more plain if possible.