How would I go about doing something like on psd? I have no idea to make it work, but I feel it should be possible somehow. Does anyone know how to do this? Thank in advance.
The code I have now:
It’s not really clear what you are asking. You want a green bottom border to appear on hover? All the time? If on hover, then on hovering what? Just the house?
As Ralph said the question is a little ambiguous but this should give you a start.
.header{position:relative;}
.main-nav li:hover:after{
content:" ";
border-bottom:5px solid green;
position:absolute;
left:0;
right:0;
bottom:-5px;
}
1 Like
Hi @ralphm
Sorry for my bad english. I want a green background color to appear on border bottom when hover.
Hi @PaulOB
Thank for replying. I updated a bit original my code then tried your code but it doesn’t work.
I just posted the code I gave you into your codepen and it worked straight away.
You probably need to add 5px bottom padding to your anchors if you want the hover color on the other items to reach the footer but as far as the border showing on hover then that is working straight out of the box with the code above.
Again, that is not the code I gave you so I’m a little confused as you seemed to have changed the behaviour now.
You moved the position:relative from the header and on to the list item which means the border will only be on the bottom of that single list item whereas in your initial drawing you wanted the hover effect under the whole nav menu - which is what the code I gave you does.
If all you are doing is making the nav item itself reach the green line below then you just need to set a fixed height for the nav items (or add some padding as I mentioned before) and the position the border correctly.
You have a transition on the nav background colour so just duplicate that effect on the after element so that it matches and then they will fade at the same time.
1 Like
Hi @PaulOB
“You moved the position:relative from the header and on to the list item which means the border will only be on the bottom of that single list item whereas in your initial drawing you wanted the hover effect under the whole nav menu - which is what the code I gave you does.” Yes, this is what I want so moved position to the list item.
I added transition effect to :after as a property but it doesn’t work.
can you give us the link to your codepen?
ha sorry. thought it was a screen shot.
guess i am still a bit confused on your need. so i could see better the bottom border, i temp changed the color to white.
here is a link (wish you could upload images)
what i find confusing, there seem to be three borders really:
Do you want only two? I am thinking you only want two.
Is the active button to display the 5px border while the user is on that page?
Do you want the small triangle pointing down as shown in the first example?
thx
D
Hi,
As @PaulOB mentioned above
“You have a transition on the nav background colour so just duplicate that effect on the after element so that it matches and then they will fade at the same time.”
I added transition effect to :after as a property but it doesn’t work.
You need to have something to transition so add a transparent border to the :after element to start with.
e.g.
&:after{
.transition(~"all 0.3s ease");
border-bottom:5px solid transparent;
content: '';
left: 0;
right: 0;
position: absolute;
width: 100%;
bottom: -5px;
}
Then just change the color of the border on :hover:after.
1 Like