Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Robert Berube
Robert Berube
8,119 Points
Posted by Robert Berube
Robert Berube
8,119 Points

CSS Navigation Bar to look like it wraps

So I want to style a nav bar so it looks like it wraps around the header as shown as the example shown in the picture.

https://dl.dropboxusercontent.com/u/50738254/Rob/nav-wrap.jpg

Can anyone help me with how to create this visual effect with CSS?

2 Answers

Jake Lundberg
Jake Lundberg
13,965 Points
Jake Lundberg
Jake Lundberg
13,965 Points

There are many ways in which you can accomplish this...

Here is how I did it: 

<div id="element-being-wrapped-around">
  <!-- whatever content you want in here... -->
</div>
<div id="element-wrapping-around">
  <!-- whatever content you want in here... -->
</div>

#element-being-wrapped-around {
  position: absolute;
  top: 100px;
  left: 50%;
  width: 500px;
  height: 200px;
  margin-left: -250px;
  background: black;
}

#element-wrapping-around {
  position: absolute;
  top: 200px;
  left: 50%;
  width: 520px;
  height: 50px;
  margin-left: -260px;
  background: red;
}

#element-wrapping-around::before {
  content: ' ';
  position: absolute;
  left: 0;
  top: -10px;
  width: 0;
    height: 0;
    border-bottom: 10px solid firebrick;
    border-left: 10px solid transparent;
}

#element-wrapping-around::after {
  content: ' ';
  position: absolute;
  right: 0;
  top: -10px;
  width: 0;
    height: 0;
    border-bottom: 10px solid firebrick;
    border-right: 10px solid transparent;
}
Robert Berube
Robert Berube
8,119 Points
Robert Berube
Robert Berube
8,119 Points

That definitely does it. Now to figure out how to make it work with my layout (I am a bit new to CSS and this forum, so I hope I am posting things correctly and interested in understanding the concept in the code that creates the effect).

The way I have it set now, the position: absolute; makes the container alignment go crazy, so I am wondering if I set this up correctly to do this, or how I get to it from my design (what to change).

Currently, I am working with the header styling. I recently moved the nav element outside the #header-wrapper to to make #nav-wrapper create the effect on #header-wrapper. Ultimately, I am trying to use a background-image for the nav bar that is a hospital fall risk bracelet, and make it look like it is wrapping around the element above (#header-wrapper). Here is how the html is set up currently...

<body> <div id="header-wrapper">
<header> <img src="img/trsc-title-logo.svg" id="title-logo" class="title-logo"> <img src="img/trsc-logo.svg" id="logo" class="title-logo"> </header> </div>

<div id="nav-wrapper">
  <nav>
      <ul class="nav">
        <li><a href="index.html" class="nav-button">Home</a></li>
        <li><a href="about.html" class="nav-button">About</a></li>
        <li><a href="techyla.html" class="nav-button">Techy-La</a></li>
        <li><a href="findclub.html" class="nav-button">Find a Club</a></li>
        <li><a href="startclub.html" class="nav-button">Start a Club</a></li>
      </ul>
  </nav>
</div>

And the CSS

/********************
PAGE STYLES
********************/

html {
  width: 100%;
  background-color: lightgrey;
}

body {
  font: normal 1.1em/1.5 sans-serif;
  text-align: center;
  color: #fff;
  background-color: #023467;
  width: 90%;
  margin: auto;
}

header {
  width: 100%;
  text-align: center;
  margin: 0 auto;
  padding: 0 0 0 0;
}

#header-wrapper {
  width: 100%;
  margin: 0 auto;
  background-color: white;
}

#nav-wrapper {

  display: block;
  width: 100%;
  margin: auto;
  margin-left: 0;
  margin-right: 0;
  text-align: center;

  background-image: url(../img/fall-risk-img.png);
  background-size: contain;
  background-repeat: no-repeat;

Thanks for the help guys.

Jake Lundberg
Jake Lundberg
13,965 Points
Jake Lundberg
Jake Lundberg
13,965 Points

You would use your header-wrapper and nav-wrapper in the same way I used element-being-wrapped-around and element-wrapping-around. Do a little reading on positioning and the possible values you can use. This is a great little project to work on this very important aspect, so I highly recommend taking the time to figure it out. I'm happy to help in this instance, but it is through these confusing projects that you learn the most, so I don't just wanna give the answer here...

Robert Berube
Robert Berube
8,119 Points
Robert Berube
Robert Berube
8,119 Points

So, I was able to use the before/after pseudo elements to create the visual effect, but was running into an issue on viewport resizing...one edge that was not absolute positioned was moving out of place...until I discovered that you can (and how to) position multiple corners of the div (left and right).

Then I figured I could remove my over-width and negative margin values that were overlapping the div and just handle it with negative values in the absolute positioning.

Hope it is ok to do it that way, because it seems to work...at least for now LOL.

Oliver Sewell
Oliver Sewell
16,425 Points
Oliver Sewell
Oliver Sewell
16,425 Points

hmmm im not too sure maybe you could use the z-index property more info here http://www.w3schools.com/cssref/pr_pos_z-index.asp