Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #290257

    Hi guys! Is there anyway I can make only the header of my website non-responsive for mobile/tablet users? I want it to stay just like as the desktop version. Only the header (logo, menu, etc.), the rest of the page should be fully responsive.

    Thanks in advance!

    • This topic was modified 9 years, 8 months ago by Kaio Fragoso.
    #290307

    Hey Kaio!

    Open css/layout.css and remove this code (2859-2888):

                    .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 #header {position: relative; }
    		.responsive #main {padding-top:0 !important;}
    		.responsive #main .container_wrap:first-child{ border-top:none; }
    		.responsive.html_header_top.html_logo_center .logo { left: 0%; -webkit-transform: translate(0%, 0); -moz-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 { right: 50px; width:auto; margin-top:-16px; }
    
    		.responsive .main_menu{position: static;}
    		.responsive .logo{position: static; height:80px !important; float:none;}
    		.responsive .mobile_slide_out .logo{float:left;}
    		.responsive .logo a , .responsive .logo img{margin: 0 auto; max-width: 100%; height:80px !important; max-height:80px !important;}
    		.responsive #header_main .container{height:auto !important; }
    		.responsive #top .header_bg { opacity: 1; filter: alpha(opacity=1); }
    		.responsive #top .mobileMenu{margin: 0 0 10px 0; width:100%; padding: 10px 4px;}
    		.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 a{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 #header_main_alternate .mobileMenu{ margin:16px 0;}
    		.responsive.bottom_nav_header.social_header .main_menu>div{height:auto;}
    		.responsive .mobile_slide_out .logo img{margin:0;}

    Best regards,
    Josue

    #290517

    Nice! Worked!

    Just in this same matter, how can I hide the menu button/icon in the mobile version? What I mean is, I am not using a menu for this website, so it is pointless to show that button in the mobile version. Can I hide it?

    #290589

    Hey!

    Try adding this code to the Quick CSS:

    #advanced_menu_toggle {
        display: none !important;
    }

    Cheers! 
    Josue

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