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.
Related
In Bootstrap I have a standard collapsible navigation.
When the mobile navigation is open I want to add an extra element to the top of the navigation, essentially as quick links to key areas.
I have added the below picture to illustrate my idea.
Essentially I have the Bootstrap navigation but is it feasible just to add a DIV or include a file at the correct viewport, in order to add the extra grid above the navigation.
UPDATE
So far I have the following using the advice given, I think now all that's required is to remove padding, as the navigation is in a col-xx-12.
You can use bootstrap responsive utility classes such as .hidden-xs .
This allows to hide and show the divs based on the screen dimension.
Refer here
I would like to add two icons to my collapsed bootstrap menu having them equally spaced, including the hamburger menu, and all 3 items centered. As the viewport size changes I want to keep them centered and equally spaced responsively using Bootstraps breakpoints. I have included two examples of what I'm trying to accomplish, I'm just not sure the best way to proceed. I've tried wrapping the logo and icon in the navbar-brand and adjusting it but it did not give me satisfactory results.
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?
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.