I'm having a problem with my affix + container padding value causing some elements directly below it to move when I click on them.
My css code:
.affix {
top: 0;
width: 100%;
z-index:99;
}
.affix + #container-fluid-main {
padding-top: 70px;
}
I have a slideshow under my navigation bar where my navigation bar is fixed at the top (mobile screens). Now when I click on the slideshow to change an image the entire slideshow shifts down and there's a whitespace between the navigation bar and the slideshow.
I traced my problem to be that the slideshow has no margin-top so the padding-top value from the affix + #container-fluid-main causes the slideshow to shift. How can i overcome this without adding a top margin to the slideshow and keeping the smooth transition of the navigation bar? Thanks
Before Image
Before
And After I click on the image directly under the navigation bar
after
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.
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 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 have a JS image slider that I want to go under the fixed menu on scroll, But the slider has to use CSS position:Relative to work. (I can make it go under the nav bar with different position types but then the image slider doesn't work as it should)
How can I keep the slider working but make it go underneath my fixed menu bar?
Here is the page before scroll:
http://i.imgur.com/JdYL7gx.jpg
Here is the page when the image slider is in front of the nav bar: (I don't want it to be)
http://i.imgur.com/Mt8bLGk.png
here is how the content should be behind the menu:
http://i.imgur.com/6MzVy63.png
Set the z-index of your slider to a negative number to move it behind the header.
example
#slider {
z-index: -9999;
}
Or, set the header to a higher z-index to move it above everything else.
example
#header {
z-index: 9999;
}
If that doesn't work, share the code so we can help figure it out.