-
Posts
-
Hi guys I recently updated my theme and it overwrote a change I made that made the header logo shrink less when scrolled.
I added some custom css to reduce the amount the header logo shrinks.
.header_scrolled, .logo, .logo a, .logo a img, #header_main .container {
min-height: 64px !important;
}#top .header-scrolled .main_menu {
margin-top: 10px;
}#top .header-scrolled .avia-menu-fx {
bottom: -10px!important;
}.logo img {
padding-top: 5px;
padding-bottom:5px;
}The problem is now the “avia-menu-fx nav menu current page blue bottom border” doesn’t stay pinned to the bottom of the header when it’s scrolling.
You can see the blue bottom border for the current page in the header nav menu moving instead of staying attached to the bottom of the header when you’re shrinking or enlarging the header by scrolling the page up or down. The issue is happening on all browsers, thanks for the help.
I just noticed another issue, when the header is shrunken and you hover over “more services” the menu is displaying two avia-menu-fx bottom borders. I attached a picture.
Also if my support is expired on this theme purchase I have several other recent enfold purchases, I’m not sure if they’re all tied to this account but I can provide all the details if necessary. Thanks again.
I was able to solve this by increasing the height of the menu section instead of targeting the avia-menu-fx bottom border.
Highly unlikely anyone will have a similar issue but just in case, I was able to solve it using the following code and the code posted above.
.header-scrolled .main_menu .menu > li > a { height: 53px!important; }
- The topic ‘Header Avia-menu-fx (Active menu bottom border) Alignment Issue’ is closed to new replies.