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/
Related
Introduction to clearify the task
I have a Navbar on the left side of my page. It has two levels for Items. When it's displayed in a small device, only the icons of the first level are shown. If you hover over it a dropdown of sub-items wil be shown on the right side of the bar. So far so good.
When the user uses a normal device the first-level-items should be displayed as dropdown-headers and the sub-items should expand under their parent-items on click. So I planned to set the sub-items-container under the main-items with height: 0px; and exband it with javascript-onclick and a css transition.
But as you can see the sub-items are hovering over the main item.
Question
How can i ensure that the subitemlist is between the main-items and not over it?
Additionally the solution shouldn't destroy the responsivness.
Note: I really want to make my own navbar, so using Bootstrap is not an option. Also i'm sorry if the code is not the best, it's the first try.
Code
I have put the whole thing in a jsfiddle
you cant put it in sidebaritem you have to put it below it
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'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.
from couple of hours I try figureout how vertical drop down works. Maybe somebody will be so nice and explain my what Iam doing wrong.
I would like to achive vertical dropdown menu like is here.
When you click on eg 'UI Features' the sub menu roll down and move other elements down.
I tried couple of solutions but it still doesnt work. My dropdown appear above other elements.
Here is what I achived Codeply
Ps: I using Bootstrap v3.3.2
Use Bootstrap collapse button component
You can look at this question, and try the code user post in his question, the code works better, you can modify it according to your need..
1) Responsive Sidebar in twitter bootstrap 3.x
2) left sidebar in twitter bootstrap
The link 2 will also help you...
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.