CODEWITHSUNDEEP
htmlcsstwitter-bootstrapresponsive-design
Evolis
Evolis

Reputation: 135

How do i change the Navbar Position when Bootstrap goes responsive

The desktop view of the website got a logo and a navigation under it.
I want the position of the navigation to become above the logo (and also create a little space between the logo and navbar) when it switches to mobile view.

Here is desktop view:

desktop

Mobile view:

mobile

What I want mobile view to be:

how I want mobile

HTML:

    <div class="text-center logo">
        <a href="index.html"><img src="img/brand.png" /></a>
        <span class="brand-headline visible-desktop">
            <p class="title-text">Example</p>
        </span>
    </div>

<!-- =begin navigation !-->
    <nav class="navbar navbar-default" role="navigation">
    <div class="container">
      <!-- Brand and toggle get grouped for better mobile display -->
      <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-target">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <span class="navbar-brand brand" href="#">Brand</span>
      </div>

      <!-- Collect the nav links, forms, and other content for toggling -->
      <div class="collapse navbar-collapse" id="navbar-target">
        <ul class="nav navbar-nav">
          <li class="active"><a href="#">Schuhe</a></li>
          <li><a href="#">Link</a></li>
      </div><!-- /.navbar-collapse -->
      </div>
    </nav>

Upvotes: 1

Views: 18575

Answers (3)

Christina
Christina

Reputation: 34642

Until there's more support for FlexBox the way I do it is to clone it with jQuery. I do it all the time since BS3 menu requires jQuery anyway.

THE DEMO: http://jsbin.com/oVifowe/1/

/* __________________ Mobile Menu __________________*/
 $(document).ready(function() {

 $('.navbar').clone().removeClass('hidden-xs').appendTo('.mobile-menu');

 }); //end

The HTML:

 <div class="mobile-menu visible-xs"><!--MENU CLONES HERE--></div>

 <div class="text-center logo">
    <a href="index.html"><img src="img/brand.png" /></a>
    <span class="brand-headline visible-desktop">
        <p class="title-text">LOGO</p>
    </span>
</div>

<!-- begin navigation !-->
<nav class="navbar navbar-default hidden-xs" role="navigation">
  <!-- Brand and toggle get grouped for better mobile display -->
  <div class="navbar-header">
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-target">
      <span class="sr-only">Toggle navigation</span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </button>
  </div>

  <!-- Collect the nav links, forms, and other content for toggling -->
  <div class="collapse navbar-collapse" id="navbar-target">
    <ul class="nav navbar-nav">
      <li class="active"><a href="#">Schuhe</a></li>
      <li><a href="#">Link</a></li>
  </div><!-- /.navbar-collapse -->
  </div>
</nav>

Upvotes: 7

nikans
nikans

Reputation: 2565

@media(max-width: 767px) {
  .navbar.navbar-default {
     position:fixed; top:0; left:0; z-index:1030;
   }
}

You may also want to add top padding to body or main wrapper on tablets and smaller.

Upvotes: 4

Bart Calixto
Bart Calixto

Reputation: 19725

you can make the position of the navigation fixed top on small devices. Other than that, you may have to switch templates for the different versions because you are changing the order of the html flow.

Upvotes: 1

Related Questions