- This topic is empty.
July 31, 2016 at 12:59 pm #244071
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:
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! :)July 31, 2016 at 2:57 pm #244073JerbaParticipant
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
wrapperelement, simply remove it and add it to the
I hope this was helpful.July 31, 2016 at 5:02 pm #244077
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/August 1, 2016 at 6:04 am #244095BeverleyhParticipant
Not sure if this is what you want, but in your CodePen, on #tophome, try changing
margin: -2% -2% 0;August 1, 2016 at 8:13 pm #244131
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. ;_;
- The forum ‘CSS’ is closed to new topics and replies.