CODEWITHSUNDEEP
htmlcsstwitter-bootstrapnavigationgrid
JT1
JT1

Reputation: 97

3 column grid navbar bootstrap

I am trying to create a 3 column grid navbar, I have tried using the columns that are built into bootstrap but have no success.

The first column needs to have a max-width of 100px, but can be fluid if the browser is re-sized

the second column needs to be the fill the gap between the 1st and 2nd column and is also fluid to respond if the browser is re-sized.

The third column needs to have a max-width of 200px, but can be fluid if the browser is re-sized

I am unable to get the columns inline with each other, heres my Fiddle: http://jsfiddle.net/Xsfvw/7/

<!--Bootstrap Approach-->
<div class="container-fluid">
    <div class="row">
        <div class="col-xs-8 col-sm-3 border">Logo</div>
        <div class="col-xs-2 col-sm-6 border">Nav</div>
        <div class="col-xs-2 col-sm-3 border">Right</div>
    </div>
</div>
<!--Standard CSS Approach-->
<div class="container-fluid">
    <div class="row">
        <div class="nalogo">Logo</div>
        <div class="nanav">Nav</div>
        <div class="naright">right</div>
    </div>
</div>

CSS:

.border {
    border: 2px solid #ff0000;
    z-index: 1020;
    height: 50px;
    margin-bottom: 30px;
}
.nalogo {
    width:100px;
    height:50px;
    background-color:#ff0000;
    border: 1px solid #000;
    float: left;
}
.nanav {
    width:100%;
    height:50px;
    background-color:#00ff00;
    border: 1px solid #000;
    margin:0 auto !important;
}
.naright {
    display: inline-block;
    width:200px;
    height:50px;
    background-color:#0000ff;
    border: 1px solid #000;
    float: right;
}

Here is what i am trying to replicate:

navbar

Upvotes: 7

Views: 18384

Answers (2)

Nicholas Blasgen
Nicholas Blasgen

Reputation: 862

Bootstrap supports hiding and showing grid tiles based on the width of the screen. Consider using visible-*-block as a way to address your issue. Please consider the following fiddle:

http://jsfiddle.net/Xsfvw/10/

It uses the following design pattern:

<div class="container-fluid">
  <div class="row">
      <div class="col-xs-2 visible-xs-block border">Nav</div>
      <div class="col-xs-8 visible-xs-block border">Logo XS</div>
      <div class="col-xs-2 visible-xs-block border">Right</div>
      <div class="col-sm-3 visible-sm-block visible-md-block border">Logo SM</div>
      <div class="col-sm-6 visible-sm-block visible-md-block border">Nav </div>
      <div class="col-sm-3 visible-sm-block visible-md-block border">Right</div>
  </div>
</div>

Upvotes: 2

Mats Kruger
Mats Kruger

Reputation: 115

Hello for the greater than 768px. You could use something like this.

.container-fluid {
    width: 100%;
    background: #222;
}
.row {
    width: 100%;
}
.row > div {
    color: #FFF;
}
.nalogo {
    float: left;
    width: 150px;
    background: red;
}
.nanav {
}
.naright {
    float: right;
    width: 200px;
    background: blue;
}

It uses simple floats to accomplish a fluid center. but when on smaller screen you need to move around the elements, so maybe it would be a good idea to have to menus, so when the screen is smaller than 768 it switches to the other one.

Upvotes: 0

Related Questions