Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #538507

    I have a website with a side menu. I’d like the site to switch to the mobile menu when at tablet size. I did see the forum post https://kriesi.at/support/topic/invoke-mobile-menu-at-different-breakpoint/ but the code presented there does not work for a side menu. Can you give me the CSS that will work? Thanks.

    #539606

    Hi,

    Can you post the link to your website please?

    Regards,
    Josue

    #539802

    Link posted in private content. What I am trying to solve is that at a certain screen size, the text in the side bar menu wraps to a second line. I’d like either to not have the text wrap, or for the site to switch to the mobile menu at that break point. Thanks.

    #540012

    Hey!

    Try with this code:

    @media only screen and (max-width: 1000px) {
    		/*header*/
    		.responsive #top .av_header_transparency.av_alternate_logo_active .logo a > img{opacity:1}
    		.responsive #top .av_header_transparency .logo img.alternate{display:none;}
    		
    		.responsive #top #wrap_all #header {position: relative; width:100%; float:none; height:auto; margin:0 !important; opacity: 1;}
    		.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 .phone-info{float:none; width:100%; clear:both; text-align: center;}
    		.responsive .phone-info span{margin:0;padding:0; border:none;}
    		.responsive.html_header_top #header_main .social_bookmarks { right: 50px; width:auto; margin-top:-16px; }
    		
    		.responsive #header_main .inner-container, .responsive .main_menu{position: static;}
    		.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;}
    		
    		
    		.main_menu .avia-menu, #header_main_alternate, .fallback_menu{display:none;}
            .container #advanced_menu_toggle, #advanced_menu_hide{display:block;}
            .responsive.html_mobile_menu_tablet.html_logo_right #advanced_menu_toggle{left:auto;}
    		
    }

    Best regards,
    Josue

    #541163

    That code worked great! Thank you.

    #541297

    You are welcome, glad to help :)

    Regards,
    Josue

Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.