Overlap bootstrap carousel with image from navbar - html

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;
}

Related

I don't want the navbar be over jumbotron

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.

how to make navbar on top of carousel?

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

Bootstrap carousel moves down when in mobile mode when i press the toggle navbar

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.

Logo image over menu div like the image

im new here and im new in the world of css and html. Im try to edit wordpress template with my custom stlye.
This is my web: http://codigomasivo.com.ar/dev/douglas/
I want to change logo part.
The result where i found is this: http://puu.sh/iMZq4.jpg
I try put logo in "position: absolute;" but when im scroll the page the logo move to down.
Sorry for my english. Im from Argentina. Thanks in advance
If you want your logo to go over the borders of your menu, then you could set a fixed height for your menu like height: 70px.
Then for your logo you could use this:
.element {
position: relative;
top: 50%;
transform: translateY(-50%);
}
I found the code above here.
Remember to use z-index: 7000 on your logo, or else the top row will overlap it.
Create a div which contains the actual bar
Reduce the actual bar to the height you want
Change the new div's backgroung-color to transparent (background-color: transparent )
Ensure your logo image has height = new-div-height and the old-bar-div is shorter.

I have a JS image slider that I want to go under the fixed menu on scroll

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.