I am adding a menu to the side of my page using Bootstrap. I want the menu to stay at the top of the page when the user scrolls past it. I have discovered affix which is in bootstrap.js. However because I am using different col sizes for the screen I am struggling to get it to stay in the right place.
I have got it to start at the right time and to make it position the top correctly but the width and the right are not working.
I am using bootstrap 3.3.
I think that I will have to use percentages of the screen width and then also do media queries in the CSS.
JS Fiddle
I have solved it.
The element with affix needs to be a child to an element with a col- class on it. You then also have to set the width in pixels for each different screen width that bootstrap recognises.
Related
i am sorry to disturb you all, but i want to understand how a certain margin responsiveness works.
As you can see on this site http://www.trade-ideas.com/about-us/ the navbar, the paragraphs, the h1, h2 and the footer maintain the same left-margin as you resize the browser window (with firefox the effect it's more clear).
It's like when the elements reach the limit of the left margin (that is mean zero), they restart just on the same distance (the same margin-left) that they where before i was starting resize my browser width.
I've noticed that the navbar included in bootstrap also has this left margin responsiveness: as i resize in width my browser's window, the navbar continue to stay in the same left-margin range, restarting every time he reach the zero margin-left.
In fact, on this bootstrap page you can find the exact same effect in all the page's elements (the navbar and the div box on the body) : http://getbootstrap.com/examples/navbar/
With firebug i've tried to search what parameter set this particular effect, but i'm not an expert, and i didn't find a solution.
So, my question is: this left-margin responsiveness it's generated by a set of #media queries instructions to a set of width? Or there is something that i'm missing?
Thank you in advance for all the help that you'll give me.
Andrew
p.s.: i noticed that on http://getbootstrap.com/examples/navbar/ if i delete "margin-left:auto; margin-right:auto;" the effect that i need doesn't show up anymore.
I tried to create a div container with that margin auto on my site, but i was not able to ricreate the effect (maybe that "margin-left-right:auto" it's just a part of the effect).
The media queries are the ones that make sure the website is responsive. The example: http://getbootstrap.com/examples/navbar/ is using media queries to set the width of the container. If you set the media queries to change when the screen width is 700px and when you make the width of the screen smaller. The media queries will register the px of the screen and when the width of the screen is equal 700px the container will change.
My site has fixed width layout. I mean i'm not using responsive layout.
So I removed bootstrap-responsive.css file.
But it looks like bootstrap has some bug in the footer background while using fixed width layout.
I mean check this snapshot.
Can someone tell me how to fix that issue?
Based on the scrollbar at the bottom, it seems that your window size is less than the page size, since you removed the responsiveness. Based on a quick test on the Bootstrap doc, I think that you can fix this by adding width:100%; to the body tag. Everything is just set to fill the item containing it and nothing else has a width set (even the body tag by default). This should stretch the page to wrap around all elements instead of just filling the window.
UPDATE: CSS should be min-width:960px. Naturally, in other instances you would want to change this minimum width value, but for the Bootstrap CSS without responsiveness, this is the base grid system width.
I'm going to create an special floating menu like this site:
http://www.just-eat.co.uk/restaurants-toscana/menu
as you can see, Categories and Your Order menus float in screen so that their position is almost always the same, and they always stick to top of screen (of course after you scroll the page down), how can I create this effect in ASP.NET? I've set my menu style position property as fixed, but in this way, my menu always has the same position, I want my menus to stick to top of screen
Not sure if ASP.NET has such feature by default. Never seen something like that in it. But it could be done easily with CSS position:fixed placed on top most div of your menu block or using plugin like this, for instance. Please note that position:fixed may cause problems in old browsers
Hello Ali you must add stylesheet in order to float your menu, but you don't have property in order to float your menu basicaly
You can keep the position of the div to position:fixed.
By doing that its position will be relative to the position to browser window and it will appear to be fixed.
Here is Sample Fiddle
More on CSS Fixed Positioning.
https://gist.github.com/2354116
If you view the above page in Chrome/Firefox then everything seems to be fine. The divs at the bottom (the two headings and the social icons) are wrapped in a container div and center without issue.
If it's viewed in Safari though then these three divs are not centered at all :/
I'm not sure why this is.... can anyone help?
Note: had to assume a lot with your design so modify anything that does not fit your original design.
First off, you are not properly containing your page elements (content, carousel, footer), you currently have multiple width containers trying to reside side-by-side and that is breaking your design in multiple places.
Your content container is width:940px, your .wrapper div is width:750px, your .paramWrapper div is width:870px, your .carousel div is width:735px. You have to pick one width and stick to it and just use margin to push content accordingly across your page. I used 860px, which is the width of the span11 class.
Next, you're modifying the bootstrap.css stylesheet directly, that means that whenever the bootstrap gets updated all of your changes will be lost if you overwrite the bootstrap stylesheet, so create a another stylesheet and put all of your custom styles there and just load it "after" the bootstrap stylesheet in your header.
Now onto your original issue, the bottom .paraWrapper div is not properly stacking because you have a width of 870px set in your container and the elements within do not add up to that width:
span3 + span3 + span2 + margin = 640px
So it was not an issue or a bug, its just your layout.
Here is a fixed version that i very quickly put up so you're going to have to modify the elements to fit your design once again: http://jsfiddle.net/rzSFa/3/, here is a demo of what it looks like.
By the way, you're using the responsive bootstrap stylesheet for naught, it is currently not doing much in your case so why even use it? You can easily modify a few media queries to support my fixed version though, but yours will not work at all because you're declaring all of your own classes with custom widths so there is no point in including it.
I am trying to understand which part of twitter bootstrap css code is responsible for the left padding whitespace in this example: http://twitter.github.com/bootstrap/examples/hero.html
but does not appear in this example: http://twitter.github.com/bootstrap/examples/starter-template.html
thanks in advance.
The first example is in a div with the class hero-unit. The hero-unit class has its padding set to 60px.
I guess, in this particular case, described above, it depends on your screen resolution. As Twitter Bootstrap uses responsive CSS, the width of the starter-template.html changes discretely, and in some cases padding is minimal. You could try changing your browser window width to see how padding (container width) changes dynamically. The same for hero.html, but as hero.html contains more content, the width in hero.html example switches earlier than in starter-template.html at the same screen resolution.