Tagged: , , , , , , , ,

Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • April 25, 2017 at 10:51 pm #783164
    haydaw

    Hello,

    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,

    Hayden

    April 28, 2017 at 12:56 pm #784508
    Andy

    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,
    Andy

    April 28, 2017 at 7:14 pm #784768
    haydaw

    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) {
		
		
		/*blog*/
		.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;}
		
		
		/*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; 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; }
		
		/*tabs*/
		.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;}
		
		/*widgets*/
		.tagcloud a{ padding:8px 20px; margin:0 8px 8px 0; }
		.widget li{line-height: 1.8em; font-size: 15px;}
		
		/*footer*/
		.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) {

		

		/*portfolio*/
		.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 7 years, 7 months ago by haydaw.
    April 28, 2017 at 7:18 pm #784771
    Yigit

    Hey!

    Thanks for sharing your solution :)

    Regards,
    Yigit

    May 7, 2017 at 10:16 pm #789222
    nscalessa

    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?

    Thanks!

    May 8, 2017 at 2:29 am #789264
    haydaw

    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!

    May 8, 2017 at 3:27 am #789276
    nscalessa

    Ok. Thanks. I will give it a shot.

    May 8, 2017 at 3:34 am #789278
    nscalessa

    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!

    May 8, 2017 at 5:10 am #789301
    Rikard

    Hi @nscalessa,

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

    Best regards,
    Rikard

    May 21, 2018 at 10:40 am #959631
    sky19er

    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.

    May 21, 2018 at 1:40 pm #959751
    Victoria

    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 {
      display:none;
    }
    .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 > li.av-burger-menu-main.menu-item-avia-special {
       display: block;
       margin: 60px;
     }
     .html_header_sidebar .main_menu {
       position: absolute;
     }
}

    If you need further assistance please let us know.

    Best regards,
    Victoria

    May 21, 2018 at 4:54 pm #959854
    sky19er

    Nice, that works! Thanks, Victoria!

  • Author
    Posts
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.