Filling a Wrapper with a Div or header ID

[edonian]

I’m not quite sure how to describe this. But I want my navigation bar to fill the top wrapper and remain responsive. Here’s a picture to kind of display what I’m trying to achieve:

http://i.stack.imgur.com/UFTNB.png

It’s the layout on this page: https://designshack.net/tutorialexamples/fixed-navbar/demo/

And here is my codepen: http://codepen.io/edonian/pen/wWxQVA

This site has changed since the last time I was here (the preview isn’t working for me) I hope I haven’t broken any rules posting this.

Any help would be greatly appreciated! :)

[Jerba]

If I understand correctly, you want the navigation bar to span the entire width of the element with the white background (wrapper) but all of the subsequent content to remain padded?

If so, based on the Codepen example you supplied you can simply apply the padding to a ‘inner’ wrapper that wraps everything after the navigation bar. For example:

<div class="wrapper">

      <!-- Your header would go here (as it does in your Codepen) -->
      <header>
            <!-- Your links -->
      </header>

      <!-- Here instead of having your content follow, add another wrapper -->
      <div class="inner-content-wrapper">
            <p>Hello World! This is my main content wrapper!</p>
      </div>
</div>

Then, in your styling where you’re applying a 2% padding to the wrapper element, simply remove it and add it to the inner-content-wrapper element.

I hope this was helpful.

[edonian]

First and foremost, thank you so much for responding. I seriously thank you for being so kind and trying to help me. (I tried reaching out in another forum, but some people can be so rude.)

I’m not quite sure if I’m understanding or doing this correctly. But I tried to apply the changes and it’s not working for me. http://codepen.io/edonian/pen/wWxQVA

The padding doesn’t seem to be the issue, like I’ve tried removing it but everything just looks squished and the white spaces are still there. :\

I’m not sure if there’s a code I’m missing, but yes I can’t seem to get the navigation bar to span the entire width of the white element as you said. Here’s another example of what I’m trying to do (but without the header) http://gurenichinose.god.jp/

[Beverleyh]

Not sure if this is what you want, but in your CodePen, on #tophome, try changing margin-top: 2%; to margin: -2% -2% 0;

[edonian]

Thank you Beverleyh for your response! I truly appreciate your help!

It seems to have brought it much closer but it’s not covering it entirely. Check it out: http://codepen.io/edonian/pen/vKzKWB

Is it even possible to achieve this in percentages? I will admit I’m new to percentages, I’ve used px for the longest time. And I’ve been trying to find responsive layouts with this kind of navigation, just to see how they’ve managed it, but have found none. ;_;

[Author]

Posts