How can I adjust the transparency and hover effect on a website's main menu?

Store Design
1

Hey there. I’ve been developing a site for my client and they want to change the transparency of the main menu on the site. Right now, the menu is transparent but they want to make it a bit darker so the logo and text in the menu are highlighted more. How can I change this and make the menu a bit darker. Also I would love to add a color effect when we hover over the text in the dropdown nav menu. Can someone help me with that also

https://ciklo-centar.myshopify.com/

2

Hi @farispreljevic

I added below 4 different styles of background. Copy the CSS and put aside and try one by one and check which one best suited on header.

Also the last lines of CSS are for menu hover color change and where to put all the CSS lines you know better.

.header-wrapper--sticky {
    background: linear-gradient(180deg,rgba(0,0,0,.9) 0,#0000000a);
}

.header-wrapper--sticky {
    background: linear-gradient(180deg,rgba(0,0,0,.9) 0,#00000024);
}

.header-wrapper--sticky {
    background: linear-gradient(180deg,rgba(0,0,0,.9) 0,#0000004a);
}

.header-wrapper--sticky {
    background: linear-gradient(180deg,rgba(0,0,0,.5) 0,#0000005e);
}
.megamenu .site-nav__dropdown-link:hover {
    background-color: rgba(0, 0, 0, 0.05);
}
3

Thank you so much, this helped me a ton. I just want to move the bottom padding line a bit up, right now its taking more space than I would like. Can you help me with that as well?

4

Hi @farispreljevic

Paste below CSS to solve your issue.

.site-nav.site-navigation .site-nav__link {
	padding: 7.5px 15px 0.5px 15px;
}
5

did it but nothing happens

6

Hi @farispreljevic

Sheesh_b_0-1638986542210.png
Sheesh_b_0-1638986542210.png726×325 170 KB

This line now moved towards menu. Initially there was gap between menu item and this line.
Let me know if I’m thinking about wrong thing.
Better if you can share any picture where you exactly want the CSS.

7

2021-12-08_LI.jpg
2021-12-08_LI.jpg1920×1080 155 KB

id like to move this line a bit up preferably from the green arrow to the blue one

8

Okay, I got it.

Put below CSS and let me know.

@media only screen and (min-width:768px){
.site-header-sticky {
	height: 125px !important;
}
.site-header-sticky .site-header {
	padding: 0;
}
}
9

Works perfectly. Thank you so much.

10

Regarding the hover option on the dropdown menu. can we make the hover option the same as on this site: https://www.specialized.com/ba/en

11

Hi @farispreljevic

Put below CSS to make it like reference website.

.site-nav__link:hover, .megamenu .site-nav__dropdown-link:hover {
	color: #e40505 !important;
}

Note: You can change the color code if you want to change.