Archived topic
main nav is_stuck
5 replies · Started by Chad Biggs on September 4, 2016
Hello, I am trying to make a sticky menu change when it is activated. I have achieved this by using the .main-navigation.is_stuck rule, but the image logo size will not change with the height in the rule. I am using a .svg image for the sticky navigation logo. When I change the Primary Menu Item Height in customizing > layout > primary navigation >primary menu items, the logo image size changes, but it does not change when I use the height rule below.
nav#site-navigation.main-navigation.is_stuck{
box-shadow: 0 4px 4px -2px rgba(0, 0, 0, 0.2);
height:166px;
padding-top: 120px;
padding-bottom: 20px;
}
-Chad
You need to target the logo itself:
.main-navigation .sticky-logo,
.main-navigation .sticky-logo img {
height: 40px;
}Yes, but the logo stays the same size whether the sticky is activated or not.
This should work:
.main-navigation.is_stuck .sticky-logo,
.main-navigation.is_stuck .sticky-logo img {
height: 40px;
}Got it. Thank you Tom!
-Chad
Awesome! Glad it worked :)
