Let’s say you have a website with some navigation elements:<\/p>\n
<nav>\r\n <ul>\r\n <li><a href=\"\/\">Home<\/a><\/li>\r\n <li><a href=\"\/blog\/\">Blog<\/a><\/li>\r\n <li><a href=\"\/about\/\">About<\/a><\/li>\r\n <\/ul>\r\n<\/nav><\/code><\/pre>\nNow, imagine you want to make the active navigation element bold. That is, when you’re on the home page, the Home link should be bold; when you’re somewhere inside the blog section the Blog link should be bold, and so on.<\/p>\n
You might be thinking about writing some code on the server that spits out a special class for the current section’s navigation link. That would work, but it isn’t going to scale well as more sections are added.<\/p>\n
But there’s a better way!<\/p>\n
Let’s start by adding some classes to the navigation elements:<\/p>\n
<nav>\r\n <ul>\r\n <li><a class=\"home\" href=\"\/\">Home<\/a><\/li>\r\n <li><a class=\"blog\" href=\"\/blog\/\">Blog<\/a><\/li>\r\n <li><a class=\"about\" href=\"\/about\/\">About<\/a><\/li>\r\n <\/ul>\r\n<\/nav><\/code><\/pre>\nNow, for each section of the site, add a matching class to the body<\/code> element, like this:<\/p>\n<body class=\"home\"><\/code><\/pre>\nNow, with this CSS, the current section’s navigation element will key off of the body class:<\/p>\n
body.home nav a.home,\r\nbody.blog nav a.blog,\r\nbody.about nav a.about {\r\n font-weight: bold;\r\n}<\/code><\/pre>\nNothing dynamic, and no server-side coding required!<\/p>\n
If a new section is added to the site all you need to do is add the new navigation link:<\/p>\n
<nav>\r\n <ul>\r\n <li><a class=\"home\" href=\"\/\">Home<\/a><\/li>\r\n <li><a class=\"blog\" href=\"\/blog\/\">Blog<\/a><\/li>\r\n <li><a class=\"about\" href=\"\/about\/\">About<\/a><\/li>\r\n <li><a class=\"contact\" href=\"\/contact\/\">Contact<\/a><\/li>\r\n <\/ul>\r\n<\/nav><\/code><\/pre>\nThen add a new selector to the CSS:<\/p>\n
body.home nav a.home,\r\nbody.blog nav a.blog,\r\nbody.about nav a.about,\r\nbody.contact nav a.contact {\r\n font-weight: bold;\r\n}<\/code><\/pre>\nThere you go!<\/p>\n","protected":false},"excerpt":{"rendered":"
This trick makes it easy to give the current section’s navigation element a unique appearance, and it scales easily as your site grows.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2],"tags":[],"class_list":["post-621","post","type-post","status-publish","format-standard","hentry","category-htmlcss"],"_links":{"self":[{"href":"https:\/\/coreassistance.com\/tips\/wp-json\/wp\/v2\/posts\/621","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/coreassistance.com\/tips\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/coreassistance.com\/tips\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/coreassistance.com\/tips\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/coreassistance.com\/tips\/wp-json\/wp\/v2\/comments?post=621"}],"version-history":[{"count":16,"href":"https:\/\/coreassistance.com\/tips\/wp-json\/wp\/v2\/posts\/621\/revisions"}],"predecessor-version":[{"id":642,"href":"https:\/\/coreassistance.com\/tips\/wp-json\/wp\/v2\/posts\/621\/revisions\/642"}],"wp:attachment":[{"href":"https:\/\/coreassistance.com\/tips\/wp-json\/wp\/v2\/media?parent=621"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/coreassistance.com\/tips\/wp-json\/wp\/v2\/categories?post=621"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/coreassistance.com\/tips\/wp-json\/wp\/v2\/tags?post=621"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}