Navbar

WHEN CREATING A nav BAR AND TRYING TO PLACE IT AND MAKE IT APPEAR WHERE I WANT IT TO, I DON’T UNDERSTAND WHEN AND WHAT COMBNINATION(S) OF flexbox, float, absolute, relative, etc. I ALSO DON’T UNDERSTAND HOW MANY SELECTORS I’M SUPPOSED TO USE TO SELECT THE PROPER ELEMENT THAT I WANT TO SELECT (NOTE: I WROTE THIS IN CAPITAL LETTERS SO MY TAGS AND ELEMENTS STAND OUT WHEN I TPYE THE SPECIFICS THAT I’M STRUGGLING WITH)

1 Like

When creating a navigation bar, I would put it inside a <nav>Navigation</nav> element rather than a <div> to help you distinguish it from other elements. You might also want to add an id to it to help in the case that you have multiple navigation bars.

The different values for the position property are:

  • static - Stays in the same place - default
  • relative - Is positioned relative to other objects on the page
  • fixed - Always stays in the same position, whether you scroll or not
  • absolute - Has a specific position on the page that does not depend on the position of other elements (unless it is inside an element)
  • sticky - Behaves as a normal static element until it hits the top of the screen, at which point it starts to behave like a fixed element

The above is used to specify how you will tell it its location.

The options for the display property are different in that they tell the object how to behave. The possibilities that you are likely to use are the following:

  • block - starts on a new line and takes up the full width unless specified otherwise
  • none - you can’t see the element
  • inline - Does not start on a new line; only takes up as much width as required unless specified otherwise
  • inline-block - The element itself is inline, but the elements inside of it are block elements
  • list-item - behaves like the <li>List Item</li> element
  • initial - Resets the property to default (depends on the element)
  • inherit - Does whatever the parent element does

Usually, you will use a block element when creating a navigation bar, as you want it to take up the full width. You will want to use either fixed, absolute, or sticky positioning.

Here’s an example of how I’d arrange it:

nav {
  display: block;
  position: sticky;
  top: 0;
  left: 0;
  width: 100%
}

Note that when positioning block elements, if you do not specify a width, it will only take up the required width.

I hope that this answers your question!

Further reading that might help:
CSS Position: https://www.w3schools.com/cssref/pr_class_position.asp
CSS Display: https://www.w3schools.com/cssref/pr_class_display.asp

1 Like

Thanks! that helps! I’ll have to mess around with it more to get a better feel for it. its confusing and frustrating at times. I’ve heard this concept can take some time to grasp