DMXzone Bootstrap 3 Navigation Support Product Page


Dropdown width & position

Asked 22 Apr 2015 21:17:38
has this question
22 Apr 2015 21:17:38 David Woolley posted:
Is it possible to change the width & position of the dropdowns in relation to the parent main menu item in Bootstrap 3 Navigation?

I see there's a min-width = 160px set in class .dropdown-menu in bootstrap.css

Seems to work by putting for example:

.dropdown-menu { min-width: 100px; }

in my custom.css file which is just after the link to the bootstrap.css in the <head>

But I'm not sure how to position the dropdown menu so it lines up with the left border of the parent menu item, when the navbar is aligned to the right of the page.

If the navbar is aligned to the left of the page, the dropdowns line up with the left border of the parent as they should. Seems to act like a mirror image when navbar is on the right.

Any suggestions?


Replied 23 Apr 2015 07:55:59
23 Apr 2015 07:55:59 Teodor Kuduschiev replied:
Hello David,
When the menu is right aligned, it does not make sense to have the dropdown menu aligned to the left border of the parent menu item. Example - if your last menu has a dropdown, and it is aligned to the left, the sub-menu will go off the screen (which is kind of not good UX)

While when it is right aligned, everything is okay. It is not strange that Bootstrap guys created it this way:
Replied 23 Apr 2015 08:20:25
23 Apr 2015 08:20:25 David Woolley replied:
Hi Teodor - the site has not been published yet. I'll do a bit more work on it, then upload to a testing domain so you can take a look. In the meantime I could send you a screenshot of the page with the navbar dropdown showing.
Replied 23 Apr 2015 08:23:24
23 Apr 2015 08:23:24 Teodor Kuduschiev replied:
Hi David, please check my reply above.
Replied 23 Apr 2015 08:54:33
23 Apr 2015 08:54:33 David Woolley replied:
That makes perfect sense! I should have thought a bit further ...
Thanks a lot
Replied 30 Dec 2016 18:51:47
30 Dec 2016 18:51:47 Robson Santana replied:
<ul class="dropdown-menu">
<li><a href="#">Lutas</a></li>
<li><a href="#">Futebol</a></li>
<li><a href="#">Games</a></li>

Reply to this topic