CODEWITHSUNDEEP
htmlcssheadernavbarnav
arw89
arw89

Reputation: 107

How can I get a bottom line under my navbar like on this site?

http://www.browseanddarby.co.uk/

How can I get a nice underline on my header/navigation bar? Thank you!

Upvotes: 1

Views: 12951

Answers (4)

Spicier Ewe
Spicier Ewe

Reputation: 15

put <hr></hr> just below the nav element and its done

.sub_nav_flex {
  display: flex;
  /* background-color: grey; */
  list-style: none;
  justify-content: center;
  margin-bottom: 1em;
  margin-top: 1.5em;
  overflow: hidden;
  backface-visibility: hidden;
}

.sub_nav_flex li {
  display: flex font-size: 0.85rem;
  font-family: "sans";
  font-weight: 700;
  margin-right: 1em;
  /* background-color: pink; */
  padding: 0.5em 0em;
  border-bottom: 0.15em solid #ffffff;
  transition: all 0.23s ease-in-out;
  overflow: hidden;
  backface-visibility: hidden;
}

.sub_nav_flex li:hover {
  cursor: pointer;
  color: #e67112;
  border-bottom: 0.15em solid orange;
}
<ul class=sub_nav_flex>


  <div>
    <li>
      <a>HOME</a>
    </li>
  </div>
  <div>
    <li>
      <a>DEVELOPMENT</a>
    </li>
  </div>
  <div>
    <li>
      <a>PROJECTS</a>
    </li>
  </div>

</ul>

<!-- Here it is what you need -->
<hr></hr>

Upvotes: 0

Philip Stratford
Philip Stratford

Reputation: 4733

As the others have said, add border-bottom to the element containing your menu.

Example: https://jsfiddle.net/philipstratford/kcq27vaq/

Upvotes: 0

Karol Selak
Karol Selak

Reputation: 4774

I'm not sure what do you mean by 'nice underline', but you can try add this to CSS of your element:

border-bottom: 1px solid #333;

Upvotes: 1

jeff carey
jeff carey

Reputation: 2373

border-bottom: 1px solid #333333;

It's right there if you use your browser's dev tools.

Upvotes: 3

Related Questions