Viewing 5 posts - 1 through 5 (of 5 total)
-
Posts
-
I use Enfold with a left menu design. On mobile phones everything works great, but on tablets with 1024px width resolution the responsive design is not working good.
On these tablets the mobile menu is not displayed, but instaed the left menu bar is displayed which looks ugly on tablets.
I like to display the mobile menu view also on tablets; how can I do that? i still like to keep using the left menu design for desktops.
Thank you for your help.
Alwin
Hey Alwin,
Try adding this to quick css:
@media only screen and (max-width: 1024px) { .menu-item { display: none; } .main_menu { display: block !important; } .av-burger-menu-main.menu-item-avia-special { display: block; } }Best regards,
Jordan ShannonHey Jordan,
Thank you, but this does not work. No difference at all. Strange thing is that even on a iPad with 768px width (portrait) the mobile menu is not displayed.
In Enfolds settings I set Menu Items for mobile at 990px. Does not seem to make a different either?I searched a lot on this forum and it seems tat when using the left side menu instead of an “normal” header this is a know issue in the Enfold theme?
There must be some way to use a left menu design and just display the mobile menu only on tablets I hope…?
Regards,
AlwinHi Alwin,
Here is the code you can put in Enfold > General Styling > Quick Css, if it does not work, put into themes/enfold/css/custom.css
/* Header in sidebar to turn to burger on iPad 768px */ @media only screen and (max-width: 990px) { .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; 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 .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 , .responsive.html_top_nav_header #top .social_bookmarks { width:auto; margin-top:-16px; } .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; } .responsive.html_top_nav_header .av-logo-container .inner-container{overflow: visible;} .html_header_sidebar #header .container { width: 90%; } }If you need further assistance please let us know.
Best regards,
Victoria
Viewing 5 posts - 1 through 5 (of 5 total)
- You must be logged in to reply to this topic.