I had to use some custom css to increase the menu item height (not the header height, just the menu), but there’s some space below that creates an odd gap.
Can you look at the page below?
here is the CSS:
/* MENU SPACE ABOVE TEXT */
.boxed .container {
margin-top: 7px;
}
/* MENU HEIGHT BELOW TEXT */
.html_header_top.html_bottom_nav_header .main_menu>div {margin-bottom: 8px;}
/* MENU HOVER BAR POSITION */
.html_header_top .av_bottom_nav_header .main_menu ul:first-child > li a { height: 42px; }
/* keep header info above line and shrink */
.header-scrolled .custom_info {
line-height: 12px;
font-size: 11px;
top: 10px;
}
div#header_main {
padding-bottom: 2px;
}
Hi koala!
Your first line of CSS is causing the problem. Use this instead.
.html_header_top.html_bottom_nav_header .main_menu > div { margin-top: 10px !important; }
Cheers!
Elliott
That fixed the space, but moved the white line to close to the menu item text. It should be equal above and below and position near the hover bar.
Here is the current css:
/* MENU HEIGHT BELOW TEXT */
.html_header_top.html_bottom_nav_header .main_menu > div { margin-top: 10px !important; }
/* MENU HOVER BAR POSITION */
.html_header_top .av_bottom_nav_header .main_menu ul:first-child > li a { height: 42px; }
/* keep header info above line and shrink */
.header-scrolled .custom_info {
line-height: 12px;
font-size: 11px;
top: 10px;
}
div#header_main {
padding-bottom: 2px;
}
Hi!
You’ll need to add this then.
div.avia-menu > ul > li > a {
line-height: 43px !important;
}
div.avia-menu {
height: 43px !important;
}
Best regards,
Elliott