How to make a fixed position navbar with equal spacing?-CodePudding

I already found out that display and position cannot both be used at the same time, but can't seem to find another solution. My code right now shows the navbar how I want it but I can't find a way to fix the position so it stays when scrolling. Thanks!

.navbar {
  top: 0;
  left: 0;
  text-align: justify;
  border: dotted blue;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 2em;
}

.navbar a {
  text-decoration: none;
}

.navbar a:hover {
  background: #ddd;
  color: black;
}

.navbar:after {
  content: '';
  width: 100%;
  /* Ensures there are at least 2 lines of text, so justification works */
  display: inline-block;
}

<div >
  <a id="home" href="#home">home</a>
  <a id="projects" href="#projects">projects</a>
  <a id="shop" href="#shop">shop</a>
  <a id="about" href="#about">about</a>
  <a id="contact" href="#contact">contact</a>
</div>

tried out before and after elements and also to put the whole thing in another div but can't make it work

Edit: have another quick question: is there a quick fix to change the fact that I can highlight the long space between the navigation links?

CodePudding user response：

To fix the position of your .navbar when scrolling, you can use position: fixed; and right: 0;

.navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    text-align: justify;
    border: dotted blue;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 2em;
}

CodePudding user response：

.navbar { 
  position: fixed; 
  top: 0; 
  left: 0; 
  right: 0; 
  height: 50px; 

  display: flex; 
  justify-content: space-between; 
  align-items: center; 
}

CodePudding user response：

.navbar {position: fixed; top: left: 0; right: 0; text-align: justify; border: dotted blue; font-family: Arial, Helvetica, sans-serif; font-size: 2em;}