How to make two lines on either side of the navigation bar?-CodePudding

like this [1]: https://i.stack.imgur.com/38EhL.png

html code-

<div id="navbar">
<div id="navbar-links">
<a class="active" href="#home">HOME</a>
<a href="#about">ABOUT</a>
<a href="#works">WORKS</a>
<a href="#contact">CONTACT</a>
</div>
</div>

CodePudding user response：

Depending on exactly what the surrounding CSS is, but given just the HTML in the question, you could put a line as background to the whole navbar using a linear-gradient and blank it out under the actual links by giving that a white background.

#navbar {
  background-image: linear-gradient(transparent 0 49%, blue 49% 51%, transparent 51% 100%);
  position: relative;
  rdisplay: inline-block;
  margin: 0 1vw;
  display: flex;
  justify-content: center;
}

#navbar-links {
  background: white;
  padding: 0 2vw;
}

#navbar-links a{
  color: gray;
  text-decoration: none;
}

<div id="navbar">
  <div id="navbar-links">
    <a class="active" href="#home">HOME</a>
    <a href="#about">ABOUT</a>
    <a href="#works">WORKS</a>
    <a href="#contact">CONTACT</a>
  </div>
</div>

You will need to play around with the padding or margins to get the spacing that you want.

CodePudding user response：

I am not sure what you want exactly but I tried to follow the image with the html you provided. This method uses two spans, one before and one after the links. You can adjust the font sized and sizes/colours of the lines as you please.

This will appear differently if you are using Bootstrap.

.left, .right{
  flex-grow: 1;
  background: linear-gradient(lightskyblue, lightskyblue);
  background-position: 0% 50%;
  background-size: 100% 2px;
  background-repeat: repeat-x;
}


#navbar-links>a{
  color:black;
  float: left;
  text-decoration: none;
  width: 25%; 
  text-align: center;
}

    <div id="navbar" style="width:95%;display: flex;margin: 40px auto;">
        <span class='left'></span> 
      <div id="navbar-links" style="width:65%; padding: 0 5px">
      <a class="active" href="#home">HOME</a>
      <a href="#about">ABOUT</a>
      <a href="#works">WORKS</a>
      <a href="#contact">CONTACT</a>
      </div>
          <span class='right'></span>
      </div>
    </h3>