Menu icon Foundation
Center dropdown

Hi community,

Do you know if it's possible to center the dropdown ?

Actually, my submenu is positioning to the left, but i would like center this :)

Thank you !

foundation dropdow

Hi community,

Do you know if it's possible to center the dropdown ?

Actually, my submenu is positioning to the left, but i would like center this :)

Thank you !

Stéphane Richin almost 5 years ago

No idea ? :(

Stéphane Richin almost 5 years ago

Up :)

Kevin Keenan over 4 years ago

Hello,

I was actually having the same problem with one drop down being centered, but if I had another dropdown being centered on the same page, it would be all over the place. I was able to fix it this way, I hope it helps. I made my own js file and added the following code:

$(function () {
Foundation.libs.dropdown.css = function (dropdown, target) {

    this.clear_idx();


    var left_offset = '2.5%',
        adjusted_Offset = (target.width() - dropdown.width()) / 2,
        expanded = target.width() > dropdown.width(),
        ratio = dropdown.width() / target.width();



    if (ratio < 1) {
        left_offset = adjusted_Offset;
    }


    if (this.small() || expanded) {

        var p = this.dirs.bottom.call(dropdown, target);
        dropdown.attr('style', '').removeClass('drop-left drop-right drop-top').css({
            position: 'absolute',
            width: '95%',
            'max-width': 'none',
            top: p.top
        });



        dropdown.css(Foundation.rtl ? 'right' : 'left', left_offset);

    }



    else {
        var settings = target.data(this.attr_name(true) + '-init') || this.settings;

        this.style(dropdown, target, settings);
    }

    return dropdown;
};

Foundation.libs.dropdown.dirs.bottom = function (t, s) {

    var self = Foundation.libs.dropdown,
                p = self.dirs._base.call(this, t),
                pip_offset_base = (t.outerWidth() / 2) - 8,
                newOffset = (this.outerWidth() / 2) - 8,
                pip_ratio = pip_offset_base / t.outerWidth();


    if ((pip_ratio < 0.468) && t.hasClass('medium success dropdown')) {

        pip_offset_base += 9;

        self.adjust_pip(pip_offset_base, p);

    }

    if ((t.outerWidth() > this.outerWidth())) {

        self.adjust_pip(newOffset, p);

    }

    if ((t.outerWidth() < this.outerWidth())) {

        self.adjust_pip(pip_offset_base, p);
    }

    if (self.rtl) {
        return { left: p.left - this.outerWidth() + t.outerWidth(), top: p.top + t.outerHeight() };
    }

    return {
        left: p.left, top: p.top + t.outerHeight()

    };

};

});
```Javascript

Ricky about 4 years ago

This is my solution.

http://codepen.io/anon/pen/vOWQEO

Still trying to figure out the pip position. I'd like that centred too.