Tagged: CSS, customization, enfold, header, mobile, responsive
Viewing 4 posts - 1 through 4 (of 4 total)
-
AuthorPosts
-
July 11, 2014 at 9:03 pm #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 10 years, 5 months ago by Kaio Fragoso.
July 11, 2014 at 11:39 pm #290307Hey 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,
JosueJuly 12, 2014 at 4:05 pm #290517Nice! 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?
July 12, 2014 at 7:19 pm #290589Hey!
Try adding this code to the Quick CSS:
#advanced_menu_toggle { display: none !important; }
Cheers!
Josue -
AuthorPosts
Viewing 4 posts - 1 through 4 (of 4 total)
- You must be logged in to reply to this topic.