Menu icon Foundation
Right aligned drop down menu in Foundation 6

Hi there,

I recently switched from Bootstrap to Foundation for a new project and generally I am quite happy, but I am facing a problem I can't seem to resolve without a lot of own CSS code.
All drop down menus seem to be left aligned, so for example when I have a button or link, that is right-aligned or in the right top-bar, the drop down gets shifted to the left, which doesn't look great and also doesn't work properly.

I found some solutions for earlier versions of Foundation, but can't seem to get them to work for Foundation 6.

I hope someone has a solution for this problem and can help me to solve it asap.

Many thanks,
Jacob

Drop Down Menusrightalignment

Hi there,

I recently switched from Bootstrap to Foundation for a new project and generally I am quite happy, but I am facing a problem I can't seem to resolve without a lot of own CSS code.
All drop down menus seem to be left aligned, so for example when I have a button or link, that is right-aligned or in the right top-bar, the drop down gets shifted to the left, which doesn't look great and also doesn't work properly.

I found some solutions for earlier versions of Foundation, but can't seem to get them to work for Foundation 6.

I hope someone has a solution for this problem and can help me to solve it asap.

Many thanks,
Jacob

Jacob Brooks over 3 years ago

Do you mind to share your top-bar code? Might be able to help by seeing how you are coding everything out.

Jacob Herper over 3 years ago

This is my right top-bar code:

      <div class="top-bar-right">
        <ul class="dropdown menu" data-dropdown-menu>
          <li><a href="{{ url('settings') }}" class="iconlink" data-tooltip aria-haspopup="true" data-disable-hover='false' tabindex=1 title="Settings"><i class="fa fa-cog"></i></a></li>
          <li><a href="{{ url('messages') }}" class="iconlink" data-tooltip aria-haspopup="true" data-disable-hover='false' tabindex=1 title="Messages"><i class="fa fa-envelope"></i><sup class="alert label">2</sup></a></li>
          <li>
            <a href="#" class="iconlink" data-tooltip aria-haspopup="true" data-disable-hover='false' tabindex=1 title="Logout"><i class="fa fa-sign-out"></i></a>
            <ul class="dropdown menu" data-dropdown-menu>
              <li><a href="#">Link 1</a></li>
              <li><a href="#">Link 2</a></li>
              <li><a href="{{ url('logout') }}">Logout</a></li>
            </ul>
          </li>
          <li>{{ trans('global.welcome') }}, {{ $user->firstname }}</li>
        </ul>
      </div>

Jacob Brooks over 3 years ago

Sorry to ask, but do you have a screen shot so I can visualize your problem. I have added your code to a site of mine (had to change your {{url strings}}, but I think everything is working. I wanted to see if what my results look like are similar to your problem.

Thanks!

Jacob Herper over 3 years ago

I can't seem to insert a picture into a reply, so I uploaded the screenshot to my ftp: http://pcserve.net/ftp/ul/dropdown.png

It's not styled yet, but you get the idea. As there is no space to the right, the menu gets shifted to the left and disappears before you can reach it with your mouse.
Also I wanted the menu only to appear if you click on the icon, but clickable drop downs only seem to work with buttons?

Jacob Brooks over 3 years ago

Thanks for adding a picture. When I added your code to my site, the dropdown did not align to the other side as yours has. It was aligned with the dropdown that it was associated with. I will troubleshoot this a little more, but I am wondering if another style is causing issues. Do you happen to have a live link where I could inspect the code?

To be honest I havent made a clickable dropdown menu yet with F6, but from looking at the docs it seems like messing with the Dropdown Plugin Options might be of help for the click events. The link is: http://foundation.zurb.com/sites/docs/dropdown-menu.html#js-options

Jacob Herper over 3 years ago

I added my top-bar to a fresh foundation 6 setup. Now it's not exactly the same, but the menu is now outside of the browser view, which brings me back to my original question: how can I align the menu to the right, instead of to the left of the parent element?

http://pcserve.net/ftp/ul/foundation-6/index.html

Jacob Brooks over 3 years ago

Thanks for sharing the link. I was looking at the code and noticed that the default for a non-vertical dropdown menu is to be the opposite of what you need. In my inspect element it says its on line 3384 of foundation.css, but to over ride that I would add the following code to your own styles:

.dropdown.menu:not(.vertical) .is-dropdown-submenu.first-sub {
    top: 100%;
    left: auto;
    right: 0;
}

Let me know if that helps.

Jacob

Jacob Herper over 3 years ago

Thanks, that resolved the problem.

Do you by any chance have a solution for the click event, rather than opening the drop down on hover?
I tried data-disable-hover='true', data-hover="false" and data-click-open="true", but they don't seem to do anything.

Many thanks!

Jacob Brooks over 3 years ago

For some reason I cant get it to work with the data-options as you have tried so i went straight to the source.

project folder > bower_components > foundation-sites > js > foundation.dropdownMenu.js and changed the code to be:

disableHover: true; <-- line 46
clickOpen: true; <-- line 64

**after making these changes I had to stop my project completely and do a npm start (command line) before the changes were recognized. Simply saving them and letting browser-sync wouldnt update my code.

I assume there is a better way to do this, but for now thats what I got working.

Let me know if that works.

Jacob

Adrian Preda over 3 years ago

Had the same issue - the solution of Jacob Brooks solved the problem.

 

Thank you.

Jacob Brooks over 3 years ago

Glad I could help @Adrian!

Rahim Premji over 3 years ago

Having similar issues.

Can't figure out how to get the last li to right align.

Jacob... your solution works if I assign a specific id to the li. Otherwise the standard classes are applied through the js code.

Additionally the submenus continue to open to the right.

Setting the class to open-left has no effect as the javascript code overwrites it.

Sample Code

Whats the simplest way of getting any <li> to have the following <ul> right align?

How can we get those <ul> to open-left?

The dirty fix is individual id's but that beats the purpose of using a framework.

 Corrected error in link

Jarryd Fillmore over 3 years ago

Similar issues as well.

Rahim Premji over 3 years ago

The Foundation.Dropdown plugin ensures that all top-bar-left plugins open to the right and all top-bar-right plugins open to the left. While this may be desirable there should be some provision for overriding this behaviour.

Will have to study how exactly to modify / replace plugins.  The code should be pretty straight forward. If the element contains a particular user defined class then the classes added by the Foundation.js code are removed and the desired classes are added.

However Foundation 6 is supposed to have colliision detection out of the box. Either it's not working properly or we are doing something wrong.