misalign top menu and problems with submenus on hover

[Ludwig Schuster]

Hi,

two challenges we are facing:

1st
the menu on top is not aligning fading to the very top when you scroll down the site. It is actually not really out-of-the-box, because we wanted submenues and the fading out top menu. We got that via email support:

That option is currently allowed on the Header V1 style. If you want to use it with the Header V3 style,
Since you are using the Agama-Pro-Child theme, insert the agama-pro-child ->framework-> headers folder

and it nearly worked. Only issue is that it is not sliding to the very top when scrolling down.

How can we achieve that wished behavior?

2nd
when you try to click on submenu items on the first menu item ‘museum’ its sometimes hard to be able to click. most off the time the popup menu disappears whilst trying to click the submenu-item. how can we fix that?

thanks a lot in advance,
Ludwig

[Zex]

Hello, Ludwig!

Based on your current configuration, the following codes should help you(insert into Customizing-General-Additionall CSS):

/*top menu sticky*/
.top-nav-wrapper {
    display: none!important;
}
@media screen and (min-width: 993px){
.top-nav-wrapper{
    display: block!important;
    position: fixed!important;
    top: 0!important;
    background-color:rgba(89,89,89,0.91)!important;
    z-index: 999!important;
}
.sticky-header,
.sticky-header-shrink:not(.home){
    margin-bottom: 55px!important;
    top:55px!important;
    background-color:rgba(89,89,89,0.91)!important;
}  
/*top sub-menu fix*/  
   .top-navigation ul.sub-menu li{
    position: relative!important;
    }   
.top-navigation  ul.sub-sub-menu {
    position:absolute!important;
    }       
}
/*Contact form footer fix*/ 
.footer-widgets .sm-form-control{
    width:100%!important;
}
/*Social Icons fix*/ 
.tv-icon{
    color:white!important; 
}
.social-icons.e-mail:before,.fa-e-mail:before{
    content: "\f1fa";
}
.social-icons.telefon:before,.fa-telefon:before{
    content: "\f095"; 
}
.tv-telefon:hover {
    background-color: #dd3333;
}
.tv-e-mail:hover {
    background-color: #6567A5;
}
footer#colophon a.social-icons:hover{
    color: #dd3333!important;
}

Regards

[Ludwig Schuster]

wow, thank you so much. that pearly nailed it!
two more Questions please:

one
it is now under the top menu when I am logged into WordPress, how can that be fixed?
two
If I want to hide the very top menu whilst scrolling down, how to achieve that? what have to to be changed?

thank you so much in advance!
Ludwig

[Zex]

Hello, Ludwig!

To fix both, try to replace your entire custom CSS codes with the following:

@media screen and (min-width: 993px){
.sticky-header-shrink{  
  top:0px!important;
} 
/*top sub-menu fix*/  
   .top-navigation ul.sub-menu li{
    position: relative!important;
    }   
.top-navigation  ul.sub-sub-menu {
    position:absolute!important;
    }       
}
/*Contact form footer fix*/ 
.footer-widgets .sm-form-control{
    width:100%!important;
}
/*Social Icons fix*/ 
.tv-icon{
    color:white!important; 
}
.social-icons.e-mail:before,.fa-e-mail:before{
    content: "\f1fa";
}
.social-icons.telefon:before,.fa-telefon:before{
    content: "\f095"; 
}
.tv-telefon:hover {
    background-color: #dd3333;
}
.tv-e-mail:hover {
    background-color: #6567A5;
}
footer#colophon a.social-icons:hover{
    color: #dd3333!important;
}

Regards

[Author]

Posts