Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
  • #783164


    When using the left or right main menu options, all other header styles become greyed out. because of this I cannot change when the site switched to mobile (990 vs 768). How can I go about easily adjusting when the site changes? Do I need to manually go through and find every css selector and change the media query?

    Thank you,



    Hey haydaw,

    which changes exactly do you want to achieve? Yes, you probably need to work with media queries. Would you mind providing a precise link to your site, showing the elements in question? We need to be able to inspect them in order to help :).

    Best regards,


    Hi Andy,

    I was actually able to pretty easily find the code to add to my custom css. For anyone else looking to increase the size at which enfold switches to enfold, you’ll need to search/replace all the media queries in your css at 767px to your required pixels. After that, you just need to copy this code below and change the media queries to your need, just do a search and replace for “1024”.

    /* == 1024 tablet view fix == */
    @media only screen and (max-width: 1024px) {
    		.responsive .template-archives .tab_inner_content li{width:98%;}
    		.responsive .template-blog .blog-meta,
    		.responsive .post_author_timeline,
    		.responsive #top #main .sidebar {display:none; }
    		.responsive #top #main .sidebar.smartphones_sidebar_active{display:block;text-align: left; border-left: none; border-right: none; border-top-style: dashed; border-top-width: 1px; width: 100%; clear: both;}
    		.responsive #top #main .sidebar.smartphones_sidebar_active .inner_sidebar{margin:0;}
    		.responsive .content .entry-content-wrapper{padding:0;}
    		.responsive .content{border:none;}
    		.responsive .template-blog .post_delimiter { margin: 0 0 30px 0; padding: 30px 0 0 0; }
    		.responsive .big-preview{padding: 0 0 10px 0;}
    		.responsive .related_posts{padding:20px 0;}
    		.responsive .comment_content{padding-right:0; padding-left:0;}
    		.responsive .fullsize div .template-blog .entry-content-wrapper{text-align: left; font-size:14px; line-height: 24px;}
    		.responsive #top .fullsize .template-blog .post .entry-content-wrapper > * { max-width: 100%; }
    		.responsive #top .avia-post-nav { display: none; }
    		.responsive #top .av-related-style-full .no_margin.av_one_half.relThumb{display: block; width:100%; clear:both;}
    		/*all templates*/
    		.responsive .title_container .breadcrumb{position: relative;right:auto; top:-6px; margin:0; left:-2px;}
    		.responsive .pagination{padding-left: 0; padding-right: 0;}
    		.responsive #header .main_menu .social_bookmarks{display:none;}
    		.responsive #top .av-hide-on-mobile, .responsive #top .av-hide-on-tablet{display:none !important;}
    		.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 { 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;}
    		.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;}
    		/*related images*/
    		.responsive #top .related_entries_container .av_one_eighth{width:25%;}
    		.responsive #top .relThumb5{clear:both;}
    		.responsive.html_header_transparency #top .avia-builder-el-0 .container{padding-top:0px;}
    		.responsive.html_header_sidebar #header .avia-custom-sidebar-widget-area{display:none;}
    		.responsive.html_header_sidebar #main{ border: none; }
    		.responsive.js_active #top .avia_combo_widget .top_tab .tab{ border-top: 1px solid; border-bottom:none; width: 100%; }
    		.responsive.js_active #top .avia_combo_widget .news-wrap li{padding:5px;}
    		.tagcloud a{ padding:8px 20px; margin:0 8px 8px 0; }
    		.widget li{line-height: 1.8em; font-size: 15px;}
    		.responsive #scroll-top-link{display: none;} /*iphones etc scroll better by tapping the status bar at the top of the screen*/
    		.responsive #socket .sub_menu_socket{    
    			display: block;
    			float: none;
    			width: 100%;
    			clear: both;
    			margin: 0 0 0 -15px;
    	/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
    	@media only screen and (min-width: 480px) and (max-width: 1024px) {
    		.responsive #top #wrap_all .grid-sort-container.grid-total-odd .grid-entry.grid-loop-1{width:100%;}
    		.responsive #top #wrap_all .grid-sort-container .grid-entry{ width:50%; margin-bottom: 0;}
    		.responsive #top #wrap_all .portfolio-parity-odd{ clear:both; }
    @media only screen and (max-width: 1024px) {
    .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;}
    /* == End 1024 tablet view fix == */
    • This reply was modified 3 years, 11 months ago by  haydaw.


    Thanks for sharing your solution :)



    I am having a similar problem but I am not sure how to use the information provided above. What file do I search for 797px?

    On tablets (iPad in particular) the menu is not switching to mobile and the social icons are covering the logo. How do I make the adjustment?



    You only need to update any custom media queries you personally made. If you did not, you can just copy the above code, paste it into your themes stylesheet/custom css and you can select the pixel size when items change responsiveness. For ipads, 1024 will make websites load mobile on ipad landscape, and 767px is for ipad portrait (landscape will show a standard site and not mobile). Hope that helps!


    Ok. Thanks. I will give it a shot.


    Ok, so the menu is fixed but the social media links are covering the logo. How can I get them to go below the logo in mobile? Thanks!


    Hi @nscalessa,

    Could you post a link to the site in question so that we can take a closer look please?

    Best regards,


    Thanks, haydaw, but when I use your code (and remove any media queries I had pertaining to the header), the burger/mobile menu disappears — are you not having that issue?

    Enfold team, can you provide a solution for switching to the horizontal header for any view less than 1024px wide? I’ve always found the tablet/portrait layouts to be too scrunched/crowded/cramped with the left/right column layout.

    My site is hidden from the public, but I’ve provide credentials in the Private Content field.

    Thanks and let me know if you have any questions.


    Hi sky19er,

    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

    @media only screen and (min-width: 768px) and (max-width: 1024px) {
        .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;}
        #header .avia-custom-sidebar-widget-area {
        .responsive.html_header_sidebar .logo {
          padding: inherit;
        .html_header_sidebar .logo img {
            width: 40%;
            padding: 30px;
        #top #header .av-main-nav > li {
          display: none;
         #top #header .av-main-nav > {
           display: block;
           margin: 60px;
         .html_header_sidebar .main_menu {
           position: absolute;

    If you need further assistance please let us know.

    Best regards,


    Nice, that works! Thanks, Victoria!

Viewing 12 posts - 1 through 12 (of 12 total)

The topic ‘Change when Enfold switches to Mobile while using left main menu.’ is closed to new replies.