Viewing 22 posts - 1 through 22 (of 22 total)
  • Author
    Posts
  • #199746

    hi guys,

    We have a local site build, that has a main menu that also features the drop down sub menu for a few items.

    The on-state for main menu item (.avia-menu-fx) shows the avia menu with the underline. However when viewing a submenu page, it’s parent main menu item has a different on-state (a different font colour, and no underline effect).

    Is it possible for the on-state for the main menu item to be the same regardless of whether you are viewing a first level or second level page?

    Additionally, the sub-menu does not show the on-state the sub-menu page you are on, so you can’t tell which page you are on. Is there are a trick to enabling this, as it is very standard user interface convention.

    Thanks,
    G

    • This topic was modified 10 years, 3 months ago by Glyphism.
    #199799

    Hi Glyphism!

    Can you please give us a link to the website?

    You need to set sub pages.

    1.) Go to Administration > Pages > Edit the existing pages.
    2.) In the right menu, click the “Page Parent” drop-down menu. The drop-down menu contains a list of all the Pages already created for your site.
    3.) Select the appropriate parent Page from the drop-down menu to make the current Page a child Page.

    This page hierarchy will also be reflected on the menu items.

    Cheers!
    Ismael

    #199801

    Hi Ismael, sorry the site is local, so can’t share access. The way I have the pages setup is exactly as you describe.
    I wonder if it’s got something to do with the way my main menu structure is setup? I have created the meny by manually adding pages to it, and ordering/nesting them doing drag and drop. maybe this is overwriting the natural structure, and then breaking the css between them?

    What is the correct way I should be creating the sites main menu?

    #199830

    Hi!

    Did you use custom links to create the menu? Please use the existing pages listed on the Pages panel of Appearance > Menus.

    Cheers!
    Ismael

    #206355

    Hi Ismael, I’ve returned to this problem after giving up trying to solve it. I really want to try again and see if I can work it out. I’m not sure I understand your question about whether I used “custom links” to create the menu.

    They way I have made the menu is by going to Appearance > Menu, and creating a menu, then adding the menu items to it, and manually dragging their order around in the list. Is this what you mean? I’m building this site locally, so I’m sorry I can’t show you the site, but it’s a very simple horizontal menu with a secondary drop down menu.

    Any help is appreciate.

    Thanks,
    G

    #206606

    Hey!

    The menu should look exactly as it is on the demo. If it isn’t then there is something (not sure what) causing a conflict.

    There isn’t a real way to tell without seeing it live so if you can push it to a dev installation or something that is live we can log in and take a look.

    Otherwise it just a matter of making sure the menu is set up using the regular WordPress menus manager. If the menu is supposed to be a mega menu then it will need to have columns in the layout which looks like:

    Cheers!
    Devin

    • This reply was modified 10 years, 2 months ago by Devin.
    #206826

    I just checked the Enfold demo site, and the menu states on there also don’t appear to be showing the on states correctly for the main menu items when you are on a sub page.

    Go to: http://kriesi.at/themedemo/?theme=enfold
    Click on Portfolio > Portfolio Ajax. When the Portfolio Ajax page loads, you can see that the red underline for the Portfolio menu state does not show, so it’s not possible to know which section of the site you are in when you are looking at one of the sub pages under Portfolio.

    However the strange thing is that if you visit Portfolio > Portfolio 4 Column, that pages does show the red line under the main menu state??

    Is that a bug?

    Thanks,
    G

    #207185

    Oh I see what you mean now. Yes, it isn’t on by default so Try adding the following CSS to your Quick CSS (located under the Styling Tab in the theme options) or the custom.css file in the css folder of your theme files:

    #top .main_menu .menu li.active-parent-item .avia-menu-fx{
        opacity: 1;
        visibility: visible
    }
    #207268

    YES that fixed it! Thanks Devin. I was pulling hair out. I would have thought that should be on by default, rather than turned off. So does the same apply for the navigation state of the sub menu item? Is that also off my default as I am not getting one on my end.

    #207505

    No, that is on. The current menu item class is set to be highlighted which you can see on the demo.

    #214494

    Sorry, its not about this topic, but cant send PM … so i do it that way :-)

    @ Glyyphism
    Still looking for grayscale google maps?

    Solution for u with the site u told us about (http://snazzymaps.com/style/15/subtle-grayscale )

    Open class-framework-widgets.php and search for

    var myOptions = {
    		  zoom:".$zoom.",
    		  mapTypeControl:true,
    		  mapTypeId:google.maps.MapTypeId.".$type.",
    		  mapTypeControlOptions:{style:google.maps.MapTypeControlStyle.DROPDOWN_MENU},
    		  navigationControl:true,
    		  navigationControlOptions:{style:google.maps.NavigationControlStyle.SMALL},
    		  center:latlng		  
    		};

    replace it with:

    var myOptions = {
    		  zoom:".$zoom.",
    		  mapTypeControl:true,
    		  mapTypeId:google.maps.MapTypeId.".$type.",
    		  mapTypeControlOptions:{style:google.maps.MapTypeControlStyle.DROPDOWN_MENU},
    		  navigationControl:true,
    		  navigationControlOptions:{style:google.maps.NavigationControlStyle.SMALL},
    		  center:latlng,
    		  styles: [{featureType:'water',elementType:'all',stylers:[{hue:'#e9ebed'},{saturation:-78},{lightness:67},{visibility:'simplified'}]},{featureType:'landscape',					elementType:'all',stylers:[{hue:'#ffffff'},{saturation:-100},{lightness:100},{visibility:'simplified'}]},{featureType:'road',elementType:'geometry',stylers:[						{hue:'#bbc0c4'},{saturation:-93},{lightness:31},{visibility:'simplified'}]},{featureType:'poi',elementType:'all',stylers:[						{hue:'#ffffff'},{saturation:-100},{lightness:100},{visibility:'off'}]},{featureType:'road.local',					elementType:'geometry',stylers:[{hue:'#e9ebed'},{saturation:-90},{lightness:-8},{visibility:'simplified'}]},{featureType:'transit',elementType:'all',stylers:[						{hue:'#e9ebed'},{saturation:10},{lightness:69},{visibility:'on'}]},{featureType:'administrative.locality',elementType:'all',stylers:[						{hue:'#2c2e33'},{saturation:7},{lightness:19},{visibility:'on'}]},{featureType:'road',elementType:'labels',stylers:[{hue:'#bbc0c4'},{saturation:-93},{lightness:31},						{visibility:'on'}]},{featureType:'road.arterial',elementType:'labels',stylers:[{hue:'#bbc0c4'},{saturation:-93},{lightness:-2},{visibility:'simplified'}]}]		  
    		};

    This works. Have fun :-)

    • This reply was modified 10 years, 2 months ago by docperi.
    #214499

    Hey!


    @docperi
    Thanks :)

    Cheers!
    Yigit

    #220759

    Devin, just following up on this. Again I am find now that Level 3 pages do not have their menu states active. So for example my menu structure looks like the following:

    Level 1 Page
    – Level 2 Page
    –– Level 3 Page

    Even though the Level 3 page has Level 2 as it’s parent, which in turn has Level 1 page as it’s parent, the on state for Level does not show when you are on Level 3, and users have no way of knowing how deep they are in the navigation.

    Is there another piece of custom CSS needed for this? It’s very strange that this is not working by default.

    Thanks,
    G

    #220808

    Hi!

    I think this will work if you set a page hierarchy. http://en.support.wordpress.com/pages/page-attributes/

    You can see an example if you “Import the dummy data” then check the “Blog” menu item.

    Best regards,
    Ismael

    #220812

    HI Ismael, I realised what is happening. My Level 3 pages are not accessible via the main navigation menu. They are only accessible via a secondary left hand menu that sits on the Level 2 pages.

    It looks like unless the Level 3 pages are added to the main menu (which I don’t want to do because it won’t work well for the site design), then the main menu can’t register the ‘connection’ to the Level 3 pages, and won’t activate the on state.

    Is there some other way to use custom css. When I inspect the main menu item that isn’t showing it’s on state, the class states

    class="menu-item menu-item-type-post_type menu-item-object-page current-page-ancestor menu-item-has-children dropdown_ul_available

    I can see it says:
    current-page-ancestor
    So it looks like it is registering something for it. Maybe I can style this class and turn the menu state on?

    • This reply was modified 10 years, 1 month ago by Glyphism.
    #221603

    Hey!

    Try following code to show the avia-menu-fx element.

    
    .current-page-ancestor>a>.avia-menu-fx>.avia-arrow-wrap, .current-page-ancestor>a>.avia-menu-fx>.avia-arrow-wrap{display:block;}
    

    Insert it into the quick css field.

    Best regards,
    Peter

    #222474

    Thanks Dude, but this didn’t work for me. It’s become a bit of a stress now. My client is saying (rightly) how is a user meant to know where they are in the site, when they are 3 pages deep, and there is no on-state on the main navigation…

    Does anyone know of any other way that I might be able to do this? BTW is there anyway I can message you privately. I can give you password access to the site, however I don’t want to leave links all over the forums, it’s not very professional and clients can stumble across them.

    Thanks,
    G

    #223283

    Hi!

    Yes, I think a link to your website will help us to understand the problem. You can post the links to your website as “private reply”. Then only the forum moderators and administrators can view them and all other users + search engines can’t read them because they can’t access your post.

    Best regards,
    Peter

    #223340
    This reply has been marked as private.
    #225159

    Hey!

    Try adding the following CSS to your Quick CSS (located under the Styling Tab in the theme options) or the custom.css file in the css folder of your theme files:

    .current-page-ancestor>a>.avia-menu-fx, 
    .current-page-ancestor>a>.avia-menu-fx>.avia-arrow-wrap{
        display:block;
        opacity: 1;
        visibility: visible;
    }
    

    Regards,
    Devin

    #225215

    Devin, this has solved half the problem. Thankyou. The main navigation on state is now visible. However the only thing missing now is the on state for the second level navigation which appears in the submenu. If I can make that visible, then the problem is fixed!

    G

    #225730

    The current page on the sub menu is already highlighted with this css:

    #top .main_menu .menu ul .current_page_item > a, #top .main_menu .menu ul .current-menu-item > a, .sub_menu li ul a {
    background-color: #f5f1ee;
    }
Viewing 22 posts - 1 through 22 (of 22 total)
  • The topic ‘Inconsistent main menu and sub menu on-states’ is closed to new replies.