Mobile Breakpoint for left menu layout - Support | Kriesi.at

Hey Rikard,

The Link to the site is in the private content.

Thanks
Martin

September 10, 2017 at 11:13 pm #850258

Basilis

Hi,

Please take a look here

Invoke mobile menu at different breakpoint

Best regards,
Basilis

September 15, 2017 at 4:47 pm #852598

Hey Basilis
Thanks for your reply. Unfortunately your solution did not work. My site uses the left side menu and the left side menu is also used on tablets in portrait mode. I need the mobile menu to be shown for tablets in portrait mode. Because for example the shop looks really bad this way.

Thanks for your help

September 18, 2017 at 8:52 pm #853569

Basilis

Hi,

How have you changed it, so it can work properly?
What is the code?

Best regards,
Basilis

September 19, 2017 at 2:37 pm #853863

Hey Basilis,

I think you understood me wrong. I have not changed it. I want to change it but I do not now how. That’s why I am asking you.

Thanks for your help .

Regards Martin

September 21, 2017 at 9:01 pm #855046

Basilis

Hi,

In that case, if you do not have the know how, please do consider to hire a freelancer, who will be able to help you out with it.

Thank you

Best regards,
Basilis

September 22, 2017 at 11:01 am #855307

This reply has been marked as private.

September 22, 2017 at 5:35 pm #855452

Victoria

Hi Martin,

Can you give us temporary admin access to your website in the private content box below, so that we can have a closer look? So you want to have a burger menu on the iPad in portrait mode?

Best regards,
Victoria

September 25, 2017 at 9:47 am #856374

Hi Victoria,

Thanks for your help. Please find the login credentials enclosed.
Yes I want the Burger Menu to appear at a break of 990px.

Best regards,
Martin

September 25, 2017 at 4:56 pm #856581

Victoria

Hi Martin,

Below is th e code that I out in your child theme style.css, looks like it did the trick


@media only screen and (min-width: 767px) and (max-width: 990px) {

		/*header*/		
		.responsive #top #wrap_all #header {position: relative; width:100%; float:none; height:auto; margin:0 !important; opacity: 1; min-height:0;}
		.responsive #top #main {padding-top:0 !important; margin:0;}
		.responsive #top #main .container_wrap:first-child{ border-top:none; }
		.responsive.html_header_top.html_logo_center .logo { left: 0%; -webkit-transform: translate(0%, 0); -ms-transform: translate(0%, 0); transform: translate(0%, 0); margin:0; }
		
		
		.responsive #top .logo{position: static; display:table; height:80px !important; float:none; padding:0; border:none; width:80%; }
		.responsive .logo a{display:table-cell; vertical-align: middle;} 
		.responsive .logo img{height:auto !important; width:auto; max-width: 100%; display: block;  max-height: 80px;}
		.responsive #header_main .container{height:auto !important; }
		.responsive #top .header_bg { opacity: 1; filter: alpha(opacity=1); }
		.responsive.social_header .phone-info {text-align: center; float:none; clear:both; margin:0; padding:0;}
		.responsive.social_header .phone-info span{border:none; width:100%; text-align: center; float:none; clear:both; margin:0; padding:0;}
		.responsive #header_meta .social_bookmarks li{ border-style:solid; border-width:1px; margin-bottom:-1px; margin-left:-1px;}
		.responsive #top #header_meta .social_bookmarks li:last-child{border-right-style: solid; border-right-width:  1px;}
		.responsive #header .sub_menu, .responsive #header_meta .sub_menu>ul{float:none; width:100%; text-align: center; margin:0 auto; position: static;}
		.responsive #header .social_bookmarks{padding-bottom:2px; width:100%; text-align: center; height:auto; line-height: 0.8em; margin:0;}
		.responsive #header_meta .sub_menu>ul>li{float:none; display: inline-block; padding: 0 10px;}
		.responsive #header .social_bookmarks li{float:none; display: inline-block;}
		.responsive.bottom_nav_header #header_main .social_bookmarks{ position: relative; top: 0; right: 0; margin: 10px auto; clear:both;}
		.responsive.bottom_nav_header.social_header .main_menu>div{height:auto;}
		.responsive .logo img{margin:0;}
		.responsive.html_header_sidebar #top #header .social_bookmarks{display:none;}
		.responsive body.boxed#top, .responsive.html_boxed.html_header_sticky #top #header{max-width: 100%;}
		
		.responsive.html_header_transparency #top .avia-builder-el-0 .container, .responsive.html_header_transparency #top .avia-builder-el-0 .slideshow_inner_caption{padding-top:0;}
		.responsive #top .av_phone_active_right .phone-info.with_nav span{border:none;}
		
		.responsive #top #wrap_all .av_header_transparency .main_menu ul:first-child > li > a, 
		.responsive #top #wrap_all .av_header_transparency .sub_menu > ul > li > a, 
		.responsive #top .av_header_transparency #header_main_alternate, 
		.responsive .av_header_transparency #header_main .social_bookmarks li a,
		.responsive #top #wrap_all .av_header_transparency .phone-info.with_nav span,
		.responsive #top .av_header_transparency #header_meta, 
		.responsive #top .av_header_transparency #header_meta li,
		.responsive #top #header_meta .social_bookmarks li a{ color:inherit; border-color: inherit; background: inherit;}
		.responsive.html_top_nav_header .av-logo-container{height:auto;}
		.responsive.html_top_nav_header .av-section-bottom-logo{border-bottom-style: solid; border-bottom-width: 1px;}

/*new mobile*/
		.responsive .av-burger-menu-main{display: block;}
		.responsive #top #wrap_all .main_menu{top:0;height:80px;left:auto;right: 0;display: block;position: absolute;}
		.responsive .main_menu ul:first-child > li a { height: 80px; line-height: 80px;}
		.responsive #top .av-main-nav .menu-item{display:none;}
		.responsive #top .av-main-nav .menu-item-avia-special{display:block;}
		.responsive #top #wrap_all .menu-item-search-dropdown > a { font-size: 24px; }
		.responsive #header_main_alternate{display:none;}
		.responsive #top #header .social_bookmarks{display:none;}
		.responsive #top #header .main_menu .social_bookmarks{display:block; position: relative; margin-top: -15px;}
		.responsive #top .av-logo-container .avia-menu{height:100%;}
		.responsive #top .av-logo-container .avia-menu > li > a{line-height: 80px;}
		.responsive #top #main .av-logo-container .main_menu{display:block;}
		.responsive #top #main .av-logo-container .social_bookmarks{display:none;}
		.responsive #top #main .av-logo-container .main_menu .social_bookmarks{display:block; position: relative;}
		.responsive #top #main .av-logo-container .main_menu{display:block;}
		.responsive #top #header_main > .container .main_menu  .av-main-nav > li > a,
		.responsive #top #wrap_all .av-logo-container {height:80px; line-height:80px; }
		.responsive #top #wrap_all .av-logo-container {padding:0;}
		.responsive #top #header_main > .container .main_menu  .av-main-nav > li > a{
			min-width: 0; padding:0 0 0 20px; margin:0; border-style: none; border-width: 0;
		}
		.responsive #top .av_seperator_big_border .avia-menu.av_menu_icon_beside{border-right-style: solid; border-right-width: 1px; padding-right: 25px;}
		.responsive #top #header .av-main-nav > li > a, .responsive #top #header .av-main-nav > li > a:hover{
		background:transparent;
		color: inherit;
		}
.html_cart_at_menu.html_header_sidebar #header_main .avia-menu {
    margin-top: 0px;
}
.responsive.html_header_sidebar #header .avia-custom-sidebar-widget-area .widget {
  display: none;
}
.html_header_sidebar #menu-item-shop.cart_dropdown {
    right: 80px;
    border: none;
    margin-top: 15px;
}
.html_header_sidebar #header .container {
	width: 85%;
}
}

If you need further assistance please let us know.
Best regards,
Victoria

September 25, 2017 at 5:00 pm #856586

Hey Victoria,

Thank you so much. Looks really great.
Just to clarify. The settings for the mobile breakpoint of the menu in the backend does not work when using the left menu, or did I understand something wrong.

Thanks and best regards
Martin

This reply was modified 7 years, 2 months ago by edfaber.

September 26, 2017 at 4:42 pm #857013

Victoria