Navigation Bar CSS Issue

HTML-CSS
1

I’m currently working on my portfolio and I’m having a rather frustrating issue. I’m trying to get my silver navbar background color to extend to 100% width, but doing so completely undoes my styling that moves my navbar to the right so it stays more visible. I’m not sure how to fix that, or even what if there’s something I’m doing wrong. And moving the width styling above the top and right styling still undoes the right: 10px; styling. The first link is of my portfolio without the width added to the navbar and the second link is with the width added so you can see what I’m talking about.

Help please?

Without the width: https://codepen.io/August-Rain/pen/KKyrqPo

With the width: https://codepen.io/August-Rain/pen/Rwjmybz

Thanks in advance!

2

If I understand you correctly, you can use flexbox.

nav {
 display: flex;
 justify-content: end;
 position: fixed;
 top: 0;
 left: 0;
 background-color: silver;
 width: 100%;
}

You probably want to push it a bit away from the right edge.

I would move the fixed positioning and look to the header.

Edit: an example of what I mean if it isn’t clear.

header {
 position: fixed;
 top: 0;
 left: 0;
 background-color: silver;
 width: 100%;
}

nav {
 display: flex;
 justify-content: end;
 gap: 2rem;
 margin-right: 20px;
}
3

First, thank you for your response. I greatly appreciate the help.
Second, what is justify-content: end; and gap: 2rem; for and what do they do?
Third, out of curiosity, do you have any idea why setting the width is resetting the right: 10px; CSS styling? (Or is this just a CodePen glitch thingy because this isn’t the first time I’ve had this issue)

Thanks in advance and thanks again for the help. I’m gonna try what you suggested and see if that fixes the issue.

4

If you use this method, You may want to consider adding some padding on the right and the left of the nav to balance the aesthetics, and minimize those gaps :

nav {
 display: flex;
 justify-content: end;
 gap: 1.5rem;
 margin-right: 20px;
 padding:0 1rem 0 1rem;
}
5

Oh yeah! I’d completely forgotten about adding padding! Thanks so much for the suggestion. It looks loads better now.

6

  • justify-content controls how flex items are distributed/positioned along the main axis. end is to the right (with the default reading direction left to right and default flex-direction of row).

  • gap is like a margin around the flex items (conceptually anyway). It creates space between the flex items.

It doesn’t. I think you are mistaking the nav box for the elements inside it (i.e. the links).

right is the distance between the element’s right edge and the right edge of its containing block.

It is easier to see if you create a relatively positioned element as the container and set the child to be absolute.

7

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.