Reputation: 41
I have a side navbar built in twitter bootstrap, it's working great for mobile but when it gets to desktop size I really want to have a fixed top navbar instead. I have tried adding media queries to hide the sidebar but as I am just getting my head round them I keep getting stuck.
Any suggestion on how I can swap my sidebar for a top navbar once the screen is at tablet size will be most welcome.
here is the code
Thanks
HTML CODE
<div class="container-fluid">
<nav>
<ul class="main-menu">
<li class="text-right"><a href="#" id="nav-close">X</a></li>
<li><a href="#works">WORK</a></li>
<li><a href="about.html">ABOUT</a></li>
<li><a href="#footerwrap">CONTACT</a></li>
</ul>
<ul id="social">
<li><a href="#"><span class="fa fa-github fa-2x" ></span>
<li><a href="#"><span class="fa fa-behance fa-2x"></span>
<li><a href="#"><span class="fa fa-linkedin fa-2x"></span>
</ul>
</nav>
<div class="navbar navbar-inverse navbar-fixed-top">
<img class="logo"src="assets/img/logo2.svg" alt="logo">
<a class= "navbar-brand" href="#" ></a>
<div class="navbar-header pull-right">
<a id="nav-expander" class="nav-expander fixed">
<span class="fa fa-bars fa-2x"></span>
</a>
</div><!-- navbar headerclosed-->
</div><!-- navbar closed-->
</div><!-- container closed-->
CSS CODE
a.nav-expander {
display: block;
color: #576372;
font-size: 20px;
height: 50px;
margin-right: 0;
padding: 1em 1.6em 2em;
position: absolute;
right: 0;
text-decoration: none;
top: 0;
transition: right 0.3s ease-in-out 0s;
-webkit-transition: right 0.3s ease-in-out 0s;
-moz-transition: right 0.3s ease-in-out 0s;
-o-transition: right 0.3s ease-in-out 0s;
}
a.nav-expander.fixed {
position: fixed;
}
.navbar {
height: 100px;
}
nav {
background: #333333;
display: block;
height: 100%;
overflow: auto;
position: fixed;
right: -20em;
font-size: 15px;
top: 0;
width: 10em;
z-index: 2000;
transition: right 0.3s ease-in-out 0s;
-webkit-transition: right 0.3s ease-in-out 0s;
-moz-transition: right 0.3s ease-in-out 0s;
-o-transition: right 0.3s ease-in-out 0s;
}
.nav-expanded nav {
right: 0;
}
#nav-close {
padding-right: 10px;
}
.main-menu {
padding-top: 12px;
text-align: center;
}
.main-menu li {
padding-bottom: 40px;
}
.main-menu li a {
text-decoration: none;
text-align: left;
}
.main-menu li a:hover {
text-decoration: none;
cursor: pointer;
}
#social{
padding-left: 10px;
text-align: center;
}
#social li{
display: inline-block;
padding-right: 5px;
margin-right: 5px;
}
JS
$(document).ready(function(){
//Navigation Menu Slider
$('#nav-expander').on('click',function(e){
e.preventDefault();
$('body').toggleClass('nav-expanded');
});
$('#nav-close').on('click',function(e){
e.preventDefault();
$('body').removeClass('nav-expanded');
});
});
Upvotes: 2
Views: 3542
Reputation:
You don't need any extra css to responsive your design, just follow this Link
Use this classes according to your need like for smartphones use clas="visible-xs"
, then it will show only in smart phones and smaller devices and for desktop, laptops, smart TV's etc, you will add class="visible-sm visible-md visible-lg"
for example
<h1 class="visible-sm visible-md visible-lg"> Heading one </h1>
The above heading will show only on desktop, and larger
<h3 class="visible-xs"> Heading one </h3>
The above heading will show only on small devices..
Upvotes: 1