Shopify themes, liquid, logos, and UX
Hi there, I was hoping for my website to look like this green website design below. Specifically, the menu bar and sub menu look where the subheading text are in a different colour.
I would also like my main menu bar to be in colour #99B9BC and text to be in white colour. What kind of code can I add to make menu bar have a background, subheading text to be#99B9BC and in bold font? Other text to be regular font thickness.
I hope I'm not asking too much! I'm truly desperate, I've tried many codes from other forums but have been unsuccessful. website: https://dc78c8-3.myshopify.com/products/first-trip-around-sun-birthday-vinyl-decal
You can hover over menu ^^^
Thank you so so much!
@liemanco I couldn't access your website. You forgot to share the password.
Hi there, here's my pass : ahglia
For some reason, I'm also encountering another issue. When I make my browser smaller, the drawer menu on the left side is no longer popping up. There's also suppose to be a search symbol. Could you please help as well?
Thank you so much for your help and Merry XMAS!
@liemanco it looks like you have multiple issues in your store which need a Shopify expert to solve them for you.
Hi @liemanco I can't be able to look into your store so that I can provide you the exact code.
But you don't need coding for all your needs, some of them you can manage to handle from your theme itself.
There are some themes that use to provide you the option where you can edit the color of your header section and menu section, so my first suggestion will be that you will go in your customize theme option and search there if the above mentioned option is available or not, if not then please provide the storefront password so that I can provide you the code.
Hopefully it will help you. If yes then Please don't forget hit Like and Mark it as solution!
Best Regards
Sahil
- Your
I've just DM you the password. Thank you so so much for your help
Hi @liemanco Thanks for providing the password, please add this code in your base.css file.
ul.list-menu.list-menu--inline {
background-color: #99B9BC;
}
li > a#HeaderMenu-home {color: white;}
span.header__active-menu-item {
font-weight: bold;
color: white;
}
span {
font-weight: bold;
color: white;
}
ul#HeaderMenu-MenuList-2 {background-color: #99B9BC;}
ul#HeaderMenu-MenuList-5 {
background-color: #99B9BC;
}
ul#HeaderMenu-MenuList-5 > a {
color: white;
}
ul#HeaderMenu-MenuList-5 > li > a {
color: white;
}
svg.icon.icon-caret {
color: white;
}
details[open]>.header__menu-item{
text-decoration-color: white;
}
ul#HeaderMenu-SubMenuList-shop-decals-by-category-special-events- {
text-color: white;
}
a#HeaderMenu-shop-decals-by-category-special-events-wedding-decal {
color: white;
}
ul#HeaderMenu-SubMenuList-shop-decals-by-category-special-events- > li > a {
font-weight: bold;
color: white;
}
ul#HeaderMenu-SubMenuList-shop-decals-by-category-business- > li > a {
color: white;
font-weight: bold;
}
ul#HeaderMenu-SubMenuList-shop-decals-by-category-wall-decals- > li > a {
color: white;
font-weight: bold;
}
ul#HeaderMenu-SubMenuList-shop-decals-by-category-holiday-season- > li > a {
color: white;
font-weight: bold;
}
ul#HeaderMenu-SubMenuList-shop-decals-by-category-safety-glass-decal- > li > a {
color: white;
font-weight: bold;
}
If you are not sure where is your base.css file please follow the steps:
Result:
If you will unable to implement the same then I'm happy to do this for you, let me know. I can implement the code changes so that this will work well for you.
Hopefully it will help you. If yes then Please don't forget hit Like and Mark it as solution!
Best Regards
Sahil
- Your
Thank you so so much for your help, is it possible to extend the background colour so that it's the window's width size and not just menu? And the dropdown menu to be white background instead?
I've also just made a change and used a mega menu instead as I wanted to achieve similar look as the inspo image. Hopefully that doesn't mess up your code!
Thank you so much!
We recently spoke with Zopi developers @Zopi about how dropshipping businesses can enha...
By JasonH Oct 23, 2024A big shout out to all of the merchants who participated in our AMA with 2H Media: Holi...
By Jacqui Oct 21, 2024We want to take a moment to celebrate the incredible ways you all engage with the Shopi...
By JasonH Oct 15, 2024