SOLVED How to achieve 2nd level double menu display?
-
-
- KnightRider
- Sr. Rocketeer
- Posts: 161
- Thanks: 0
-
The Gantry 5 Menu edit video was pretty clear, BUT stopped where it would get interesting for me.
I require a double 1st level menu with the second level displayed, as in this pictureThis image is hidden for guests.
Please log in or register to see it.
What I managed to do is to set the level 0 dropdown style to "extended" and set the dropdown with to 400px to display the two level 1 options, but I cant manage to have the level 2 submenus OPEN beneath it.
How can I achieve this in Gantry 5? - Last Edit: 7 years 6 months ago by KnightRider.
-
-
-
- MrT
- Preeminent Rocketeer
- Posts: 101084
- Thanks: 13484
- Web Designer/Developer
-
Please would you post your URL, superuser id and pswd in the secure tab of your post and I'll have a look for you.
You should just be able to get three level of menu to get that.
Regards, Mark. - Please search forums before posting. Please make sure your post includes the version of the CMS you are using and a link to the problem. Annotations on screenshots can also be helpful to explain problems/goals. Please use the "secure" tab for confidential information.
-
-
-
- KnightRider
- Sr. Rocketeer
- Posts: 161
- Thanks: 0
- done (thx in advance)
-
-
-
- MrT
- Preeminent Rocketeer
- Posts: 101084
- Thanks: 13484
- Web Designer/Developer
-
Ok, I've done the basics but you probably want to add some class and style things a little more. Also consider whether you want those "headings" to be just that, and not blog links in their own right.
Regards, Mark. - Please search forums before posting. Please make sure your post includes the version of the CMS you are using and a link to the problem. Annotations on screenshots can also be helpful to explain problems/goals. Please use the "secure" tab for confidential information.
-
-
-
- KnightRider
- Sr. Rocketeer
- Posts: 161
- Thanks: 0
-
Big thanks. The way it works is just fine (for my case), if the titles would be styled of course.
1 I tried to add the class g-active/g-hover/li-active/li-hover, but that didnt work. What class should I use to display the a-hover or li-hover?
2 How could I make the titles e.g. darkblue?
3 (not necessary in this case) How could I display the level1 title as a label and not as a link?
And above all: I actually can't "see" and replicate what you did to display the level1 titles and the level2 items below that.
Any hint?
Roland
-
-
-
- MrT
- Preeminent Rocketeer
- Posts: 101084
- Thanks: 13484
- Web Designer/Developer
-
You can add a class to the "parent" menu item in Gantry 5 menu editor and then you can use that to style the item with custom CSS - it makes it much easier to target that way - so add a class (call it anything you like) then I can help you style it.
To stop the "parent" item being clickable or responding to mouse hover you can use CSS and the attribute "pointer-events: none;"
All I did was move your menu items from level 3 to level 2 and then arrange them in Gantry 5 menu editor.
Regards, Mark. - Please search forums before posting. Please make sure your post includes the version of the CMS you are using and a link to the problem. Annotations on screenshots can also be helpful to explain problems/goals. Please use the "secure" tab for confidential information.
-
-
-
- KnightRider
- Sr. Rocketeer
- Posts: 161
- Thanks: 0
- I named it "g-menu-parent-title"
-
-
-
- MrT
- Preeminent Rocketeer
- Posts: 101084
- Thanks: 13484
- Web Designer/Developer
-
Use this code...
#g-navigation .g-main-nav .g-sublevel > li.g-menu-parent-title > .g-menu-item-container { background-color: darkblue; }
To create a custom CSS compatible with Gantry 5 please read this http://docs.gantry.org/gantry5/tutorials/adding-a-custom-style-sheet .
Remember to recompile CSS from base outline too.
Regards, Mark. - Please search forums before posting. Please make sure your post includes the version of the CMS you are using and a link to the problem. Annotations on screenshots can also be helpful to explain problems/goals. Please use the "secure" tab for confidential information.
-
-
-
- KnightRider
- Sr. Rocketeer
- Posts: 161
- Thanks: 0
-
almost done: it works well with the the toplevel (home) selected,
BUT at any other location in the menu, the menu-parent-title remains unchanged (white)
-
-
-
- MrT
- Preeminent Rocketeer
- Posts: 101084
- Thanks: 13484
- Web Designer/Developer
-
Why would you want to change it at the top level? That's a bad idea because the background and color of the top level menu item changes when the menu item is "active" or on "hover" - so you'd be overriding that behaviour by using your class at the top level - that's why I only gave you the CSS for the sublevel.
Nevertheless, if you really want to do it (and I recommend that you don't)...
.g-main-nav .g-toplevel > li.g-menu-item-link-parent > .g-menu-item-container > .g-menu-item-content { background-color: pink; }
Regards, Mark. - Last Edit: 7 years 6 months ago by MrT.
- Please search forums before posting. Please make sure your post includes the version of the CMS you are using and a link to the problem. Annotations on screenshots can also be helpful to explain problems/goals. Please use the "secure" tab for confidential information.
-
Time to create page: 0.093 seconds