Home Forums Weaver Xtreme Theme Highlighted Menu items to give a Navigational cue

Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • #17454
    Decimus
    Participant

    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

    #20451
    scrambler
    Moderator

    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.

    #20452
    Decimus
    Participant

    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

    #20453
    scrambler
    Moderator

    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

    #20454
    Decimus
    Participant

    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-797class=”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

    #20455
    scrambler
    Moderator

    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

    #20456
    Gillian
    Moderator

    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 🙂

    #20457
    Decimus
    Participant

    thanks @scrambler

    #20458
    Decimus
    Participant

    @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

    #20459
    scrambler
    Moderator

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

    #20460
    Decimus
    Participant

    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

    #20461
    scrambler
    Moderator

    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;}

    #20462
    Decimus
    Participant

    @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;}

    #20463
    scrambler
    Moderator

    I am glad you saw the light 🙂

Viewing 14 posts - 1 through 14 (of 14 total)
  • You must be logged in to reply to this topic.