CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
waiting_for_smth
waiting_for_smth

Reputation: 11

Bootstrap: move navbar under the logo bar

Is it possible to move the navbar under the first top bar so i have the bar with the logo first and then the navigation?

Upvotes: 1

Views: 277

Answers (2)

Sasith
Sasith

Reputation: 790

try this by adding to your css

#navbar{ margin-top: 106px;}

 .container-fluid.logo-bar{
    position: fixed;
    top: 0;
    z-index: 99;
    background: #fff;
    left: 0;
    right: 0;
}

and change this image styles

<img src="http://yr-neu.nowcommu.myhostpoint.ch/img/bg_3.png" class="special" style="
    position: absolute;
    top: 0;
    left: 0;
    z-index: 100;
">

Upvotes: 0

Dirk Jan
Dirk Jan

Reputation: 2469

Using JQuery:

HTML Give your navbar an ID, in my example <nav id="navbar" class="navbar navbar-default">

JQUERY

var logoBarHeight = $('.logo-bar').height();

$(document).on('scroll', function() { 
  if($(document).scrollTop() > logoBarHeight){
    $('#navbar').addClass('navbar-fixed-top');
  } else {
    $('#navbar').removeClass('navbar-fixed-top');
  }
});

Upvotes: 1

Related Questions