CODEWITHSUNDEEP
htmlcssnavigationborder
Lila
Lila

Reputation: 121

Html CSS Navigation border

I want to make the navigation to look like this, the border needs to look blue for the active links.

How I need the border to look like

Now with this code below:

.main-nav {
    list-style: none;
    text-align: center;
    border-bottom: 2px solid #d9d9d9;
    border-top: 2px solid #d9d9d9;
}

.main-nav li {
    display: inline-block;
    margin-left: 40px;
    background-color: #ffffff;
    padding: 30px 10px;
    margin-bottom: 2px;
}

.main-nav li a:link,
.main-nav li a:visited {
    color: #303030;
    text-decoration: none;
}

.main-nav li:active,
.main-nav li:hover {
    background-color: #f7f7f7;
    border-bottom: 2px solid #439ddc;
    border-top: 2px solid #439ddc;
}

My navigation looks like this:

enter image description here

Upvotes: 0

Views: 54

Answers (2)

Igor Goroun
Igor Goroun

Reputation: 61

You can use margin-top: -2px and margin-bottom: -2px to fix you problems: Working example on jsfiddle: https://jsfiddle.net/jqsg0sLa/

.main-nav {
    list-style: none;
    text-align: center;
    border-bottom: 2px solid #d9d9d9;
    border-top: 2px solid #d9d9d9;
}

.main-nav li {
    display: inline-block;
    margin-left: 40px;
    background-color: #ffffff;
    padding: 30px 10px;
    margin-top:-2px;
    margin-bottom:-2px;
    border-top: 2px solid #d9d9d9;
    border-bottom: 2px solid #d9d9d9;
}

.main-nav li a:link,
.main-nav li a:visited {
    color: #303030;
    text-decoration: none;
}

.main-nav li:active,
.main-nav li:hover {
    background-color: #f7f7f7;
    border-bottom: 2px solid #439ddc;
    border-top: 2px solid #439ddc;
}

Upvotes: 1

Richard Hamilton
Richard Hamilton

Reputation: 26434

Sounds like you're thinking of the border-bottom and border-top properties. You are listening for the :hover pseudoclass, to detect if a mouse is over the link. If it is, we will add a blue border.

nav ul {
  list-style-type: none;
}

nav ul li {
  display: inline;
}

a {
  text-decoration: none;
  color: black;
}

a:hover {
  border-top: 2px solid blue;
  border-bottom: 2px solid blue;
}
<nav>
  <ul>
    <li><a href="http://www.google.com">Home</a></li>
    <li><a href="http://www.apple.com">Services</a></li>
  </ul>
</nav>

Upvotes: 0

Related Questions