CODEWITHSUNDEEP
twitter-bootstrap
DG-UXD
DG-UXD

Reputation: 41

sidebar nav change to top nav bar in bootstrap

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

Answers (1)

user3931708
user3931708

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

Related Questions