Navigation bar style once clicked

[Edrol97]

Hi all,

I have several navigation bars on my site but I would like to create a once clicked dependent on the page that it is on to match the navigation bar's hover style. Illustration of the styles I have on hover are below.

 

[JosiahMaybe]

CSS Links

HTML links can be styled with many CSS properties, like color, text-decoration, background-color, font-size, font-weight, font-family, etc.).

www.w3schools.com

You may need specific code for each. If you want a different hover once clicked you may need JavaScript. X E.

 

[Edrol97]

CSS Links

HTML links can be styled with many CSS properties, like color, text-decoration, background-color, font-size, font-weight, font-family, etc.).

www.w3schools.com

You may need specific code for each. If you want a different hover once clicked you may need JavaScript. X E.

Ah right, so far I've just done it as so:

   <div id="mailnavigationbar">
            <a href="Home.html" style="font-size: 5dvh; font-weight: 900; text-decoration: underline;">Hi</a>
            <a href="about_me.html">Bio</a>
            <a href="Art.html">Show-Off</a>
            <a href="cv.html">CV</a>
            <a href="Inspa.html">Inspa</a>
         </div>

I've done the same for each navigation bar.

 

[Johna]

Hi all,

I have several navigation bars on my site but I would like to create a once clicked dependent on the page that it is on to match the navigation bar's hover style. Illustration of the styles I have on hover are below.

I'm not sure I understand what you mean. Could you explain more clearly?

You have a different navigation bar on each page, and each navigation bar should have a different hover style? Is that correct?

 

[Edrol97]

I'm not sure I understand what you mean. Could you explain more clearly?

You have a different navigation bar on each page, and each navigation bar should have a different hover style? Is that correct?

Pretty much, yeah.

 

[Johna]

Pretty much, yeah.

Then I don't get what the problem is. You seem to have different navigation bars, each with different hover styles. Is that not what you wanted?

 

[Edrol97]

Then I don't get what the problem is. You seem to have different navigation bars, each with different hover styles. Is that not what you wanted?

So once clicked styles and hover styles yes. So far, I have added these into the html body of the various pages with a <style> tag but am wondering if there is a better way of doing things for each individual style rather than writing quite a lengthy style for both the navigation bar and footer, e.g.

 <a href="cv.html" style="font-size: 2.3dvw; font-family: Montserrat ExtraBold; font-weight: 900;">CV</a>
 <div class="column"><a href="cv.html" style="font-family: Montserrat ExtraBold; font-weight: 900;"><p>CV</p></a></div>

The real one I'm having a problem with at the moment is the black navigation bar which because of the hover effect and the position of the attribute tag means it isn't flush with it's neighbour attribute.

 

[Johna]

So far, I have added these into the html body of the various pages with a <style> tag but am wondering if there is a better way of doing things for each individual style rather than writing quite a lengthy style for both the navigation bar and footer, e.g.

So you already have all the styles you want, but are just wondering if there's a better way to do it?

 

[Edrol97]

So you already have all the styles you want, but are just wondering if there's a better way to do it?

Yes, now I do, I didn't at the time of asking.