Tagged: mobile menu, screen width, side menu
-
AuthorPosts
-
November 18, 2015 at 7:37 pm #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.
November 20, 2015 at 2:21 pm #539606Hi,
Can you post the link to your website please?
Regards,
JosueNovember 20, 2015 at 5:38 pm #539802Link 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.
November 21, 2015 at 12:46 am #540012Hey!
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,
JosueNovember 23, 2015 at 9:08 pm #541163That code worked great! Thank you.
November 24, 2015 at 2:38 am #541297You are welcome, glad to help :)
Regards,
Josue -
AuthorPosts
- You must be logged in to reply to this topic.