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

Question

I would like the navbar to look like this, with two horizontal lines on either side of the navbar.
html code:
<div id="navbar">
<div id="navbar-links">
<a class="active" href="#home">HOME</a>
ABOUT
WORKS
CONTACT
</div>
</div>

Answer 1

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>
ABOUT
WORKS
CONTACT
</div>
</div>
You will need to play around with the padding or margins to get the spacing that you want.

Answer 2

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>
ABOUT
WORKS
CONTACT
</div>
<span class='right'></span>
</div>
</h3>