Border full with but then different color for each item

Question

Im trying to have a layout like this, with a full width gray border but then below the active item have a different border color:

enter image description here

But its not working. Do you know why?

https://jsfiddle.net/Ldye5qg8/

<div class="container">
  <div class="nav">
    <a class="active" href="">Item 1</a>
    <a href="">Item 2</a>
  </div>
</div>

Css

a{text-decoration:none;}

.nav{
  border-bottom: 3px solid gray;
}

.nav a{
  padding: 15px;  
}

.nav .active{
  border-color:yellow;
  padding:20px;
}

Hope this helps https://stackoverflow.com/questions/2397370/change-link-color-of-the-current-page-with-css — Eduardo, Nov 19 '20 at 17:45

score 0 · Answer 1 · answered Nov 19 '20 at 17:48

0

.nav .active {
    border-bottom: 3px solid yellow;
    padding: 20px 20px 1px 20px;
}

is not the same element, you need to bring for him border-style also to bottom.

answered Nov 19 '20 at 17:48

Omer Cohen

132
1
10

mhhabib · Accepted Answer · 2020-11-19T18:16:32.213

0

Try this one. Hope it will work

EDIT: I used 5px bottom color in .nav. So, the whole .nav will use 5px bottom color. Then I used 5px in .nav a.active bottom color. The .nav a.active bottom color will be shown but on different lines. Hence I used margin-bottom: -5px to overlap .nav color.

.nav {
    list-style-type: none;
    padding-left: 0;
    margin: 0;
    border-bottom: 5px solid #ccc;
}
.nav a {
    display: inline-block;
    padding: 0 15px 0 15px;
    margin-left: -4px;
    text-decoration:none;
}

.nav a.active {
    border-bottom: 5px solid yellow;
    margin-bottom: -5px
}

<div class="container">
  <div class="nav">
    <a class="active" href="">Item 1</a>
    <a href="">Item 2</a>
  </div>
</div>

edited Nov 19 '20 at 18:16

answered Nov 19 '20 at 17:52

mhhabib

2,975
1
15
29

Thanks, do you know how to add a yellow border bottom on hover? Like this doesn't work ".nav a:hover{ border-color:yellow; }"? – Jack Nov 19 '20 at 17:54
It is more helpful to explain the code and why any changes were made rather than simply saying "Try this". – Heretic Monkey Nov 19 '20 at 17:56
@Jack please don't ask new questions in the comments of answers. If you have further questions, ask new questions to cover them. – Heretic Monkey Nov 19 '20 at 17:57
If I mean, you want to know how to set a bottom yellow color on hover? If yes. put it .nav a.active:hover { border-bottom: 5px solid yellow; margin-bottom: -5px } – mhhabib Nov 19 '20 at 18:00
Thanks but also don't works: https://jsfiddle.net/r27wo830/. – Jack Nov 19 '20 at 18:04
@Jack use a different color on hover. https://jsfiddle.net/x0j7r8es/ – mhhabib Nov 19 '20 at 18:18

score 0 · Answer 3 · answered Nov 19 '20 at 18:51

0

Just change border color to border-bottom like this

.active {
    border-bottom: 3px solid yellow;
}

answered Nov 19 '20 at 18:51

NAVNEET CHANDAN

268
3
7

Border full with but then different color for each item

3 Answers3