sticky subnavmenu has space to the top (but shouldn't) - Support

Tagged: sticky, submenu

Viewing 7 posts - 1 through 7 (of 7 total)

Author

Posts

June 26, 2018 at 3:00 pm #977964

nautrino

Participant

Hi,

the submenu should stick at the top of the page in tablet-format. but it doesn’t.
it has a space: element.style top:46px;

1) why that? there is no header.
2) how to fix it?

thanks for your help.
Andros

This topic was modified 6 years, 6 months ago by nautrino.

June 27, 2018 at 2:04 pm #978419

Yigit

Keymaster

Hey nautrino,

This is because you are using sticky header but it is not sticky on mobile and that is causing that white space. Please try adding this code to the Quick CSS section under Enfold > General Styling or to your child theme’s style.css file:

CSS Snippet:


@media only screen and (max-width: 990px) {
.responsive.html_mobile_menu_tablet #top #wrap_all #header {
    position: fixed!important;
}}

We will report the issue to our devs

Best regards,
Yigit

July 2, 2018 at 12:23 pm #980060

nautrino

Participant

thanks – it’s interesting, that it’s working in landscape mode but not in portrait mode.
the code is not helping, but thank you for taking a closer look at this issue in the future.

My solution would be

1 – to make it disappear in that case.
How would I give the submenu only in tablet portrait mode a display:none ?

2 – give it the “smartphone submenu” which is now starting at 767px.
How would I do this starting at 768?

regards,
nautrino

July 4, 2018 at 4:13 am #980889

Mike

Moderator

Hi,
To have the sub-menu extend to 768px, please try this css in the WordPress > Customize > Additional CSS field:

@media only screen and (max-width: 768px)
{
	.responsive #top .sticky_placeholder{max-height:0px; }
	.responsive #top .av-submenu-container{top: auto !important; position: relative !important; height:auto; min-height:0; margin-bottom: -1px;}
	
	.responsive #top .av-menu-mobile-active {text-align: center; }
	.responsive #top .av-menu-mobile-active .mobile_menu_toggle{display: inline-block!important; }
	.responsive #top .av-menu-mobile-active .av-subnav-menu{display:none!important; }
	
	.responsive #top #wrap_all .av-menu-mobile-active.container {width:100%; max-width: 100%;}
	.responsive #top .av-menu-mobile-active .av-open-submenu.av-subnav-menu{display:block!important; }
	.responsive #top .av-subnav-menu > li:first-child{margin-top:-1px;}
	.responsive #top .av-menu-mobile-active .av-subnav-menu  li{display:block; border-top-style: solid; border-top-width: 1px; padding:0;}
	.responsive #top .av-menu-mobile-active .av-subnav-menu > li > a{border-left:none; padding:15px 15%; text-align: left;}
	.responsive #top .av-menu-mobile-active .av-subnav-menu > li a:before{content: "\25BA"; position: absolute; top: 15px; margin-left: -10px; font-family: 'entypo-fontello'; font-size: 7px;}
	.responsive #top .av-menu-mobile-active .av-subnav-menu li > ul{visibility:visible; opacity: 1; top:0; left:0; position: relative; width:100%; border:none;}
	.responsive #top .av-menu-mobile-active.av-submenu-hidden .av-subnav-menu li > ul{display: none;}
	.responsive #top .av-menu-mobile-active.av-submenu-hidden .av-subnav-menu li > ul.av-visible-sublist{display: block;}
	
	.responsive #top .av-menu-mobile-active .av-subnav-menu li > ul a{padding:15px 19%;}
	.responsive #top .av-menu-mobile-active .av-subnav-menu li li > ul a{padding:15px 24%;}
	.responsive #top .av-menu-mobile-active .av-subnav-menu li li li > ul a{padding:15px 29%;}

}

Best regards,
Mike

August 8, 2018 at 2:03 pm #994961

nautrino

Participant

Thanks, Yigit,
it’s keeping the header sticky. But it takes the content up and places it under the header and the subnavigation.

I will let the sub navigation roll out. Thats okay for now.

Thanks.
Nautrino

August 8, 2018 at 2:04 pm #994962

nautrino

Participant

Thanks, but this is not changing anything.
Anyway, I will let the sub menu roll out for now. That’s fine for now.

Beste regards,
Nautrino