2

I know that this is not my "personal helpdesk", but am looking for a simple solution to implement a navbar where navbar items dissapear and eventually turns into a dropdown (or left side navbar) as the browser is resized horizontally like http://mashable.com.

I am currently using http://www.bublinastudio.com/flattybs3/ which is built on top of Bootstrap 3. I have been looking for hours but all I can find is "how to put dropdowns in your navigation bar". Nobody explains how you can show/hide navbar items based on browser width and how to prioritise your items, indicating which should disappear first.

If any of you could please just redirect me to some useful sites with more information about this I would be most grateful!

Magnanimity
  • 1,293
  • 8
  • 24
  • 44

2 Answers2

2

Bootstrap 4 (updated 2019)

Here is a newer option for Bootstrap 4.1. This will collapse the overflowing extra navbar items into a right side dropdown list. It progressively moves the navbar items to the dropdown.

https://www.codeply.com/go/IETSah3bFG

Bootstrap 3 (original answer)

If I understand your question, you're looking to have the navbar links collapse to the "More" dropdown on the right when there is not enough width. This would require customization to the CSS, and some jQuery to monitor the width of the navbar and collapse the links overflowing accordingly...

Here is a working example: http://bootply.com/128897

Carol Skelly
  • 351,302
  • 90
  • 710
  • 624
1

You could look up information about both Media Queries and also :nth-child() selector. The should help you along with what you are hoping to do!

nth-child()
http://css-tricks.com/how-nth-child-works/

http://api.jquery.com/nth-child-selector/

Media Queries
http://css-tricks.com/css-media-queries/

damienoneill2001
  • 498
  • 7
  • 17