CODEWITHSUNDEEP
htmlcsstwitter-bootstrapresponsive-design
notAnonymousAnymore
notAnonymousAnymore

Reputation: 2687

Fixed position div with 'top' relative to parent div

The basic bootstrap template here has a fixed bar at the top. I want to place a div directly underneath it.

Here's the HTML of that bar (copied straight from the page's source so there are CSS class references):

<div class="navbar navbar-inverse navbar-fixed-top">
  <div class="navbar-inner">
    <div class="container">
      <button data-target=".nav-collapse" data-toggle="collapse" class="btn btn-navbar collapsed" type="button">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a href="#" class="brand">Project name</a>
      <div class="nav-collapse collapse" style="height: 0px;">
        <ul class="nav">
          <li class="active"><a href="#">Home</a></li>
          <li><a href="#about">About</a></li>
          <li><a href="#contact">Contact</a></li>
          <li class="dropdown">
            <a data-toggle="dropdown" class="dropdown-toggle" href="#">Dropdown <b class="caret"></b></a>
            <ul class="dropdown-menu">
              <li><a href="#">Action</a></li>
              <li><a href="#">Another action</a></li>
              <li><a href="#">Something else here</a></li>
              <li class="divider"></li>
              <li class="nav-header">Nav header</li>
              <li><a href="#">Separated link</a></li>
              <li><a href="#">One more separated link</a></li>
            </ul>
          </li>
        </ul>
        <form class="navbar-form pull-right">
          <input type="text" placeholder="Email" class="span2">
          <input type="password" placeholder="Password" class="span2">
          <button class="btn" type="submit">Sign in</button>
        </form>
      </div><!--/.nav-collapse -->
    </div>
  </div>
</div>

Here's my attempt at a div to go underneath it:

<div style="background-color:#CF4342;color:#fff;top:40px;margin:0 auto;position:fixed;z-index:5000; width:50px;">Hello</div>

It almost works but the problem with this is the 'top:40px;'. When you resize the screen, the fixed bar at the top changes height.

How do I make it so that it always sits directly underneath the bar regardless of the bar's height? Bonus points for how to center it horizontally without using <center>

Edit: for the horizontal centering thing, i tried wrapping my div in a div with 100% width and then adding 'margin:0 auto' to it, but that doesn't work with fixed position

Edit2: here is the jsfiddle. line 38 of the html is my attempt, everything above that is the nav bar div.

Upvotes: 2

Views: 8551

Answers (3)

apaul
apaul

Reputation: 16170

If you're already using jQuery you could use something like this:

Working Example

Full screen example

x = (function() {
var t = $('.navbar').height();
var c = $(window).width() / 2 - $('.new').width() / 2;
    $('.new').css({
        top: t,
        left: c
    });
});

$(document).ready(x);
$(window).resize(x);

Note: updated examples with media queries to better show the effect of the script.

Of course you can do this with CSS alone, but you will need to use a media query like so:

CSS only working example

.new {
    position:fixed;
    margin: 0 auto;
    top: 51px;
    left:0;
    right:0;
    background-color:#CF4342;
    color:#fff;
    z-index:5000;
    width:50px;
}
@media (max-width: 979px) {
    .new {
        top: 61px;
    }
}

Notice that the css only solution will "break" if you narrow the screen too far. The jQuery solution won't have that problem.

Upvotes: 4

Pevara
Pevara

Reputation: 14310

Bootstrap says the following in it's documentation:

Add .navbar-fixed-top and remember to account for the hidden area underneath it by adding at least 40px padding to the <body>. Be sure to add this after the core Bootstrap CSS and before the optional responsive CSS.

So that is what i would try...

I updated your fiddle to demonstrate http://jsfiddle.net/Pevara/MgcDU/5403/
I did the following:
- Moved your 'hello inside the container with the hero unit
- Removed the positioning on the 'hello'
- Removed the 10px margin you set on the .container
- Added the following to your css, as suggested by Bootstrap 

body {
    padding-top: 40px;
}

Upvotes: 0

Dejan.S
Dejan.S

Reputation: 19138

Try to add this line in your css or edit the class in the bootstrap css file. Make sure your css file is under the bootstrap css file incase you choose to add it in your own. Does it make sense?

.navbar-fixed-top { margin-bottom: 0 !important; }

Upvotes: 0

Related Questions