Menu icon Foundation
Top Bar Multi-Level submenus (F6)

My topbar is almost complete thanks to the start given by the by the building block (Top Bar with Off Canvas Nav) but I am having a couple different customization issues that I can't quite figure out. I took the basic toolbar that Brian Tan set up and replaced the search field with additional dropdown menus. This creates a few issues and then there are other customizing issues that are just my preferences. I searched around for other examples of F6 topbar menus but didn't find anything that would help me.

1) I need a top bar with multi level sub menus. For example, there might be a topbar item called SUPPORT and a submenu called BY PRODUCT with a further submenu for the various software titles we sell. I tried just copying and nesting what I had but it doesn't work for some reason.

2) Right top bar menus are opening off screen. What command would I use to have the right menus open towards the center of the screen rather than off screen.

As always, I've read through all the SASS code and can't find the exact item needed to adjust these items or to set up the multi level top bar. Does anyone have any working examples to show me? I tend to break everything when I start hacking around. :D

I'm using F6 and SASS

Thanks so much!

F6submenusdropdown menu

My topbar is almost complete thanks to the start given by the by the building block (Top Bar with Off Canvas Nav) but I am having a couple different customization issues that I can't quite figure out. I took the basic toolbar that Brian Tan set up and replaced the search field with additional dropdown menus. This creates a few issues and then there are other customizing issues that are just my preferences. I searched around for other examples of F6 topbar menus but didn't find anything that would help me.

1) I need a top bar with multi level sub menus. For example, there might be a topbar item called SUPPORT and a submenu called BY PRODUCT with a further submenu for the various software titles we sell. I tried just copying and nesting what I had but it doesn't work for some reason.

2) Right top bar menus are opening off screen. What command would I use to have the right menus open towards the center of the screen rather than off screen.

As always, I've read through all the SASS code and can't find the exact item needed to adjust these items or to set up the multi level top bar. Does anyone have any working examples to show me? I tend to break everything when I start hacking around. :D

I'm using F6 and SASS

Thanks so much!

Rafi Benkual over 3 years ago

Sounds pretty straight forward. Have an example of what you've started?

Here is a blank codepen:
http://codepen.io/rafibomb/pen/wMEdpM

Lisa Lisa over 3 years ago

Rafi,

Thanks for the link. I haven't used codepen before - pretty slick! Makes it much easier to test things and I don't have to break my real code. :D

I was able to get the sublevel menu working but still have the following issues.

1) From the top bar the menu on the right opens so that the edge of the dropdown menu aligns with the left side of the description. See "Community" menu item and how the very right of the sub menu gets cut off.

2) The sub menu under Support > By Product starts to open to the right but then it figures out there isn't room and bounces to the left. Would like to just tell it to start at the left instead of that? Also on the same issue - is there a variable to have the arrow in front of the description since the 3rd level menu items are opening to the left. For example

        Support
        < By Product

Lisa Lisa over 3 years ago

Rafi - Any help with the menu opening off screen on right top bar menus? Is there something I need to set differently?

  • Lisa

Rafi Benkual about 1 year ago

We'd really need to see the example. Can you paste it into the codepen I linked above, fork it and share the url here?