-
Posts
-
Hi Guys, we would like to change the avia-menu-fx from the line at the bottom to be a ‘pill’ shaped background behind the menu text. We have adjusted the css to try to achieve this but there are several issues, here is the css we changed:
.avia-menu-fx {
position: absolute;
bottom: 35%;
height: 26px;
z-index: -1;
width: 100%;
left: 0px;
border: 2px solid;
border-radius: 10px;
}This works ok except for:
1. The ‘pills’ are slightly too close together so the second menu hover slightly overlaps the current page one.
2. The last menu item text isn’t centred in the background
3. When we go down to a sub-menu then the main menu text disappears (because it is set as the same colour as the background which it needs to be)Is there a way to be able to do this so it all works correctly?
Many Thanks
Hi mrlreynolds!
Thank you for using the theme!
You can add this to create some spacing between the menu items.
.av-main-nav li { margin: 0 5px 0 5px; }Can you please give us a link to the website? We would like to check how it looks.
Cheers!
IsmaelHey!
Add this too:
.html_main_nav_header #top .main_menu .menu>li:last-child>a, .html_bottom_nav_header #top #menu-item-search>a { padding-right: 13px !important; } .av-main-nav > li:hover > a .avia-menu-text, .current-menu-item > a > .avia-menu-text, .av-main-nav > li:hover .current_page_item > a > .avia-menu-text{ color: #473226; }Best regards,
Josue
- The topic ‘Current menu item and hover 'pill' background…’ is closed to new replies.