CODEWITHSUNDEEP
htmlcsstwitter-bootstrap-3
Nick ONeill
Nick ONeill

Reputation: 7379

In CSS, how can I make a navigation menu that overlaps a div?

I'm wondering the best approach for creating an overlapping navigation. I guess the easiest way is just to position it absolutely relative to the containing div? Any thoughts on an easy way to position this would be great!

I'm currently considering using a bootstrap button group for the "nav".

enter image description here

Upvotes: 1

Views: 978

Answers (2)

random_user_name
random_user_name

Reputation: 26160

This is possible with minimal pure css, and without position absolute.

In order to keep your nav centered, I would recommend some markup along the lines of below (a wrapper around your nav to let you center it up).

Note that I understand you intend to use bootstrap, and you will absolutely be able to do that with what you are trying to accomplish. The below is just pseudo-code to get you the key elements / working example of how this could be accomplished.

jsFiddle

Basic markup:

<div class="nav">
  <nav class="buttons">
    <a href="#">Button 1</a>
    <a href="#">Button 2</a>
    <a href="#">Button 3</a>
  </nav>
</div>
<div class="content">
    Borderered content area.
</div>

Demonstrative CSS:

div.nav {
  text-align: center;
  z-index: 2;
  padding-top: 1px;
}

nav {
  display:inline-block;
  margin:0 auto;
  background: white;
}

nav a {
  display: inline-block;
  padding: 5px 10px;
  border: 1px solid black;
}

div.content {
  margin-top: -15px;
  z-index: 1;
  border: 2px solid red;
  min-height: 300px;
}

Note With this markup, you will end up with about 4px of space between the <a> elements due to the whitespace. See this article: Fighting the Space Between Elements.

My typical solution is to move the elements onto the same line. Not quite as readable, but gets the job done, and doesn't require any other "funky" solutions:

<nav class="buttons">
    <a href="#">Button 1</a><a href="#">Button 2</a><a href="#">Button 3</a>
</nav>

Upvotes: 1

user4956851
user4956851

Reputation: 

.header {
  background-color: blue;
  width: 100%;
  height: 200px;
  margin-top: 25px;
}

.nav {
  position: absolute;
  left: 50%;
  top: 0;
}

.nav div {
  position: relative;
  left: -50%;
  background-color: yellow;
  width: 400px;
  height: 50px;
}
<body>

<div class="nav">
        <div>
        </div>
</div>

<div class="header">

</div>
</body>

or you can go with just one div in the nav bar putting left: 25%

Upvotes: 1

Related Questions