Page scroll to id
[resolved] Want to highlight "Blog" menu when viewing individual blog post (4 posts)

  1. Jane
    Posted 2 years ago #

    My site is: http://www.jswebsitedesign.com

    I'm able to get the menu item associated with the current section to highlight nicely when I click on any of the top menu items. (thanks for your help with this!)

    However, when I click on one of the Blog posts, such as "Breathing Space", I want the "Blog" menu item to be highlighted in green (#85C441) and it's not. I added a "<div id="blogPage"> ... </div> wrapper around the "Breathing Space" blog post as a test, but it didn't fix this issue. If you have any suggestions for how I can get the "Blog" menu item to highlight when I'm on an individual Blog post I'd appreciate it.

    Thanks in advance for your help.


  2. malihu
    Plugin Author

    Posted 2 years ago #

    Your blog posts pages body tag gets the class single-post by WordPress. You could use this class in your CSS to target the 'Blog' menu item:

    .single-post #top-menu li.menu-item-79 > a{
        color: #85C441;

    This way the green color is applied only on .menu-item-79 (your 'Blog' link) and only when under the .single-post (the single-post page body class).

  3. Jane
    Posted 2 years ago #

    Hi Malihu - Thanks for this solution! It worked perfectly.

  4. Bibiano Wenceslao
    Posted 1 year ago #

    Here's what worked for me. Place the following PHP code in your footer.php file right before the closing body tag </body>.

    <?php if (is_single() || is_category() || is_tag() || is_search()) {   //  displaying a single blog post or a blog archive ?>
        <script type="text/javascript">
    <?php } ?>

    For further explanation, I wrote a short piece here about it here: Keep “Blog” link highlighted when viewing a single post

Topic Closed

This topic has been closed to new replies.

About this Plugin

  • Page scroll to id
  • Frequently Asked Questions
  • Support Threads
  • Reviews

About this Topic