so I made a navbar and I have carousel slider, I can't put the navbar on top of it (not fixed) I don't need the navbar to take space
here's an example of what I'm talking about: http://demo.designshopify.com/html_lavie/lavie_resturant/index.html
I tried to change the css to:
.navbar {
position: absolute;
z-index:1;
width: 100%;
text-align: center;
}
but still the navbar not on top..
Simple just add the class
navbar-static-top
along with the navbar class,
I think You should read the bootstrap docs http://getbootstrap.com/getting-started/
If you don't want the navbar to take up space, and want it to overlay the content, use the fixed navbar..
navbar-fixed-top
http://www.codeply.com/go/xp2fY6sVHP
Related
So I've got this problem that my jumbotron goes under the navbar and I want to put it just below with some padding between them.
Here is my code: https://codepaste.net/ditsxf
This is how it looks like
Try adding this to your .css file:
body {
padding-top: 50px;
}
Or whatever the height of the nav bar is.
The classes from a bootstrap added a position: fixed; to your navbar. It means, that your navbar is always visible at the top of your screen all the time, even when you are scrolling down.
There are 2 ways to fix this:
Remove .navbar-fixed-top class from your nav component, but then you won't see your navbar at the top when you scroll down.
Add some margin-top to your container element.
I am having difficulties making the vertical navigation menu to go all the way down to the footer of the page. I tried fiddling with it, but the closest i got is me setting a specific height for the .navbar, and that doesn't help me, since I want it to be responsive.
.navbar {
border: 0px;
text-align: center;
border-radius: 0px;
background-color: #F2E9E1;
}
I am guessing it has something to do with the navbar class.
Here is the entire code: https://jsfiddle.net/u3hf1jht/1/
I'm not sure what you mean by you wanting it to go all the way down to the footer? You could just set the height of the nav to 100% of the page height, if you want it to fill your entire page.
ul.nav {
height:100vh;
}
Just had a glance at your snippet of code, it seems you've stacked in navs into navbars, they are two different components in Bootstrap. I'd take another look at http://getbootstrap.com/components/#nav.
Additionally take a look at http://getbootstrap.com/javascript/#affix for positioning your navigation. The actual bootstrap side navigation is a visible example of this in action.
I have a page, where I use a full-screen bootstrap carousel for sliding images and a navbar at the top of the page (not fixed).
Now there should be a logo inside the navbar, that overlaps it's height at the bottom and therefore overlaps the carousel.
My problem is that the logo pokes out of the navbar, leading to images in the carousel being slid down.
See for yourself at http://strauss.co.at/reini/
Any ideas what I'm doing wrong?
You need to give the img tag inside the div with an id of logo the following CSS attributes: z-index: 1; and position: absolute. That's all!
You can use this css below:
#logo{
position: absolute;
z-index:1;
}
In mobile view, when the navbar collapses and i press on the toggle, the navbar behaves as it should but the carousel also moves down along with it. Also there is a 70px gap between the navbar and the carousel, which i used to fix by adding a negative margin-top on the carousel so it goes up by force, but how do i do this naturally?
Thank you!
You can make the position of your .carousel absolute and tweak the top value:
.carousel {
position: absolute;
top: 50px;
}
You can make the top of your .navbar-default zero or anything by doing this:
.navbar-default {
top: 0;
}
The carousel moves down because the navbars height changes to take up more of the screen. The gap between the carousel and the navbar might be because of padding added to the <body> tag, try adding style="padding-top: 0;" to the <body> tag.
If you could show us your code with jsfiddle, that would be helpful to.
I've tried numerous methods but I cannot get the logo and the li elements to align properly in the header.I also cannot seem to increase the height of the header.I've tried different methods but no success.
Basically what I want is first to increase the header's size (I have a navbar-static-top header) and make the logo and the ul elements appear properly.However I have no ideea how I can do that.I also want to keep the logo's current dimensions.It does work with the current header if I resize the logo but that's not what I am after.
Bootply
[1]: http://www.bootply.com/BTSfbDudpZ
Add following css
.navbar-brand {
height: auto;
}
.navbar-nav{
margin-top: 50px;
}