I have been using bootstrap's navbar css. Below this navbar I have a which I want to put below the navbar. However, why does it always start at the top and not below the navbar? I've looked at twitter bootstrap's example and they were able to have a positioned below the fixed navbar. Here's the link to my website. Any idea why this is?
Here's the html that I have now:
<div class="navbar navbar-fixed-top">
</div>
<section id="main">
</section>
The fixed navbar will overlay your other content, unless you add
padding to the top of the <body>. Try out your own values or use
our snippet below. Tip: By default, the navbar is 50px high.
body { padding-top: 70px; }
Make sure to include this after the core Bootstrap CSS.
ref: http://getbootstrap.com/components/#navbar-fixed-top
I dont know why they dont put this note in bootstrap 2.3.2 but this is what you want. :)
Yesterday I fix my navbar and set the container as following
.maincontainer{ padding-top: 75px; }
75 pixel is enough and doesn't affect Bootstrap on Responsive design in Tablet and Mobile. Work perfect everywhere :)
Related
I'm trying to implement a UI where the navigation bar on the LHS is fixed and the content window is responsive. The following is my implementation:
<div style="width: 15%; float: left; display: inline;>
<nav class="navbar navbar-inverse navbar-left" style="">
NAVIGATION CONTENT HERE (FIXED)
</nav>
</div>
<div style="width: 85%; float: right; display: inline;">
DESIRED RESPONSIVE CONTENT HERE
</div>
how can this be achieved?
I tried using bootstrap classes by adding a container on the top and adding column classes to both the div's. The div on the right overlaps the navbar div when the browser window size is reduced.
Are you sure you want to implement such a design? Left-sidebar with fixed width and the content with variable width? It would be much easier and faster to just use bootstrap table grid system. Not to mention that it would automatically work on all devices and resolution, whereas your design would only make sense on some particular resolutions.
used the following way to fix my side navbar:
https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_sidenav_fixed
fixed the navbar with 15% width.
added bootstrap classes to the content on the RHS.
I have made a Horizontal Scrolling webpage.
But i have a problem with my navbar which is vertically.
When I am on the Home-Screen and then go to another view, everything seems to be perfect, but when I go back, for example from "kontakt" to "über mich" the content is under the navbar.
I have tried to put in a margin-right: -60px; and a padding-right: -60px; But that isn't working.
You can watch the project on jsfiddle:
https://jsfiddle.net/615b216e/1/
Is there a way to get these Pages in the right position.
The problem is your navigation. You have a navigation ID outside you're navigation class. I put them together in the div.
https://jsfiddle.net/615b216e/3/
<div class="nav" id="navigation">
Hope this helps you
When the screen width < 768px, I can't figure out why my navbar doesn't scroll although I have set it to .navbar-static-top, it still looks like .navbar-fixed-top.
See my Plunker, the code is in file dashborad.html line 21
<nav class="nav navbar navbar-static-top navbar-inverse col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 ">
http://plnkr.co/edit/Vlx47gPERIJ8ELGEOWZm?p=preview
And there is mycss.css and main.css file, I don't know which part of my script cause that probelm.
I'm quite sure it has something to do with that dashboard-page class, the navbar is trapped inside that div which is always 100% of the screen, so it gives the illusion that the navbar is always fixed on top.
What's the purpose of this class? Is it really necessary?
Remove both .dashboard-page .main in line 6997 in main.css and .dashboard-page class, plan your page differently, the main element doesn't have to be positioned absolute, unless it's a popup or some kind of a div on top of everything. Remove these classes, re-structure your html and you'll be good to go!
How do i keep my footer at the bottom of the page even when I click the toggle for the sidebar? The footer I made is at the bottom but whenever i click the sidebar toggle it goes up like this
Im using bootstrap btw.
This is how I did it. I'm not entirely happy with the outcome as the height of the footer is a fixed number (I would prefer if the height could be dynamic).
<div id="wrapper">
All your contents, div, nav etc go in here
<div id="push"></div> <!--add the push div here -->
</div>
<footer>
</footer>
The CSS:
#push, footer {
height:100px; /*or whatever height you need */
}
I'm not sure what your codes look like, so I can only hope that this helps.
I think you are looking for this: http://getbootstrap.com/2.3.2/examples/sticky-footer.html
It is a plugin which makes your footer sticky. You can find the code in the examples folder of your bootstrap download.
So, I'm working on my first website with Twitter Bootstrap. Works great.
Now I'm trying to get the website responsive.
When I make the screen smaller(Too simulate a mobile phone screen), the logo gets bigger and bigger, until it gets too the smallest page size(I geuss?), then it jumps too a smaller size and it stays there.
Does anyone have an idea how to fix this? I want it too stay the same size...
HTML:
<div id="header" class="container">
<img id="logo" class="span2 offset1" src="img/logo.png" title="Hostellerie De Hamert">
<h1 id="deHamert" class="text-center span6">Hostellerie De Hamert</h1>
</div>
CSS:#logo{
background-color: transparent;
max-width: none;
}
And of course, bootstrap integrated.
You set the "span2" class on the image element. When using Bootstraps responsive library all "spans" will stack on top of each other instead of float from a certain screen width. I suggest you simply set the width and height of #logo to a static value.
http://jsfiddle.net/pC2xd/
Try removing the width: 100px; height: 100px to see what happens without these static values.
maybe you should try class='container-fluid'.
refer here: http://twitter.github.io/bootstrap/scaffolding.html#responsive