CODEWITHSUNDEEP
htmlcssnavigation
Jay Hong
Jay Hong

Reputation: 27

(HTML) how to bold navigation bar text?

How do I bold the text in the navigation bar (Home, portfolio, Contact, About Me, etc) when the visitor is on that page?

For example, if the visitor is on my "Portfolio" page, I want that text to be bold on my navigation bar while the others stay normal. Similarly, if the visitor goes to "Contact" page, I want the text "Contact" to be bold and everything else to stay normal.

2nd question: is this easier to do in HTML? Or is this something I should do in css?

Upvotes: 0

Views: 13761

Answers (2)

Shankha057
Shankha057

Reputation: 1371

If you are serving up static web pages(which seems to be the case in this situation),then just explicitly specify a bold property to whichever HTML element you want to make bold in the particular HTML file and so on like Sarcasm has done in the above answer. But if you are dynamically generating webpages then make different templates and then specify the properties tailored for the particular template.(I assume that ou know how to use id and class in HTML)

Upvotes: 0

scarsam
scarsam

Reputation: 346

Add a active class to the HTML

HTML:

<ul id="navigation">
  <li><a href="home.html">Home</a></li>
  <li><a href="portfolio.html" class="active">Portfolio</a></li>
  <li><a href="contact.html">Contact</a></li>
  <li><a href="about.html">About Me</a></li>
</ul>

CSS:

ul#navigation .active {
  font-weight: bold;
}

So on home.html the active class will be on the Home link. For the contact.html will be on the Contact link and so on...

Upvotes: 5

Related Questions