Fullwidth submenu placed at the browser window edge? - Support

Hi,

Can you post the link to your website please?

Regards,
Josue

May 28, 2015 at 4:47 pm #451264

This reply has been marked as private.

May 28, 2015 at 9:36 pm #451440

Hey!

Try adding this code to the Quick CSS:

#top .av-submenu-container .container {
    max-width: 100%;
    width: 97%;
}

Cheers!
Josue

May 28, 2015 at 10:14 pm #451452

Perfect! Thank you so much! :-)

May 28, 2015 at 10:16 pm #451454

You are welcome, glad to help :)

Regards,
Josue

June 5, 2015 at 1:11 am #454859

Hi. I’d like to ask something else about the fullwidth submenu, if that’s ok!?
I have a really long submenu and if the screen is not big enough some of the menu items go down… which I don’t particularly like. Could I somehow change that? Maybe a code where I say that any less than ‘x’ size of screen it turns into the mobile version menu?

Thank you.

June 5, 2015 at 1:31 am #454866

Hey!

Try adding this code to the Quick CSS:

@media only screen and (max-width: 989px)
{
	.responsive #top .sticky_placeholder{height:0px;}
	.responsive #top .av-submenu-container{top: auto !important; position: relative !important; height:auto; }
	
	.responsive #top .av-menu-mobile-active {text-align: center; }
	.responsive #top .av-menu-mobile-active .mobile_menu_toggle{display: inline-block;}
	.responsive #top .av-menu-mobile-active .av-subnav-menu{display:none;}
	
	.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;}
	.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: "\25B6"; 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%;}

}

Change 989px as needed. Don’t copy the code from the mail notification but from the forum reply.

Cheers!
Josue

June 5, 2015 at 1:57 am #454877