-
Hi there,
I’m using a page hero to add a header to my blog and archive pages. To make it easy for users to navigate between different category pages, I have added a series of buttons that navigate to an archive page.
To clarify the current archive page, I would like the button to be a different color depending on whether we are on the ‘current page.’ Is there a way to achieve that?
Best Regards,
Rick -
Hi there,
could you use a navigation block ( or hook in the GP secondary nav ) here ?
As it would handle thecurrent-*menu item classes for that styling.Otherwise its going to require some PHP / Javascript.
Let me know
-
Hey David,
I’m happy to use that setup. I can then format the buttons using some custom css. I updated the page to now also includes a ‘navigation block’. However, I don’t see the ‘current-menu-item’ class given to any of the URLs. Even after I click on some. Did I do something wrong?
For full disclosure, I’m linking to the blog (for ‘all’) and category pages for the others items.
The code I used for the Navigation block is:
<!– wp:generateblocks/container {“uniqueId”:”75c0748b”,”align”:”wide”,”isDynamic”:true,”blockVersion”:4,”alignItems”:”center”,”justifyContent”:”center”} –>
<!– wp:generateblocks/grid {“uniqueId”:”f7f75552″,”columns”:2,”verticalAlignment”:”center”,”horizontalAlignment”:”center”,”isDynamic”:true,”blockVersion”:3} –>
<!– wp:generateblocks/container {“uniqueId”:”77109d75″,”isGrid”:true,”gridId”:”f7f75552″,”isDynamic”:true,”blockVersion”:4,”sizing”:{“width”:”33.33%”,”widthMobile”:”100%”}} –>
<!– wp:generateblocks/headline {“uniqueId”:”ef263863″,”blockVersion”:3,”alignItems”:”center”,”justifyContent”:”center”,”typography”:{“fontSize”:”22px”,”textAlign”:”right”},”spacing”:{“marginBottom”:”0px”,”marginRight”:”25px”}} –>
<h2 class=”gb-headline gb-headline-ef263863 gb-headline-text”>Categories:</h2>
<!– /wp:generateblocks/headline –>
<!– /wp:generateblocks/container –><!– wp:generateblocks/container {“uniqueId”:”53f340b4″,”isGrid”:true,”gridId”:”f7f75552″,”isDynamic”:true,”blockVersion”:4,”sizing”:{“width”:”66.66%”,”widthMobile”:”100%”}} –>
<!– wp:navigation {“ref”:5,”layout”:{“type”:”flex”,”flexWrap”:”nowrap”,”orientation”:”horizontal”}} /–>
<!– /wp:generateblocks/container –>
<!– /wp:generateblocks/grid –>
<!– /wp:generateblocks/container –> -
Hmmm… what a horrendous black that nav block is lol.
Could go old school and use a Hook element to callback the themes Secondary Nav:<div class="second-nav grid-container"> <?php if ( function_exists( 'generate_secondary_navigation_position' ) ) { generate_secondary_navigation_position(); } ?> </div>This will return the GP Secondary Nav in its place. Make sure the Secondary Nav module is active, and the Customizer > Layout > Secondary Navigation is set to
No Navigation -
Hey David,
I couldn’t get the secondary navigation to work. But ran into another solution. I ended up using the following javascript in a hook put in the wp_footer:
<script> document.addEventListener('DOMContentLoaded', function() { var buttons = document.querySelectorAll('.nav-button'); var currentUrl = window.location.href; buttons.forEach(function(button) { if (button.href === currentUrl) { button.classList.add('active'); } }); }); </script>I then added the class ‘nav-button’ to each of the buttons. And now it tells me whenever a button is the current page. Then my CSS could target the button that has the class ‘.nav-button.active’
I also prefer this method, so I can make use of the ‘Buttons’ block from generateblocks.
Thanks for thinking with me here!
Rick
-
Glad to hear you got a working solution, and thanks for sharing that!
- You must be logged in to reply to this topic.