Hi,

Try adding this code in your Quick CSS (located in Enfold > General Styling):

@media only screen and (max-width:990px) and (min-width:768px) {
	.responsive #top #wrap_all .container { width: 85%; max-width: 85%; margin: 0 auto; padding-left:0; padding-right:0; float:none;}

	.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 ,
	.responsive.html_top_nav_header #top .social_bookmarks { right: 50px; width:auto; margin-top:-16px; }

	.responsive .main_menu{display: none;}
	.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 #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;}
	#top #header_main { background:#fff; position: fixed; }
	#top #advanced_menu_toggle { display: block; }
}

Let us know if it works :)

Best regards,
Nikko

• This reply was modified 9 years, 4 months ago by Nikko.

Hi,

I’m not sure if I understood this correctly I am looking for a way to substitute old enfold mobile menu with the burger menu on mobile., I think you want to replace the icon with another icon or an image, if it’s an image try to add this code in Quick CSS (located in Enfold > General Styling):

@media only screen and (max-width: 989px) {
  #top #advanced_menu_toggle {
    background: url('NEW_BURGER_IMAGE') center center no-repeat !important;
  }

  #advanced_menu_toggle:before {
    display: none;
  }
}

Just replace NEW_BURGER_IMAGE with the url of the image/icon you want to change, hope this helps :)

Best regards,
Nikko

Hi,

Yes there is a way to do that unfortunately since the columns you are using is 5 it won’t be even if we use 2-3 columns, the only solution I can give you is make it 1 column, I have added this code in your Quick CSS:

@media only screen and (max-width:1024px) and (min-width:768px) {
  #top .av-flex-cells {
    border: 0;
  }

  #top .av_one_fifth.flex_cell {
    border: 1px solid #eee;
    border-bottom: 0;
    display: block;
    float: none;
    margin: 0 auto;
    width: 90%;
    max-width: 560px;
  }
}

Let us know if the solution is good.

Best regards,
Nikko

Hi!

Try to change the code I gave to this one:

#top #sub_menu1 {
    bottom: 0;
}

#top.page-id-6741 .sticky_placeholder {
    height: 0 !important;
    overflow: hidden;
}

Let us know if it works :)

Cheers!
Nikko

Hey grwebs,

Please try adding this code to the Quick CSS section under Enfold > General Styling or to your child themes style.css file:

Feel free to change the font size value to suit your deisgn :)

#top .av-subnav-menu > li > a {
font-size:18px!important;
}

Best regards,
Vinay

• This reply was modified 9 years, 4 months ago by Vinay.

@cabbo
I checked on mobile, but the very first image is fixed and behaved for me like on desktop. Please clear browser cache and hard refresh a few times or could you fix it already?

Best regards,
Andy

Hi!

I have added this to the Color Section’s Custom Css Class mytable. Then added the code I have posted above, and also included this inside the code I have given:

  #top .mytable .av_one_half .XL br {
    display: none;
  }

To make the Starting in $5,000 be in one line instead of two lines. Let us know if this is also good on your end. :)

Best regards,
Nikko