Making dropdown menu different color

Shopify Discussion
, , , ,
1

Hello.

As the title says I would want to change the color of my dropdown menu. If you can help me with this, please leave a reply and I will PM you the site URL as I want to stay anonymous. Thank you so much!

1 Like
2

Hi @manoman

What color do you have in mind? If its same on the header, you need to change the text color also.

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:

.nav-dropdown:not([hidden]) {
    background: rgb(var(--header-background));
    color: rgb(var(--header-text-color));
}

And save.

That is same color on the header.

.nav-dropdown:not([hidden]) {
    background: red;
}

If you like another color without changing the text color.

No result. :laughing:

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

1 Like
3

Thanks for the reply. I want to make the box black when you hover over, that is the only change I want, since the rest is white it would look better if the drop down hover box is black, with white text, rest I want the same. Do you have my URL? :slightly_smiling_face:

4

Yeah, I still have. Check the first code that I give.

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

1 Like
5

Did not work for me?

I paste this: .nav-dropdown:not([hidden]) {
background: rgb(var(ā€“header-background));
color: rgb(var(ā€“header-text-color));
}

in bottom of theme.css and nothing happen

6

Maybe if its possible to make it so that all the dropdown menus are on the same line, as you can see ā€˜ā€˜Biverkningar & ƅldā€™ā€™ is under them, can I change that, maybe make it smaller so that they are all on the same line? I might like that more. Thanks!

7

The solution, that I can think for them to have a same line is make your header max-width: 100%;

Iā€™ll sned you the SS by pm. And I add the code here.

store-header.header .container {
    max-width: 100%;
}

And Save. Same instruction.

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

8

Check this one then. Paste on the header > cusmto css on the right side. Also change the color you like.

.nav-dropdown:not([hidden]) {
    background: red !important;
    color: white !important;
}

And Save.

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

9

Check this one for the menu, paste on the same area be careful you dont mess the brackets and signs.

a.header__linklist-link.link--animated {
    font-size: 16px;
    letter-spacing: -1px;
}
[dir="ltr"] .header__linklist-item:not(:last-child) {
    margin-right: 25px;
}

And Save.

1 Like
10

Thank you brother