I'm implementing Foundation 5 on one of my sites. I have the top bar mostly working. However, I want to be able to collapse a set of nav links into a dropdown menu at a certain breakpoint.
Basically, instead of just collapsing from the full nav to the one mobile nav dropdown, I want an intermediate step that first collapses to 2-3 links, and then only on very small screens collapses the rest of the way.
I've been looking around for how to do this and am not finding it in the documentation. Any ideas?
Related
I have a question concerning bootstrap navbar. I want the collapse menu that appears on mobile, to also appear on larger devices. Since the code is rather large, I will have to share the codepen:
code link http://codepen.io/diazabdulm/pen/KMaREN
http://codepen.io/diazabdulm/pen/KMaREN
I'm working on a website and I'm using the bootstrap framework.
I have a navbar setup, pretty "original" but I have too many items on the navbar. Therefor I have 2 lines of navbar-items.
What I want is that the navbar sets as many items on 1 line and if there is not enough width to set them all that it show an dropdown with "more" and that the remaining items are under the "dropdown".
First, I suggest if you really have so many items in a navigation, you probably need a vertical nav menu instead of horizontal navbar.
Then, If you really want what you described, you can't do it with bootstrap out of box, you need write your own "dynamic" dropdown by yourself.
What you can do is listen to window.resize event,
detect the responsive navbar width and calculate how many items in the tail should be put into a dropdown list. Then do that in javascript.
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!
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
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/
I tried to follow this tutorial to create an affix for my site, but there are a few things that are off and I'm having trouble figuring out why.
When scrolling, the width of the ul changes slightly, from 165-166px
After scrolling down, the affix doesn't stay at the top but remains fixed near the bottom of the page
The research li sometimes doesn't get highlighted at all
Here's my code: JSBin
What am I doing wrong?
From the bootstrap docs:
The affix plugin toggles between three classes, each representing a particular state: .affix, .affix-top, and .affix-bottom. You must provide the styles for these classes yourself (independent of this plugin) to handle the actual positions.
That should fix your issues with 1 and 2. With issue number 3, if you scroll too fast it will skip it because it is so close to the next anchor when compared with the height of the page. You could increase the spacing or add more content.
I'm having an issue with the Twitter Bootstrap template. At http://www.tjprizbiz.com/new/publications.html, I am trying to have my side bar nav jump to each different project, but since all my projects are contained in a span9, anytime I click a side nav bar option it just goes to the top of my container span9 projects column. I know I need to fix my href of the sidebar nav buttons but I don't know how to make it search within the span9 section id's. Any Ideas?
PS: I cant get my code to paste but you can get the page source # www.tjprizbiz.com/new/publications.html