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
Related
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/
So I am working on a prosject learning twitter bootstrap but got into the problem being that the website is not actually mobile friendly and look bad on big screens.
Here is the link:
jsfiddle: http://jsfiddle.net/6LsG7/
The sticky footer also covers alot of the content.
It seems that you are not using any classes provided by bootstrap. Instead you are creating your own id's? Bootstrap has a structured framework with the use of classes such as "container", "nav", "column".
For you to obtain a responsive design you must abide by the classes pre-provided. Might I suggest you check out a WYSIWYG bootstrap layout maker such as LayoutIt.
Bootstrap comes with a grid-like architecture that will allow you to create sections in your page so that they all line up and stack appropriately. Become familiar with this first and then assign the right classes to each section. For example:
col-lg-12 is will create a section 100% wide.
col-lg-11 will create a section ~90% wide
...
col-lg-6 will create a section 50% wide
and so forth.
So to create the right placement of your divs or sections. add a row class to every section that is stackable.
If you are having two sections side-side inside this row, add a col-lg-6 to each and they will line up next to each other and on top of each on mobile.
Now, to the obvious problems that I saw right away.
Between your body tags, create a wrapper class div that will contain your page and define it's width.
Do not use so much positioning. Specially position:fixed. This is what makes things sticky and messy. You wan to make use of your margin, padding, floats, and displays properties to properly align things.
Give it a try before I hand you any code. I want to see your brain work first. Then we'll trouble shoot some more.
All I look for is a simple sidebar for a simple website. Google results have everything about sidebar except for creating a simple side bar with minimal codes. They are so confusing, Still I have no idea about how to create a side bar. Should I use aside tag or using div? There is no clear explanation. One might help me telling what way they usually use.
My default CSS is twitter bootstrap
Since you're already using Bootstrap, you could just use the container-fluid class, which should generate two columns for you - the leftmost one a sidebar. Just add some additional CSS to add a border on that column and you'll have your sidebar in at most 4 lines of CSS code.
See "Fluid Layout" here: http://twitter.github.io/bootstrap/2.3.2/scaffolding.html#layouts
you could check this link for more info http://css-tricks.com/video-screencasts/115-dont-overthink-it-grids/
depending of what the content is on your sidebar you could use if the content within the sidebar is related to the content in general the aside is a good option. If it is not the you could just add a new div and style it. Another option is to use if the aside doesn't quite fit the bill.
Tried to use twiter bootstrap
to create a top nav-bar in my master page.
http://jsfiddle.net/ZqCah/1/
I have some bugs and would appreciate some help:
1- I want to turn all my content to be rtl.
meaning My site will be the most right and register will be the most left.
2- The items are at different hights.
How can I align them to the middle of the bar?
3- I want to add an my site logo to the bar, as seen here
ask assitance for html page tabular layout
can it stick to the screen like the bar itself?
can it share the size with the bar itself?
Bootstrap now (3.3.5) supports RTL! all you have to do is replace all "left" with "right" inside bootstrap.css file (or better, directly on the "less" source files). The carousel maybe needs some tweaking, but 99% of the stuff works fine. Here's an example
If you want to create RTL website with twitter bootstrap you can use RTL version of it.
http://pyjamacoder.com/2012/02/01/twitter-bootstrap-v2-rtl-edition/
and
https://github.com/donaldducky/bootstrap-rtl
I create webpage with these
sushiant.com created with rtl version of bootstrap
You may want to explore the use of FLOAT and POSITION in your CSS. Try to separate each of your elements inside DIVs and experiment on FLOAT and POSITION properties.
For example, your number 1 question...you can put "my site" using:
<div style="float:left">my site</div>
<div style="float:right">register</div>
You can refer to this positioning tutorial http://www.barelyfitz.com/screencast/html-training/css/positioning/