-
AuthorPosts
-
May 14, 2019 at 6:11 pm #1100718
I have selected to use the burger menu on smartphones and tablets, yet it doesn’t seem to be working. If it is because the screen is 990 pixels then I need to force it to appear on tablets.
Please provide code and placement of code.
May 15, 2019 at 8:05 am #1100883Hey Cheryl,
So you want the burger menu on tablets as well? If so then please try this in Quick CSS:
@media only screen and (max-width: 1024px) { nav.main_menu { display: block !important; } #avia-menu .menu-item { display: none; } .av-burger-menu-main.menu-item-avia-special { display: block; } }
Best regards,
RikardMay 16, 2019 at 8:38 pm #1101574Hi Rickard,
i already tried that. it shows on the left side of the screen under logo. the header layout for mobile only shows on mobile not tablets.
if you want to show mobile menu under the logo on the left then this script will work.Is there a way to show the burger menu on the right side of the screen on tablets?
May 19, 2019 at 3:08 pm #1102289Hi Cherp,
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 (min-width: 768px) 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%; } .temperature { margin-left: 30vw !important; margin-top: -65px; } }
If you need further assistance please let us know.
Best regards,
VictoriaMay 20, 2019 at 10:18 pm #1102611Hi Victoria,
I misunderstood what my developer told me. She said that the shorter version of code worked but , but it created the burger menu on the left and I want it on the right of the header area.
- This reply was modified 5 years, 6 months ago by Victoria.
May 22, 2019 at 8:34 am #1103191Hi Cherp,
https://imgur.com/a/R0sLEAV I am seeing this. DO you need this to be adjusted further?
Credentials did not work for me, please update them if you need more help.
Best regards,
Victoria -
AuthorPosts
- You must be logged in to reply to this topic.