Shopify themes, liquid, logos, and UX
Hello,
Im having trouble changing the background and text color of my dropdown menu. I want it all black, with white text.
I have attatched a screenshot to helt you understand my issue.
Thank you in advance,
Emil
Solved! Go to the solution
This is an accepted solution.
hello @EmilSinding
please Go to Online Store->Theme->Edit code then go to assets/theme.css ->paste below code at the bottom of the file.
.site-nav__item:hover .site-nav__link, .site-nav__item:hover .site-nav__dropdown-link {
background: transparent !important;
color: #ffffff !important;
}
.site-nav__item .site-nav__dropdown-link {
background: transparent !important;
color: #ffffff !important;
}
.site-nav--has-dropdown .site-nav__link--underline::after {
border-bottom-color: #ffffff;
}
hi @EmilSinding can you please provide store URL so i can give you its solution?
adamocph.com
Pass: Eyy
Add this in bottom of theme.scss.liquid for using DAWN theme put in the bottom of Base.css
.megamenu .site-nav__dropdown-link:not(.site-nav__dropdown-link--top-level) {
background-color: black;
color: white;
}
This white box is still a problem. Can you also help me remove the box around "Shop" and make an underline like shown on picture nr 2?
This is an accepted solution.
hello @EmilSinding
please Go to Online Store->Theme->Edit code then go to assets/theme.css ->paste below code at the bottom of the file.
.site-nav__item:hover .site-nav__link, .site-nav__item:hover .site-nav__dropdown-link {
background: transparent !important;
color: #ffffff !important;
}
.site-nav__item .site-nav__dropdown-link {
background: transparent !important;
color: #ffffff !important;
}
.site-nav--has-dropdown .site-nav__link--underline::after {
border-bottom-color: #ffffff;
}
Hii, @EmilSinding
Paste this code on top of the theme.scss file.
a.site-nav__dropdown-link.site-nav__dropdown-link--top-level {
background-color: black !important;
color: white !important;
}
Thank You.
yes please try thsi code
.site-nav--has-dropdown.is-focused>a,.site-nav--has-dropdown:hover>a{
color: #ffffff !important;
color:var(--colorTextBody) !important;
background-color: #000000;
background-color:var(--colorBody);
}
.site-nav__dropdown a {
background-color: transparent;
color: #fff;
}
thanks for url can you please try this code
1. Go to Online Store->Theme->Edit code
2. Asset->/theme.css ->paste below code at the bottom of the file.
.megamenu .site-nav__dropdown-link:not(.site-nav__dropdown-link--top-level) {
background-color: #ffffff;
color: #000;
}
Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024Digital marketers and app developers have tracked activity in apps and websites for yea...
By Ollie Mar 13, 2024February was an exciting month with Shopify Editions, informative webinars, and more! F...
By JasonH Mar 7, 2024