CSS Fading Navigation

Support
#1

Hello! I’m trying to put this menu effect — https://www.gordonmac.com/css-fading-navigation/ — on our site. Can someone help me start it off? I can’t seem to identify the CSS tag I need.

Thanks!

#2

Hello Gordon,

Thanks for writing in!

To find the CSS tags you can use Google Chrome Dev tools. Here’s the resource that you can refer to get started:

Thanks.

#3

Hello!

I’ve tested & searched but can’t seem to find the correct tag to apply this effect!

I tried: .x-menu, .x-anchor, .x-nav, even as far as .e7025-7.x-menu.x-anchor.x-anchor-content…still nothing.

Can you help please?

#4

Hey Gordon,

Give your container a class that has the navigation element e.g my-menu and then you can use this class to target the child elements e.g:

.my-menu ul {
background: #ededed;
text-align: center;
padding: 15px 0;
list-style: none;
-webkit-border-bottom-right-radius: 10px;
-webkit-border-bottom-left-radius: 10px;
-moz-border-radius-bottomright: 10px;
-moz-border-radius-bottomleft: 10px;
border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;
}
.my-menu ul:hover li {
opacity: 0.2;
}

So basically the selector #navigation-main will be replaced by .my-menu in the code you’re trying to follow. Here are some related links for further reading, this could help you in finding and implementing some CSS fixes:

Don’t forget to clear all caches including your browser’s cache after adding the code. Let us know how this goes!

#5

So, it works. BUT, it’s applying the effect to the dropdown menu as well, whereas I just want to apply it to the top links. See where we’re at: www.crosstownalliance.com

How can we fix this so that it’s only applied to the top links & not the dropdown?

#6

Hey Gordon,

If you want to apply your CSS to the top links only then you should use the CSS > selector which selects immediate children so the whole CSS will be something like this:

.my-menu > ul {
background: #ededed;
text-align: center;
padding: 15px 0;
list-style: none;
-webkit-border-bottom-right-radius: 10px;
-webkit-border-bottom-left-radius: 10px;
-moz-border-radius-bottomright: 10px;
-moz-border-radius-bottomleft: 10px;
border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;
}
.my-menu > ul:hover > li {
opacity: 0.2;
}
.my-menu > ul > li {
display: inline;
margin: 0 40px 0 0;
text-transform: uppercase;
-webkit-transition-property: opacity;
-webkit-transition-duration: 500ms;
-moz-transition-property: opacity;
-moz-transition-duration: 500ms;
}
.my-menu > ul > li:hover {
opacity: 1;
}
.my-menu > ul > li:last-child {
margin-right: 0 !important;
}
.my-menu > ul > li a {
transition: all 0.5s ease-in-out;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
color: #c3c3c3;
text-decoration: none;
padding: 5px 10px;
background: #fff;
}
.my-menu > ul > li > a:hover, 
.my-menu > ul > li > a:focus, 
.my-menu > ul > li > a:active, 
.my-menu > ul > li.current_page_item a, 
.my-menu > ul > li.current-menu-item a {
background: #786;
color: #fff;
}

To learn more about CSS selectors, please see https://www.w3schools.com/cssref/css_selectors.asp

Hope this helps!

1 Like
#7

SUCCESS! Thank you SO MUCH for your help! You’re so appreciated.

#8

You’re welcome!
Thanks for letting us know that it has worked for you.

#9

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.