Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #1352466

    Hi,
    I have searched online and in your forum, but I cannot find the right answer. Breaking point on for example a iPad Mini with 768×1024 and actually for all mobile devices.. How do you set the right breaking point? Which width or height do I use?

    I have e.g. found the CSS code:

    @media only screen and (max-width: 1177px) {
    nav.main_menu {
    display: block !important;
    }
    #avia-menu .menu-item {
    display: none;
    }
    .av-burger-menu-main.menu-item-avia-special {
    display: block;
    }
    }

    How do I set the right code for this website: https://zehavi-gallery.com

    Thanks in advance!
    Greetings,
    Arjan

    #1352511

    Hey Arjan,
    Thanks for the link to your site, please try this code in the General Styling ▸ Quick CSS field or in the WordPress ▸ Customize ▸ Additional CSS field:

    @media only screen and (min-width: 767px) and (max-width: 1100px) {
    
    		/*header*/		
    		.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 #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;
    		}
    .html_cart_at_menu.html_header_sidebar #header_main .avia-menu {
        margin-top: 0px;
    }
    .responsive.html_header_sidebar #header .avia-custom-sidebar-widget-area .widget {
      display: none;
    }
    .html_header_sidebar #menu-item-shop.cart_dropdown {
        right: 80px;
        border: none;
        margin-top: 15px;
    }
    .html_header_sidebar #header .container {
    	width: 85%;
    }
    }

    After applying the css, please clear your browser cache and check.

    Best regards,
    Mike

    #1352512

    Hi Mike,

    Thanks!! My goodnes.. A lot of css. I never could have come up with this one. I have appllied it. Looking much better! But maybe still one question? The social icons are now not visible and the Gtranslate flags are not visible. Is it possible to show them in the menu? If not, I put them elsewhere.

    Thanks in advance,
    Greetings,
    Arjan

    #1352513

    Hi Mike,

    A follow-up.. I just did notice: the social icons in the footer are not visible now. Is there a way to solve that one?

    Thanks in advance,
    Greetings,
    Arjan

    #1352516

    Hi,
    Glad to hear, the social icons didn’t show in the mobile header, you are using the sidebar header so if you show them are are not really in a good location, you can test with this css:

    @media only screen and (min-width: 767px) and (max-width: 1100px){
    .responsive.html_header_sidebar #top #header #wrap_all .social_bookmarks {
        display: block;
    }
    }

    The Gtranslate flags happen to show under the header, you can use this css which adjusts the burger menu down a little:

    @media only screen and (min-width: 767px) and (max-width: 1100px){
    .responsive.html_header_sidebar #header .avia-custom-sidebar-widget-area #gtranslate-4 {
        display: block;
        padding: 0;
        border-top-width: 0px;
        text-align: center;
    }
    .responsive #top #wrap_all .main_menu {
        top: 22%;
    }
    }

    When I check I see the social icons in the socket, please check again

    Best regards,
    Mike

Viewing 5 posts - 1 through 5 (of 5 total)
  • You must be logged in to reply to this topic.