Inconsistent main menu and sub menu on-states - Support | Kriesi.at

Tagged: devin-docs, sub-menu

Viewing 22 posts - 1 through 22 (of 22 total)

Author

Posts
December 13, 2013 at 3:47 am #199746
Glyphism
Participant
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 11 years ago by Glyphism.
December 13, 2013 at 8:49 am #199799

Ismael
Moderator

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

December 13, 2013 at 8:52 am #199801

Glyphism
Participant

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?

December 13, 2013 at 9:50 am #199830

Ismael
Moderator

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

January 7, 2014 at 3:51 pm #206355

Glyphism
Participant

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

January 8, 2014 at 3:50 am #206606
Devin
Inactive Moderator
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, 11 months ago by Devin.
January 8, 2014 at 2:50 pm #206826

Glyphism
Participant

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

January 9, 2014 at 3:18 am #207185
Devin
Inactive Moderator
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
}
```
January 9, 2014 at 8:13 am #207268

Glyphism
Participant

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.

January 9, 2014 at 5:20 pm #207505

Devin
Inactive Moderator

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

January 24, 2014 at 5:04 pm #214494
docperi
Participant
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, 11 months ago by docperi.
January 24, 2014 at 5:16 pm #214499

Yigit
Keymaster

Hey!

@docperi Thanks :)

Cheers!
Yigit

February 7, 2014 at 4:32 am #220759

Glyphism
Participant

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

February 7, 2014 at 8:11 am #220808

Ismael
Moderator

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

February 7, 2014 at 8:28 am #220812
Glyphism
Participant
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, 10 months ago by Glyphism.
February 10, 2014 at 9:58 am #221603
Dude
Participant
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
February 12, 2014 at 2:08 am #222474

Glyphism
Participant

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

February 13, 2014 at 9:19 am #223283

Dude
Participant

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

February 13, 2014 at 11:43 am #223340

Glyphism
Participant

This reply has been marked as private.

February 17, 2014 at 11:14 pm #225159
Devin
Inactive Moderator
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
February 18, 2014 at 12:20 am #225215

Glyphism
Participant

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

February 18, 2014 at 8:46 pm #225730
Devin
Inactive Moderator
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;
}
```
Author

Posts