Making a header show up on mobile device and smaller screen sizes using html/bootstrap
Question
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta name="keywords" content="[%url_info name:'meta_keywords'/%]"/>
<meta name="description" content="[%url_info name:'meta_description'/%]"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0"/>
<meta property="og:image" content="[%if [@config:current_page_type@] eq 'product'%][@config:homeurl@][%asset_url type:'product' id:'[@SKU@]' thumb:'full'/%][%ELSEIF [@config:current_page_type@] eq 'content'%][@config:homeurl@][%ASSET_url type:'content' id:'[@content_id@]' default:'/assets/website_logo.png'%][%/ASSET_url%][%ELSE%][@config:homeurl@]/assets/website_logo.png[%/if%]"/>
<meta property="og:title" content="[%url_info name:'page_title'/%]"/>
<meta property="og:site_name" content="[@config:website_name@]"/>
<meta property="og:type" content="website"/>
<meta property="og:url" content="[@config:homeurl@][@config:canonical_url@]"/>
<meta property="og:description" content="[%url_info name:'meta_description'/%]"/>
[@config:GOOGLE_VERIFICATION_CODE@]
<title>[%url_info name:'page_title'/%]</title>
<link rel="canonical" href="[@config:canonical_url@]"/>
<link rel="shortcut icon" href="[@config:homeurl@]/assets/favicon_logo.png"/>
<link href="https://fonts.googleapis.com/css?family=Quicksand" rel="stylesheet">
<link class="theme-selector" rel="stylesheet" type="text/css" href="[%ntheme_asset%]css/app.css[%/ntheme_asset%]" media="all"/>
<link rel="stylesheet" type="text/css" href="[%ntheme_asset%]css/style.css[%/ntheme_asset%]" media="all"/>
[%cdn_asset html:'1' type:'css' domain:'maxcdn.bootstrapcdn.com' library:'font-awesome' version:'4.4.0'%]css/font-awesome.min.css[%/cdn_asset%]
[%cdn_asset html:'1' type:'css' library:'jquery_ui' version:'1.11.1'%]css/custom-theme/jquery-ui-1.8.18.custom.css[%/cdn_asset%]
[%cdn_asset html:'1' type:'css' library:'fancybox' version:'2.1.5'%]jquery.fancybox.css[%/cdn_asset%]
<!--[if lte IE 8]>
[%cdn_asset html:'1' type:'js' library:'html5shiv' version:'3.7.0'%]html5shiv.js[%/cdn_asset%]
[%cdn_asset html:'1' type:'js' library:'respond.js' version:'1.3.0'%]respond.min.js[%/cdn_asset%]
<![endif]-->
[%tracking_code type:'Declaration'/%]
</head>
<body id="n_[@config:current_page_type@]" class="n_[@CONFIG:TEMPLATELANG@]">
<div class="container wrapper-header">
<div class="row row-padded">
<div class="col-xs-12 col-sm-4 wrapper-logo">
<a href="[@config:homeurl@]" title="[@config:company_name@]">
<img class="logo" src="[@config:imageurl@]/website_logo.png" alt="[@config:company_name@]"/>
</a>
</div>
<div class="col-sm-8 col-xs-12">
<div class="row">
<div class="hidden-xs col-xs-12 text-right">
[%menu id:'web_header'%]
[%param header%]
<ul class="nav nav-pills tmd nav-pills-right">
[%/param%]
[%param *level_1%]
<li class="[%if [@next_level@]%]dropdown dropdown-hover[%/if%]"> <a href="[@url@]" [%if [@next_level@]%]class="dropdown-toggle"[%/if%]>[@name@] [%if [@next_level@]%]<span class="caret"></span>[%/if%]</a>
[%if [@next_level@]%]
<ul class="dropdown-menu">
[@next_level@]
</ul>
[%/if%]
</li>
[%/param%]
[%param *level_2%]
<li class="[%if [@next_level@]%]dropdown dropdown-hover[%/if%]"> <a href="[@url@]" class="nuhover dropdown-toggle">[@name@]</a>
[%if [@next_level@]%]
<ul class="dropdown-menu dropdown-menu-horizontal">
[@next_level@]
</ul>
[%/if%]
</li>
[%/param%]
[%param *level_3%]
<li class="[%if [@next_level@]%]dropdown dropdown-hover[%/if%]"> <a href="[@url@]">[@name@]</a>
[%if [@next_level@]%]
<ul class="dropdown-menu dropdown-menu-horizontal">
[@next_level@]
</ul>
[%/if%]
</li>
[%/param%]
[%param footer%]
</ul>
[%/param%]
[%/menu%]
</div>
</div>
<div class="row">
<div class="col-sm-5 col-sm-offset-1 col-md-3 col-md-offset-3 hidden-xs text-right">
<div class="btn-group nAccountButton">
<a href="" class="btn btn-lg btn-default dropdown-toggle" data-toggle="dropdown">My Account <span class="caret"></span></a>
<ul class="dropdown-menu">
<li class="box" id="neto-dropdown">
<li><a href="[%url page:'account'/%]">Account Home</a></li>
<li><a href="[%url page:'account'/%]#orders">Orders</a></li>
[%if [@config:allow_user_quote@]%]
<li><a href="[%url page:'account'/%]#quotes">Quotes</a></li>
[%/ if%]
<li><a href="[%url page:'account' type:'payrec'/%]">Pay Invoices</a></li>
<li><a href="[%url page:'account' type:'favourites'/%]">Favourites</a></li>
[%if [@config:show_wishlist@]%]
<li><a href="[%url page:'account' type:'wishlist'/%]">Wishlists</a></li>
[%/if%]
<li><a href="[%url page:'account' type:'warranty'/%]">Resolution Centre</a></li>
<li><a href="[%url page:'account' type:'edit_account'/%]">Edit My Details</a></li>
<li><a href="[%url page:'account' type:'edit_address'/%]">Edit My Address Book</a></li>
<li class="divider"></li>
[%if [@user:username@]%]
<li> <a href="[%url page:'account' type:'edit_pwd'/%]"><i class="fa fa-lock"></i> Change My Password</a> </li>
<li> <a href="[%url page:'account' type:'logout'/%]"><i class="fa fa-off"></i> Log Out</a> </li>
[%else%]
<li> <a href="[%url page:'account' type:'login'/%]" title="Login">Login</a> </li>
<li> <a href="[%url page:'account' type:'register'/%]" title="Register">Register</a> </li>
[%/if%]
</li>
</ul>
</div>
</div>
<div class="col-xs-12 col-sm-6 text-right">
<div class="header-search">
<form name="productsearch" method="get" action="/">
<input type="hidden" name="rf" value="kw"/>
<div class="input-group input-group-lg">
<input class="form-control ajax_search" value="[%nohtml%][%filter ID:'keywords'%][%/filter%][%/nohtml%]" id="name_search" autocomplete="off" name="kw" type="text"/>
<span class="input-group-btn">
<button type="submit" value="Search" class="btn btn-default"><i class="fa fa-search"></i></button>
</span>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<ul class="navigation-list list-inline visible-xs nMobileNav">
<li><a href="#" class="nToggleMenu" data-target=".navbar-responsive-collapse"><span class="icon"><i class="fa fa-bars"></i></span><br>
Menu</a></li>
<li><a href="https://www.designerfurnituredirect.com.au/"><span class="icon"><i class="fa fa-home"></i></span><br>
Home</a></li>
<li><a href="[%url page:'checkout' type:'cart'/%]"><span class="icon"><i class="fa fa-shopping-cart"></i></span><br>
Cart (<span rel="a2c_item_count">[%format type:'number' dp:'0'%][%CART id:'total_items'%][%/CART%][%/format%]</span>)</a></li>
<li><a href="/_myacct/"><span class="icon"><i class="fa fa-user"></i></span><br>
Account</a></li>
</ul>
</div>
<div class="navbar-collapse collapse navbar-responsive-collapse">
<ul class="nav navbar-nav">
[%cache type:'cmenu' id:'header-category-menu'%]
[%categorymenu sortby:'sortorder,name' show_empty:'1'%]
[%param *level_1%]
<li class="[%if [@next_level@]%]dropdown dropdown-hover[%/if%]"> <a href="[@url@]" [%if [@next_level@]%]class="dropdown-toggle"[%/if%]>[@name@] [%if [@next_level@]%]<span class="caret"></span>[%/if%]</a>
[%if [@next_level@]%]
<ul class="dropdown-menu">
[@next_level@]
</ul>
[%/if%]
</li>
[%/param%]
[%param *level_2%]
<li class="[%if [@next_level@]%]dropdown dropdown-hover[%/if%]"> <a href="[@url@]" class="nuhover dropdown-toggle">[@name@]</a>
[%if [@next_level@]%]
<ul class="dropdown-menu dropdown-menu-horizontal">
[@next_level@]
</ul>
[%/if%]
</li>
[%/param%]
[%param *level_3%]
<li class="[%if [@next_level@]%]dropdown dropdown-hover[%/if%]"> <a href="[@url@]">[@name@]</a>
[%if [@next_level@]%]
<ul class="dropdown-menu dropdown-menu-horizontal">
[@next_level@]
</ul>
[%/if%]
</li>
[%/param%]
[%/categorymenu%]
[%/cache%]
</ul>
<ul class="nav navbar-nav navbar-right hidden-xs">
<li class="lv1-li navbar-right dropdown dropdown-hover"> <a href="[%url page:'cart'/%]" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-shopping-cart"></i> - (<span rel="a2c_item_count">[%format type:'number' dp:'0'%][%CART id:'total_items'%][%/CART%][%/format%]</span>) <span class="caret"></span></a>
<ul class="dropdown-menu">
<li class="box" id="neto-dropdown">
<div class="body padding" id="cartcontents"></div>
<div class="footer"></div>
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
[%if [@config:current_page_type@] ne 'home' %]
<div id="main-content" role="main" class="container">
<div class="row">
[%/if%]
body {
background-color: #ffffff /*{body|background-color}*/;
background-image: url(/assets/webshop/background.jpg) /*{body|background-image}*/;
color: #222222 /*{body|text-colour}*/;
font-family:'Quicksand', sans-serif;
}
#main-content {
background-color: transparent;
}
#main-content > .row:first-child > .col-xs-12 {
padding-bottom: 50px;
padding-top: 15px;
}
a, a:hover, a:active {
color: #333333 /*{body|link-colour}*/
}
.wrapper-header {
background-color: transparent;
border: medium none;
margin-bottom: 0;
}
.wrapper-header a, .wrapper-header a:hover, .wrapper-header a:active {
color: #1f1f1f /*{header|link-colour}*/
}
.wrapper-header .btn-default {
background-color: rgba(234, 234, 234, 1) /*{header|button-colour}*/;
border-color: rgba(234, 234, 234, 1) /*{header|button-colour}*/;
color: #333333 /*{header|button-text-colour}*/;
}
.header-search .ajax_search {
border-color: rgba(234, 234, 234, 1) /*{header|button-colour}*/;
box-shadow: none;
border-width: 2px;
}
.navbar {
margin-bottom: 0;
background-color: transparent;
border-color: transparent;
}
.navbar.navbar-default {
background-color: /*{header|menu-background-colour}*/;
}
.navbar-default .navbar-nav > li > a, .navbar-default .navbar-nav > li > a:hover,.navigation-list li a:hover,.navbar-default .navbar-nav > li:hover > a,.navigation-list li:hover a, .navigation-list li a {
color: rgba(10, 10, 10, 1) /*{header|menu-colour}*/;
}
@media (max-width: 767px) {
.navbar-nav .dropdown-menu > li > a {
color: rgba(10, 10, 10, 1) /*{header|menu-colour}*/;
}
}
.wrapper-footer {
background-color: rgba(234, 234, 234, 1) /*{footer|background-color}*/;
color: #222222 /*{footer|text-colour}*/;
padding-top:35px;
}
.wrapper-footer a, .wrapper-footer a:hover, .wrapper-footer a:active {
color: #333333 /*{footer|link-colour}*/;
}
.nav > li > a:hover, .nav > li > a:focus {
background:rgba(0, 0, 0, 0.1);
}
.btn-primary {
color: #FFFFFF;
background-color: #3f3926 /*{buttons|primary-colour}*/;
border-color: #3f3926 /*{buttons|primary-colour}*/;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active,
.open > .dropdown-toggle.btn-primary {
color: #FFFFFF;
background-color: #3f3926 /*{buttons|primary-colour}*/;
border-color: #3f3926 /*{buttons|primary-colour}*/;
}
.btn-primary:active,
.btn-primary.active,
.open > .dropdown-toggle.btn-primary {
background-image: none;
}
.btn-primary.disabled,
.btn-primary[disabled],
fieldset[disabled] .btn-primary,
.btn-primary.disabled:hover,
.btn-primary[disabled]:hover,
fieldset[disabled] .btn-primary:hover,
.btn-primary.disabled:focus,
.btn-primary[disabled]:focus,
fieldset[disabled] .btn-primary:focus,
.btn-primary.disabled:active,
.btn-primary[disabled]:active,
fieldset[disabled] .btn-primary:active,
.btn-primary.disabled.active,
.btn-primary[disabled].active,
fieldset[disabled] .btn-primary.active {
background-color: #3f3926 /*{buttons|primary-colour}*/;
border-color: #3f3926 /*{buttons|primary-colour}*/;
}
.btn-success {
color: #ffffff;
background-color: #3f3926 /*{buttons|secondary-colour}*/;
border-color: #3f3926 /*{buttons|secondary-colour}*/;
}
.btn-success:hover,
.btn-success:focus,
.btn-success:active,
.btn-success.active,
.open > .dropdown-toggle.btn-success {
color: #ffffff;
background-color: #3f3926 /*{buttons|secondary-colour}*/;
border-color: #3f3926 /*{buttons|secondary-colour}*/;
}
.btn-success:active,
.btn-success.active,
.open > .dropdown-toggle.btn-success {
background-image: none;
}
.btn-success.disabled,
.btn-success[disabled],
fieldset[disabled] .btn-success,
.btn-success.disabled:hover,
.btn-success[disabled]:hover,
fieldset[disabled] .btn-success:hover,
.btn-success.disabled:focus,
.btn-success[disabled]:focus,
fieldset[disabled] .btn-success:focus,
.btn-success.disabled:active,
.btn-success[disabled]:active,
fieldset[disabled] .btn-success:active,
.btn-success.disabled.active,
.btn-success[disabled].active,
fieldset[disabled] .btn-success.active {
background-color: #3f3926 /*{buttons|secondary-colour}*/;
border-color: #3f3926 /*{buttons|secondary-colour}*/;
}
.tmd{
margin-top:65px;
}
.button_area {
margin-bottom: 38px;
/*margin-left: 24px;*/
padding: 37px 125px 80px;
width: 100%;
}
.button_area h4 {
float: left;
margin-right: 49px;
padding: 16px 0;
width: 28%;
}
.ct-info {
background: #f4f4f4 none repeat scroll 0 0;
border: none;
color: #677373;
padding: 7px;
text-transform: uppercase;
}
@media (max-width: 480px){
.single_responsive{
width:100%;
}
.emain{
width:100%;
}
.button_area h4 {
float: left;
margin-right: 49px;
padding: 16px 0;
width: 100%;
}
.single_catagorey {
margin-bottom: 25px;
padding: 2px 17px 9px;
width: 100%;
}
.n_storefront {
background-color: #ffffff;
background-image:none;
color: #222222;
}
.button_area {
margin-bottom: 38px;
padding: 0px 10px;
width: 100%;
}
}
@media (max-width: 767px){
.single_responsive{
width:33%;
}
.emain {
margin-top: 25px;
width: 50%;
}
.button_area h4 {
float: left;
margin-right: 49px;
padding: 16px 0;
width: 100%;
margin-bottom: 10px;
}
.single_catagorey {
margin-bottom: 0 px;
padding: 2px 17px 9px;
width: 100%;
}
.emain h3 {
font-family: 'Quicksand', sans-serif;
font-size: 17px;
margin: 0;
text-transform: uppercase;
}
}
@media (max-width: 328px){
.button_area {
margin-bottom: 38px;
padding: 37px 0 80px;
width: 100%;
}
.n_storefront {
background-color: #ffffff;
background-image:none;
color: #222222;
}
}
@import "https://fonts.googleapis.com/css?family=Raleway:400,300,500,700,600";
* {
font-family: 'Quicksand', sans-serif;
}
#zip-home .container {
padding-bottom: 30px;
padding-top: 95px;
}
#zip-home {
background: rgba(0, 0, 0, 0) none no-repeat scroll center center / cover ;
color: black;
}
#zip-footer {
}
#zip-home .container {
max-width: 960px;
padding-top: 10px;
}
#zip-home .title {
color: black;
font-size: 54px;
font-weight: 400;
line-height: 1.2;
padding: 10px;
}
#zip-home .sub-title {
color: black;
font-size: 24px;
line-height: 1.4;
padding-bottom: 20px;
padding-top: 10px;
}
#zip-info .message {
font-size: 26px;
font-weight: 800;
line-height: 1.4;
margin-top: 20px;
padding-bottom: 10px;
}
#zip-home .description {
font-size: 16px;
font-weight: 500;
margin-top: 50px;
}
#zip-work .step .title {
font-size: 18px;
font-weight: 300;
}
#zip-work .header {
color: black;
font-size: 36px;
padding: 10px;
}
#zip-pay-container .header-container .header {
color: black;
font-size: 36px;
font-weight: 500;
line-height: 1.1;
padding: 30px;
}
#zip-pay-container {
color: black;
}
#zip-pay-container .button {
background-color: #518ef3;
border: 3px solid #518ef3;
border-radius: 4px;
display: inline-block;
font-size: 24px;
font-weight: 700;
line-height: 1.4;
overflow: hidden;
text-transform: uppercase;
transition: all 1s ease 0s;
width: 380px;
}
#zip-pay-container #accordion .panel {
background-color: transparent;
font-size: 32px;
font-weight: 200;
}
#zip-question h1 {
color: rgb(81, 142, 243);
font-size: 20px;
margin: 0;
}
.item {
float: left;
width: 100%;
}
.icon-check.list-icon {
float: left;
width: 5%;
}
.item span {
float: left;
width: 95%;
}
#zip-footer {
background: rgba(0, 0, 0, 0) url("https://d3k1w8lx8mqizo.cloudfront.net/zipPay/landing-page/images/halfpricebg.png") no-repeat scroll center center;
color: white;
font-weight: 300;
}
#zip-footer .container {
padding-top: 15px;
}
#zip-footer .image-container {
background: rgba(0, 0, 0, 0) url("https://d3k1w8lx8mqizo.cloudfront.net/zipPay/landing-page/images/halfpricebg.png") no-repeat scroll right top;
height: 658px;
max-width: 459px;
}
#zip-footer {
background: rgba(0, 0, 0, 0) none no-repeat scroll center center / cover ;
color: black;
}
#zip-footer .container {
padding-top: 15px;
}
#zip-pay-container a.button {
color: rgb(255, 255, 255) !important;
display: block;
}
div#zip-pay-container a.button:hover, div#zip-pay-container a.button:focus, div#zip-pay-container a.contact:hover, div#zip-pay-container a.contact:focus {
background-color: rgba(0, 0, 0, 0);
color: rgb(81, 142, 243) !important;
text-decoration: none;
}
#zip-pay-container a.contact {
color: blue;
}
#zip-home .zip-logo {
font-size: 18px;
font-weight: 400;
margin-top: 10px;
}
#zip-info .message {
font-size: 28px;
font-weight: 200;
text-align: center;
}
#zip-question .header {
background-color: transparent;
font-size: 36px;
font-weight: 500;
}
#zip-home .sub-title {
font-size: 24px;
font-weight: 500;
line-height: 10px;
padding-top: 50px;
}
#zip-info .container {
font-weight: 200;
padding-bottom: 10px;
}
#zip-question .container {
font-weight: 500;
}
#zip-question .answer {
font-size: 16px;
font-weight: 200;
}
#zip-question .answer-terms {
font-size: 13px;
font-weight: 200;
}
#zip-footer .container {
background-color: white;
font-size: 18px;
font-weight: 500;
max-width: 800px;
padding-bottom: 20px;
}
#zip-footer .button {
margin-left: auto;
margin-right: auto;
}
#zip-footer .title {
color: #000;
font-size: 46px;
font-weight: 600;
line-height: 1.1;
padding-top: 10px;
}
#zip-pay-container .margin-top-medium {
font-size: 24px;
font-weight: 200;
padding-top: 10px;
}
.zip-head {
padding: 40px 0;
text-align: center;
}
#zip-work {
background: transparent none repeat scroll 0 0;
}
.zip-head p {
margin: 0 auto;
max-width: 800px;
}
.zip-head .header-container {
font-size: 36px;
margin-bottom: 20px;
}
.zip-head {
background: rgb(242, 246, 248) none repeat scroll 0 0;
}
#zip-work .step {
padding-bottom: 45px;
}
@media (max-width: 1199px) {
#zip-home .title {
font-size: 50px;
max-width: 960px;
padding-top: 10px;
}
}
@media (max-width: 767px) {
#zip-home .title {
font-size: 46px;
line-height: 1.1;
}
#zip-work .step.line::after {
height: 62px;
left: 8%;
top: 38px;
width: 5px;
}
#zip-pay-container {
font-size: 12px;
}
#zip-home .sub-title {
color: black;
font-size: 24px;
line-height: 1.1;
padding-bottom: 20px;
padding-top: 10px;
}
#zip-pay-container .button {
border: 3px solid #518ef3;
border-radius: 4px;
font-size: 20px;
font-weight: 700;
overflow: hidden;
position: relative;
text-transform: uppercase;
width: 200px;
}
#zip-info .message {
font-size: 18px;
padding-bottom: 10px;
}
#zip-home img, #zip-footer img {
height: 24px;
}
#zip-home .zip-logo {
font-size: 12px;
margin-bottom: 20px;
margin-top: 12px;
}
#zip-home .zip-logo img {
height: 24px;
}
#zip-footer .container {
padding-top: 10px;
}
.zip-head p {
font-size: 15px;
}
#zip-work .step .number {
font-size: 21px;
}
}
@media (max-width: 639px) {
.item {
margin-bottom: 10px;
}
.answer span {
font-size: 14px;
line-height: 20px;
}
#zip-home .title br {
display: none;
}
}
@media (max-width: 480px) {
#zip-pay-container a.button {
width: auto;
}
#zip-info > div {
padding: 0;
}
#zip-pay-container .header-container .header {
color: rgb(0, 0, 0);
font-size: 32px;
}
#zip-home .title {
font-size: 30px;
}
#zip-work .step.line {
padding-bottom: 30px;
}
}
li{
margin:0px;
list-style:none;
padding:0px;
}
ul{
margin:0px;
list-style:none;
padding:0px;
}
.header_area{
width:100%;
background:#fff;
padding:50px 15px;
}
.header{}
.what_area{
width:100%;
background: rgb(242, 246, 248) none repeat scroll 0 0;
padding:50px 15px;
}
.what{}
.works_area{
padding:50px 15px;
background:#fff;
}
.works{}
.question_area{
width:100%;
background: rgb(242, 246, 248) none repeat scroll 0 0;
padding:50px 15px;
}
.question{}
.footer_area{
padding:50px 15px;
background:#fff;
}
.footer{}
.header span{
font-size: 15px;
font-style: italic;
}
.h-txt {
font-size: 50px;
padding-top: 10px;
}
.message {
font-size: 28px;
font-weight: 200;
}
.description {
font-size: 16px;
font-weight: 500;
margin-top: 50px;
}
.b-apply {
background-color: #518ef3;
border: 3px solid #518ef3;
border-radius: 4px;
display: inline-block;
font-size: 24px;
font-weight: 700;
line-height: 1.4;
overflow: hidden;
text-transform: uppercase;
transition: all 1s ease 0s;
width: 380px;
color:#fff;
padding:10px 0;
margin:20px 0;
}
.p-textf{
color: black;
font-size: 36px;
font-weight: 500;
line-height: 1.1;
padding: 30px;
}
.p-textg {
background-color: #60ba60;
border-radius: 50%;
color: white;
font-size: 36px;
font-weight: 400;
height: 62px;
margin: auto;
padding: 11px;
width: 62px;
}
.h-textg {
font-size: 20px;
font-weight: 300;
padding-bottom: 25px;
padding-top: 30px;
}
.licon{
}
.p-col{
font-size: 16px;
font-weight: 200;
font-family: 'Quicksand', sans-serif;
}
.s-col{
color: rgb(81, 142, 243);
font-size: 20px;
margin: 0;
font-family: 'Quicksand', sans-serif;
}
.item{
width:100%;
float:left;
}
.inner_item {
margin-bottom: 20px;
overflow: hidden;
}
.bb-brand{
width:154px;
height:30px;
}
#n_content {
background:none;
}
#n_customer {
background:none;
}
#n_category {
background:none;
}
#n_product {
background:none;
}
#n_ {
background:none;
}
@media (min-width:768px) and (max-width:1024px){
.button_area h4 {
float: left;
margin-right: 49px;
padding: 16px 0;
width: 25%;
}
};
h4{
margin:0px;
}
.productss_area{
width:100%;
}
.single_productss {
width: 18%;
display: inline-block;
margin: 0px 6px 17px;
}
.single_productss img{
width:100%;
}
.single_productss h3{
font-family:'Quicksand', sans-serif;
font-size:17px;
color:#222;
margin-top:10px;
}
I have a website here https://www.designerfurnituredirect.com.au/ as you can the menu shows on bigger screen sizes. But when you reduce the screen size or view it on mobile the menu popup displays nothing. Does anyone know the quick fix for this issue?
1 answers
solution1
0 2017-07-16 02:50:06
because of menu button #
<a href="#" class="nToggleMenu" data-target=".navbar-responsive-collapse">
change # to be javascript:void(0);
<a href="javascript:void(0);" class="nToggleMenu" data-target=".navbar-responsive-collapse">
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
Bootstrap Button Full Width for Smaller Screen Sizes
Making Slider Arrows smaller for mobile device
Text is not showing up when making screen smaller
How do I structure a card header in bootstrap 4 to keep three elements in a row, truncating the text in the middle element for smaller screen sizes?
Show menu button when making screen smaller
Bootstrap 3: Push/pull columns only on smaller screen sizes
Bootstrap navbar toggle button disappears on smaller screen sizes
Bootstrap 3 - show collapsed navigation for all screen sizes
HTML header rows if screen size is smaller
Angular App: bootstrap navbar doesn't show up on small screen sizes
Related Tags