Styling menu

[Vemund]

Vemund

July 31, 2014 at 4:21 am

Hi

We are trying to fix two last issues on our page: *Login to see link

1. We want the drop down menu to be just beneath the main menu. So far, this works great when we load the page. But if we scroll down (collapsing the menu) and then back up again, the drop down menu suddenly gets a large top margin. Any way to remove this?

Here is the custom code we added to advanced settings:
.kad-header-style-three #nav-main ul.sf-menu > li > a{
line-height: 50px !important;
}

.sf-dropdown-menu{
margin-top: -60px;
}

2. We have added a search field to the main menu. The search field expands on hover. This works great as long as the page is wide, but when we reduse the page width the search bar has no longer room to expand. How can we get more room in the menu?
Here is the code we have used:

@media (min-width: 992px){
.col-md-4 {
width: 28.33333333% !important;
}

.form-search{
width: 40px !important;
}

.form-search:hover{
width: 170px !important;
}

.col-md-8{
width: 71.66666667% !important;
}

.form-search .search-query{
border-radius: 30px !important;
}

.kad-header-style-three #nav-main ul.sf-menu > li > a{
line-height: 50px !important;
}