Highlighted Menu items to give a Navigational cue

[Decimus]

I’m using http://www.bajanthings.com to learn my way around Weaver Xtreme.
I’ve got a few things I’m having difficulty with:

Highlighted Menu items to give a Navigational cue
When one is on the home page of Bajan Things http://www.bajanthings.com/ Bajan Things is highlighted on the menu bar. 
Now if I click on any post, Bajan Things on the menu bar is no longer highlighted in bold to tell you where you are. 

On the Main Options | Menu | Options:  All Menu – I’ve ticked Bold Current Page:and Un-Ticked Do Not Highlight Ancestors:  The latter does not seem to make any imp[act if ticked or unticked?

Many thanks

[scrambler]

When you click on a post, you go to the single post page. that page is not part of your menu, so there is nothing meaningful to highlight…

The highlight is for the current page, why would any page be highlighted if some other page is actually displayed.

If you absolutely want a menu page to be highlighted when going to a single post page, that would be feasible width custom CSS though.

[Decimus]

Hi Scrambler

Blog (in this case Bajan Things) is highlighted with the page that has the summary of all the blogs listed.  In this case http://www.bajanthings.com.  Once you click on one of the entries as they are part of the blog I was expecting Blog (in this case Bajan Things) to still be highlighted.

I made it work here by have a default category and I set it as the Menu item.  I was hoping for an easy way to do that:
http://www.121dogtraining.hk/category/dog-training-tips/
http://www.121dogtraining.hk/dog-training-tips/teaching-dog-fetch-command/

Looks like its not possible without some css magic might be more than I can do.

Many thanks

Perter

[scrambler]

Well once people click on a post they are now on a single post page, and this NOT the blog page.

So if you highlight the blog page, it will be very confusing for people as they wont be able to find the other post on that page.

But if this is what you want to do, here is the CSS Rule that you can add to Main Options > Fonts & Custom > Custom CSS Rule box, so that on any single post page , the blog page will be highlighted.

.single-post #menu-item-797 > a {font-weight:bold;}

the selector says that on single post [pages, the menu item 797 (which is the blog page) will be bold

[Decimus]

many thanks for that. 
that’s just what I wanted.  I’ve now added it.

To get the 797 ref I’m assuming your did a view source and looked for this line:
<li id=”menu-item-797” class=”menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-797“><a href=”http://www.bajanthings.com/“>Bajan Things</a></li>

many thanks

[scrambler]

Yes, the ID is in the html tag of the li element.

The way to figure out these things is best done using your browser’s developer tools.

If you are not familiar with the tool, read the thread below

http://forum.weavertheme.com/discussion/1207/basic-tips-on-using-the-developer-tools-like-firebug-to-resolve-styling-issues

[Gillian]

Thanks @Decimus for asking this question, and @scrambler for providing the CSS 🙂

I wanted to do something similar on my site, and had achieved it by creating a custom menu and then adding the posts as children of the blog page.  However, I could see that as more blog posts were added this was quickly going to become unwieldy – and I had to remember to add the post to the menu every time I created a new post!  The CSS solution is much neater 🙂

[Decimus]

thanks @scrambler

[Decimus]

@scrambler could you help me again with this same issue – this time its with sub menu pages.

I’ve found its also possible to do this with pages where the top link is a dummy link URL #
example: http://www.art-treasures-gallery.com/genuine-chinese-antiques/&nbsp; where there are multiple pages listed under About Us and About Us stays highlighted as a navigation cue when one of the sub pages is open

With Bajanthings I was looking to have a few sub menu pages under the actual Welcome page.  At the moment I only have one sub menu (Webesite). http://www.bajanthings.com/website/
My guess is that I need to replace .single-post ref but I’m not sure what I need to replace it with?

/* Keeps Welcome menu-item-95 bold when sub pages are viewed */
.single-post #menu-item-95 > a {font-weight:bold;}

Many thanks

[scrambler]

I am not sure I know what you actually want to do, can you be more specific

[Decimus]

Hi @Scrambler

Looking to achieve the same magic that you helped we with with posts.  This time I’m using pages.

Under Welcome I might have 3 sub pages
Welcome
-Website
-Bios
-Mobile Marine Systems

What I wanted to do was is the same as before.  If you are say on Bios that the topline Welcome is highlighted as a navigation cue.

Hope that helps

[scrambler]

To style The current page Parent a certain way use the rule below in Main Options > Fonts & Custom > CUstom CSS Rule Box with the properties you want.

.weaverx-theme-menu .current_page_parent > a, .weaverx-theme-menu .current-menu-parent > a {font-weight:bold;}

[Decimus]

@scrambler
trying to recreate what  you kindly helped me with on 2 March
.single-post #menu-item-797 > a {font-weight:bold;}
Here it is working just like I wanted: http://www.bajanthings.com/cairns-for-lost-friends/

Just creating a new site.  Blog is here:
http://www.ringwood-dogs.com/new-cool-stuff/ringwood-dog-training-dog-walking-dog-boarding-dog-day-care/

Have used the same rule, however, when the blog is being read the “Training tips” menu item is not  highlighted.  Have I missed something?
The only difference is site starts on a static page.

/* Keeps Ringwood Dogs menu-item-105 bold when posts are viewed */
.single-post #menu-item-105 > a {font-weight:bold;}
http://www.ringwood-dogs.com/new-cool-stuff/dog-training-tips/using-positive-reinforcement-dog-training/

After a lot of head sctaching I think I know the issue… with Bajan things the current menu item is bold…. with the Ringwood Dogs which uses the plain them the current item is a different colour (Green)….

Solved once I saw the light with:
/* Keeps Ringwood Dogs menu-item-105 bold when posts are viewed */
.single-post #menu-item-105 > a {color:#009900;}

[scrambler]

I am glad you saw the light 🙂

[Author]

Posts