Menu/ autofocus?

Hello,

I want to know how to create the line above the word “hébergement”.
Thank you in advance.

There are several ways to do this. What have you tried so far? Please put your code somewhere so that we can look at it.

@bbsmooth

Hello, thank you for your reply.

Here is the code HTML, then CSS:

<menu >
		 	<nav >
			    <a class="blue" href="#" class="cat"> Hébergements</a>
				<a class="black" href="#">Activités</a>
				<a class="blue" href="#">S'inscrire</a>
			</nav>
		
        </menu>
type or paste code here
.bordertop

.cat
{
	 border-top:3px solid black;
}

You have duplicated class attribute here, so only one gets applied.

You can of course have multiple classes if you want but the syntax is different:

<a class="cat blue">Blue cat</a>

Also, make sure to not live a selector open in CSS because it’ll crash:

.bordertop

@sitek94

Thank you very much!!! <3
It works!!!

Should it always be there, or when the link is active, or only on hover?

BTW, I don’t think you meant to, or want to, use the menu element (nav is not part of the permitted content).

1 Like

As an exercise I must to do this page.

That doesn’t tell me when the style is supposed to be active. It might be a hover effect without the mouse being captured in the screenshot.

It looks like each link is for a section on the page. If so, it doesn’t really make sense to have the style always active on the first link.

1 Like

@lasjorg Yes, each link is for a section on the page. So it means i must to use a hover effect. I’ll try to do that … Thank you very much :slight_smile:

A hover effect would make sense.

That, or using JS to toggle an active class when clicking the link. But if there are no requirements for using JS when making the page then that likely isn’t it.

Happy coding!