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.
Related
I've been trying to fix a navbar position but it is not working correctly. I added margin-top to the nav element but this will create big white space when the user scrolling down. I just want to move the navbar position to the bottom of the header and above content. How can I make this work?
I draw the arrow where I want to move the navbar position.
https://songs-of-hope.tumblr.com/
You can just remove the below style from styles.css line number 500:
#header.bgimage.center .primary {
padding-bottom: 30px;
}
Or you can set padding-bottom: 0px;. This will solve you problem.
I am using “navbar fixed-top” from Bootstrap. And underneath it I have a container. What I noticed is whenever I scroll down the page, the container underneath the navbar starts to slide below the navbar (refer to attached photo). I am aware that this is an expected behaviour with fixed-top, but I am wondering is there away to always keep the container below the navbar fixed to its bottom even when the user scrolls down?
Get the height of your fixed element, let's say 50px, and then:
body {margin-top:50px}
Please add the header height as the margin-top of the container.. for example..
css
.container {
margin-top:100px; /*height of the header*/
}
OR
JQUERY
var headerheight = jQuery('header').outerHeight();
jQuery('header').css("margin-top",headerheight);
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
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.
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.