Hey everyone, I bought an HTML5 template I really like and I’m streamlining the entire theme by taking all the common elements like the header, navigation, footer, etc, and placing those in individual PHP files and then calling them out in the pages using PHP Includes.
The problem I’m facing is with the navigation, because with each page there is mark up associated to the specific
that is supposed to be active for that page. Mark up is: <class=“active”>
How can I resolve this so I can keep all the Nav mark up in one file?
Several ways! You can do it with JS (not recommended), with CSS, or with PHP. PHP is the best option. Here’s a discussion that might be helpful: How to adjust color of Active Page in CSS?
What I usually do is make sure each page has a unique class for the <body> tag by setting it at the top of the page with $body_class and use a php conditional in the navigation menu items that tests for that class. All pages would have this
<body <?php echo $body_class; ?>>
Then at the top of the About Us page, for example, define this variable <?php $body_class = 'about-us' ?>
and then in the navigation menu list you would have something like this:
So put this on each of the navigation items which will have the effect of only giving the class .current to the menu item corresponding to the page you are on, then you can style the class .current.