Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

How to align dropdown menu to left like Bootstrap's "dropdown-menu-right"? #382

Open
sptutusukanta opened this issue Jun 22, 2018 · 6 comments

Comments

@sptutusukanta
Copy link

I needed to align the dropdown menu to the right, by default it is on the left.
As with bootstrap, we use .dropdown-menu-right class along with .dropdown-menu to align dropdown menu.

I tried to use it in menu class in admin panel, as expected it is populating in the parent <li> tag.
Is there any other way to put this class from admin panel?

Here is the expected output as per Bootstrap's documentation:

<div class="btn-group">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Right-aligned menu
  </button>
  <div class="dropdown-menu dropdown-menu-right">
    <button class="dropdown-item" type="button">Action</button>
    <button class="dropdown-item" type="button">Another action</button>
    <button class="dropdown-item" type="button">Something else here</button>
  </div>
</div>

Here is what I got add the class to menu from admin:

<li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-49" class="dropdown-menu-right menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children dropdown menu-item-49 nav-item">
    <a title="About" href="#" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" class="dropdown-toggle nav-link" id="menu-item-dropdown-49">About</a>
    <ul class="dropdown-menu" aria-labelledby="menu-item-dropdown-49" role="menu">
	<li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-55" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-55 nav-item"><a title="About us" href="http://localhost:9090/about-us/" class="dropdown-item">About us</a></li>
	<li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-54" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-54 nav-item"><a title="Privacy Policy" href="http://localhost:9090/about-us/privacy-policy/" class="dropdown-item">Privacy Policy</a></li>
	<li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-53" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-53 nav-item"><a title="Return Policy" href="http://localhost:9090/about-us/return-policy/" class="dropdown-item">Return Policy</a></li>
    </ul>
</li>

This is clear here, the class .dropdown-menu-right is placed to the parent <li> tag, not with the <ul> dropdown.

@pattonwebz pattonwebz self-assigned this Jun 22, 2018
@LouisMilotte
Copy link

navigation alignment happens in the UL element, where are your classes for that element?

@sptutusukanta
Copy link
Author

Yes, I know it is required to put the alignment class in the <ul> element. But, how can I put that?
I placed it in the class field of menu in WP's menu editor. But, it renders inside parent <li>.

WP Menu Editor

My expection is to get something like this:

<li ... class=" ... dropdown ... ">
    <ul class="dropdown-menu dropdown-menu-right" ... >
        <li>...</li>
        <li>...</li>
        ...
    </ul>
</li>

But I'm geting it like this:

<li ... class="dropdown-menu-right ... dropdown ... ">
    <ul class="dropdown-menu" ... >
        <li>...</li>
        <li>...</li>
        ...
    </ul>
</li>

You may check my previous post to see the full output. Here I've just pointed the main elements.

How can I achieve this from WP's menu editor?
Is it supported? Or any workaround is strongly appreciated.

@LouisMilotte
Copy link

I just double checked your menu HTML, to clarify are you using Bootstrap 3? That looks like a Bootstrap 3 as bootstrap 4 containers are now div's with a list of the anchors.

https://getbootstrap.com/docs/4.0/components/navs/#using-dropdowns

The current walker is BS4, which may be why you're having a problem.

There's a BSWalker v3 branch in the branch drop-down, see if that fixes your problem.

@earvinpiamonte
Copy link

@sptutusukanta My solution is by using Sass or CSS. On my case, I'm extending the class .dropdown-menu-right whenever I have a .navbar-nav.ml-auto.

.navbar-nav.ml-auto{
	.dropdown-menu{
		@extend .dropdown-menu-right;
	}
}

@zethzeth
Copy link
Contributor

I had the same problem. Would be awesome if there was a way to tell the navwalker, if a dropdown-menu-right or dropdown-menu-left is wanted. But I must admit that I can't see where that would be declared.

I tried @earvinpiamonte 's suggestion, but couldn't get it to work. I solved it by doing this (in my SASS/CSS):

.dropdown-menu {
  left: auto;
  right: 0;
}

@pattonwebz
Copy link
Member

pattonwebz commented Feb 27, 2019

I will be looking at enabling this with an easier method in the upcoming version of the walker (I hope to be working on it over the next 3 or 4 weeks).

EDIT: $classes is passed as an array of values, not as a string like I originally posted. I have updated the code below.

For the moment one way to go about doing this would be to use the nav_menu_submenu_css_class, which will receive a string array of classes in it's first parameter. You can use that filter to add the class for the sidedness of choice.

function filter_add_dropdown_side_right( $classes ) {
	$classes[] = 'dropdown-menu-right';
}
add_filter( 'nav_menu_submenu_css_class', 'filter_add_dropdown_side_right' );

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

6 participants