How to make top-nav-sub-menu display horizontally

[candeelh]

I have searched the forum (and the Flare help) and could not find any information on what I am attempting to accomplish. The Marketing Group at the company I am contracting for has sent me a design that I am having great difficulty implementing because their design is not the norm with the Flare out-of-the-box top-nav responsive skin.

Flare version : 2018 r2

I am outputting to an HTML 5 (responsive) top-nav layout using the standard top-nav responsive skin. The first level menu is of course displayed horizontally and the sub-menus (levels 2, 3, etc.) are displayed vertically. What I need to do is change the display of the sub-menus from vertical to horizontal, have their backgrounds span the entire width of the header, and add a border at the bottom of each background. I realize that this design may possibly cause issues with multiple sub-menu levels, but we are only using the top level and one sub-menu level in the design, so I'm hoping that this can be done somehow. Does anyone know how this can be implemented? I have to have this design finished and working by the end of this week (12/14/2018), so I'm under the gun to get this done, if it is at all possible. I've seen it done in the past using older versions of Flare (prior to the responsive layout design) and sort of had a clue back then, but I have no clue how to implement it now with the new elements they are using based on Foundation 2.6.3 - in fact with viewing the code, I can't even really tell what elements I need to change, much less how to change them!

Please HELP - I'm desperate at this point!

[Jbleasdale]

Can you post some images of the design or what you have seen previously?

That would help us elaborate further as to the possibilities.

[DaveMags]

Hi there - sounds like this might be too late to matter, but I was able to make that first sub menu display the items horizontally, full width, and with the styling you mentioned by applying some CSS to a couple of the nested ul > li structures Flare builds for that menu. Not sure if something like this is what you're going for, but maybe it would be a start?

Horizontal Menu.png

I didn't test this much, but that worked as expected at different browser widths, when scrolling up and down the page, etc. In my example, you'd probably want to space our those Menu Items 1, 2, etc. to fill the menu, etc, but I didn't go that far. Although adding some margins on the second bit of code below would do it I think. Here's the code I used to get this:

Code: Select all

ul.navigation > li.has-children > ul.sub-menu > li.has-children 
{
    display: inline-block;
}

ul.navigation > li.has-children > ul.sub-menu  
{
    border-bottom: 4px solid orange;
    width: 100%;
    position: fixed;
}

Hope this still helps or gets you closer.