-
Posts
-
Hey guys,
I’ve added a big header logo on my client’s request and utilized the custom header height option (163px) to accommodate, but now my main menu is being centered in a DIV that’s 163px high, so the bottom avia-menu-fx is way below the menu. Additionally, I’d like to reposition the menu element so that when the screen is resized, the menu text doesn’t collide with the logo.
What CSS element should I be using in Quick CSS to accomplish this? I’ve tried a few things from snippets I found here as well as screwing around in Chrome, but haven’t found the right combo yet.
Adding a top-margin to nav.main_menu seems to help with the positioning, but I can’t get the div smaller.
Thanks,
Dan
Hey dgackey!
I’m not entirely sure I understand what you are trying to do, but you could try to add some padding to the link elements:
.main_menu ul:first-child>li a { padding-top: 20px !important; }Please paste in Quick CSS under Enfold–>General Styling.
About the menu overlapping; do you want to change the mobile menu breakpoint to avoid this or edit the menu itself?
Please provide us with screenshots highlighting what you are trying to do if I’ve misunderstood.
Best regards,
RikardHey guys,
Sorry it’s taken me a bit to get back onto this. @Rikard, that’s not exactly what I’m looking for. I am already able to move the menu position around, but what I want to do is shrink the menu height itself, because the avia-menu-fx (the colored underscore that denotes the currently selected menu item) displays directly beneath the menu div.
But because I chose a custom logo height of 163px high for my logo, the main menu is also being set to 163px high, which it is actually not, and the avia-menu-fx is being drawn far below the menu.
Check out the composite screenshot I created below for a better explanation:
As you can see, I have no problem moving the menu around, I just want to make it shorter. Or, I suppose, reposition the avia-menu-fx if that’s a more optimal solution?
- You must be logged in to reply to this topic.