CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Miha Šušteršič
Miha Šušteršič

Reputation: 10042

Positioning div relative (absolute) to a fixed navbar

I have a fixed navbar at the top of my page, and want to position an element below it, relative to how big the navbar is. When resizing the browser window, my navbar will jump into 2 or 3 lines from one, and I want my div (.articles-showcase) to move accordingly.

I tried achieving this by nesting my div inside the navbar container and using position: absolute;, top: 0;, but this just always positions my div at the top of the page.

Is there a way to do this using css, or should I look for a javascript solution?

I am currently using bootstrap and angular JS and wouldn't like to add jQuery to my project if not necessary.

Here's my html:

<div class="header" ng-controller="NavbarController">
  <ul>
    <li ng-class="{ active: isActive('/PTC-Testers') }"><a href="#/PTC-Testers">PTC-Testers</a></li><li ng-class="{ active: isActive('/articles') }"><a href="#/articles">articles</a></li><li ng-class="{ active: isActive('/sites') }"><a href="#/sites">PTC sites</a></li><li ng-class="{ active: isActive('/account_reviews') }"><a href="#/account_reviews">account reviews</a></li><li ng-class="{ active: isActive('/forum') }"><a href="#/forum">forum</a></li><li ng-class="{ active: isActive('/contact') }"><a href="#/contact">contact us</a></li><li ng-class="{ active: isActive('/login') }"><a href="#/login">login</a></li>
  </ul>

  <div class="articles-showcase">
    <div class="col-xs-6 col-md-3">
      <p>featured</p>
      <h1>What I learned while cooking</h1>
      <h3>author | posted </h3>
    </div>
    <div class="col-xs-6 col-md-3">
      <p>most read</p>
      <h1>My favorite things about dogs</h1>
      <h3>author | posted </h3>
    </div>
    <div class="col-xs-6 col-md-3">
      <p>highest rating</p>
      <h1>It's finally friday people!</h1>
      <h3>author | posted </h3>
    </div>
    <div class="col-xs-6 col-md-3">
      <p>featured track</p>
      <h1>starting your own adventure</h1>
      <h3>author | posted </h3>
    </div>
  </div>

</div>

the relevant part of my CSS:

.header {
  background-color: red;
  color: #fff;
  border-bottom: 0.3em solid cyan;
  position: fixed;
  top: 0;
  z-index: 10;
  width: 100%;
}
.header ul {
  list-style: none;
  text-align: center;
  margin: 0;
  padding: 0;
}
.header ul li {
  display: inline-block;
}
.header ul li a {
  font-family: 'Ubuntu', sans-serif;
  font-weight: 400;
  font-size: 1.3em;
  color: #fff;
  padding: 5px 1em;
  margin: 0;
  display: inline-block;
  text-decoration: none;
  outline: none;
}
.header ul li:hover {
  background-color: #ff6666;
  text-decoration: none;
}
.header ul .active {
  background-color: cyan;
}

.articles-showcase {
  position: absolute;
  top: 0;
  z-index: 11;
  border-bottom: 0.2em solid cyan;
  padding: 0.5em;
  width: 100%;
}
.articles-showcase div {
  text-align: center;
}
.articles-showcase div h1, .articles-showcase div h3, .articles-showcase div p {
  margin: 0;
  padding: 0.3em;
  color: #660000;
}
.articles-showcase div p {
  font-size: 1.2em;
  color: red;
}
.articles-showcase div h1 {
  font-size: 1.7em;
}
.articles-showcase div h3 {
  font-size: 1.4em;
}

Upvotes: 2

Views: 2717

Answers (2)

Miha Šušteršič
Miha Šušteršič

Reputation: 10042

Based on the anwser from @Milos Miskone Sretin I came up with this crude jQuery solution:

$(window).resize(function() {
        $('.articles-showcase').css('top', $('.header ul').outerHeight());
    });

I still need to test this in different browsers and on mobile devices but for now, it seems to do the trick.

If anyone can come up with a css alternative to do this (maybe something including bootstrap classes that I do not know about), please let me know.

Upvotes: 1

Milos Sretin
Milos Sretin

Reputation: 1748

If you want to put div below fixed element you can do it by setting its top margin to height of navbar.

But, in your case, because you don't have fixed height it is not that simple. You need to use javascript to achieve this.

The simplest way is to use jQuery, if I am right, you already have it loaded since you are using bootstrap. Try in this way:

$(document).ready(function() {
    $('.articles-showcase').css('top', $('.header').outerHeight());
});

Also, I am not completely clear. Is both .articles-showcase and ul under header div. If you want to put .articles-showcase under ul do it like:

$(document).ready(function() {
    $('.articles-showcase').css('top', $('.header ul').outerHeight());
});

You can do it without jQuery but using jQuery is an easiest way. Hope this can help you.

Upvotes: 0

Related Questions