Menu icon Foundation
Top Bar - Horizontal Submenu

When viewed on a large screen I'm wanting to run the Top Bar submenu horizontally, with the content staying within the constraints of the nav but displaying a full width bar as per the 'contain-to-grid' class.

I want the menu to revert back to the vertical menu and behave as default for smaller devices.

I have tried a few things with the CSS but to no avail.

Thanks.

Horizontal subnav

topbarnavhas-dropdowntop-barcontain-to-grid

When viewed on a large screen I'm wanting to run the Top Bar submenu horizontally, with the content staying within the constraints of the nav but displaying a full width bar as per the 'contain-to-grid' class.

I want the menu to revert back to the vertical menu and behave as default for smaller devices.

I have tried a few things with the CSS but to no avail.

Thanks.

Horizontal subnav
Lyn almost 3 years ago

Hey there Glen,

Could you provide us with 2 different examples of what you'd like to achieve because I unfortunatly can't figure it out ?

Regards,

Lyn.

Glen almost 3 years ago

Thanks Lyn. Do the 3 states of play above help? I have tried tweaking .dropdown in places but think I might be missing the point somewhere!

Lyn almost 3 years ago

Hey Glen,

I think I understand what you want to do. I'll take a look at how you can manage that easily later today and I'll keep you in touch (maybe someone will have time to solve this before I do though, who knows !).

Kind regards,

Lyn.

Glen over 2 years ago

Hi Lyn,

Did you get a chance to take a look at this?

Cheers, Glen

Lyn over 2 years ago

Hey there Glen,

I'm sorry, I knew I forgot something... That's this silly forum's fault anyway, it isn't user friendly at all and stupid undealt-with bot keep pushing old posts to the top.

Anyway here is what I came up with real quick, it's pretty dirty, should need more work, but is only CSS override. Here is the jsfiddle for what's coming : http://jsfiddle.net/W4e7q/

Just add the class mySpecialDropdown-left or mySpecialDropdown-right to your dropdowns depending on which side of the topbar they are and use this little CSS :

@media only screen and (min-width: 64em) {
    [class*="mySpecialDropdown-"] {
        position: static !important;
    }
    [class*="mySpecialDropdown-"] > a:after {
        position: relative !important;
        display: inline-block !important;
        margin: 0 !important;
        padding: 0 !important;
        top: 4px !important;
        left: 4px !important;
    }
    [class*="mySpecialDropdown-"] > ul {
        width: 100% !important;
        background: none repeat scroll 0% 0% #333 !important;
    }
    [class*="mySpecialDropdown-"] > ul > li {
        display: inline-block !important;
        width: auto !important;
    }
    [class*="mySpecialDropdown-"] > ul > li:first-child {
        display: none !important;
    }
    .mySpecialDropdown-right > ul > li {
        float: right !important;
    }
}

In this example I made the breakpoint at 64em, for medium device as the top-bar breaks for small anyway.

Kind regards and sorry I forgot about what you asked :(

Lyn.

Glen over 2 years ago

That's great Lyn thank you and no problem, another project has been getting in the way of this one!

I'll be taking a closer look today.

Thanks again.

banacan about 2 years ago

I know this is an old thread, but I'm hoping I might get some help here.

I have implemented Lyn's suggestion and it all works great, except...

The li elements that are floated right end up reversing order. How can the right floated elements align right but in the correct order. I have tried adding text-align right to the ul, with no effect. Any suggestions?

banacan about 2 years ago

Just wanted to share how I solved the problem of the reverse order of li elements floated right in topbar. I tried many things including adding a div.right to the nav menu, and text-align:right to the ul, but they all resulted in further problems or had no effect. My solution was to reverse the order of the ul.dropdown li elements in the DOM and make that effective based on the topbar breakpoint setting. Here's what I added to my app.js:

 if (window.innerWidth > 896) {
$(".top-bar-section .mySpecialDropdown-right > ul > li").each(function() {
  $(this).prependTo($(this).parent());
});
}

I have my top-bar breakpoint for desktop set at $large-up which is equivalent to 896px. I also had to hide some of the elements that are generated by topbar.js using CSS.

Thanks again to Lyn for the great suggestion and the helpful pen.

BULB 6 days ago

Hello,

 

I am bumping this up as I have followed these steps but my drop down disappears really quickly. Also, for some reason while using the walker class my navigation doesnt work using mobile? 

 

Any ideas?