Placing an image on top of Bootstrap navbar!

Report · Dec 28, 2016

Right now as you can see in the images below, the navbar is on top of the picture, but I want that to be the opposite as if the picture is apart of the navbar. As for code I DONT have the image inside of the nav at all, I have simply an <img> tag before i start the nav and then using CSS I lined everything up as needed.

Report · Dec 28, 2016

Is that a position: fixed; Bootstrap navbar you are using?

If so then you need to give the image a position of absolute and a high z-index:

.logo {

position: absolute;

z-index: 1000;

}

I'm not entirely sure how you will make the logo and navbar work together - maybe wrap the Bootstrap navbar in a <div></div> with a position: relative; declared and then isert the absolutely position image in that <div>

You need to play around with the positioning to ensure the logo is in the correct location when you resize the browser window

Report · Dec 28, 2016

The navbar at the moment has no position specified. I just have everything centered and then added a margin-right to Recipes tab to create an opening for the logo. As for the logo I just have it in <center> tags. I do understand that for z-index to be used both items need to have a specified position. But currently when i scroll through screen sizes everything stays perfectly lined up and what not, just need the logo on top!

Report · Dec 28, 2016

The navbar must have a position of fixed applied to it otherwise the image of the logo inserted before it would be pushing it down unless you have used some kind of negative margin to try and shift the navbar up over the top of the image.

Report · Dec 28, 2016

i did use a negative margin! Wasn't sure of any other way to get it lined it. Do you suggest i stay away from the negative margin and change positioning of both the navbar and the logo? Not too familiar with the different positioning but i'm sure i can find it anywhere online.

Report · Dec 28, 2016

Below is how I would approach it. I've just used the Bootstrap fixed top navbar for the example but you can see the logo can sit over the bar and the logo can be adjusted in size at specific media breaks, so when you get to smartphone size you may want to have it more over towards the left of the browser window edge:

<!doctype html>

<html>

<head>

<title>Bootstrap Demo</title>

<style>

.navbar {

margin-top: 100px;

z-index: -2;

}

@media screen and (max-width: 768px) {

.navbar {

margin-top: 60px;

}

@media screen and (max-width: 480px) {

.navbar {

margin-top: 30px;

}

.logo_wrapper {

position: absolute;

width: 100%;

}

.logo {

width: 250px;

height: 200px;

margin: 0 auto;

background-color: #f2f2f2;

text-align: center;

}

@media screen and (max-width: 768px) {

.logo {

width: 200px;

height: 150px;

background-color: yellow;

}

@media screen and (max-width: 480px) {

.logo {

width: 150px;

height: 100px;

background-color: red;

margin-left: 30px;

}

</style>

</head>

<body>

Company Logo

</figure>

</div>

<a class="navbar-brand" href="#"> BRAND NAME or LOGO </a>

</div>

</ul>

</div>

</nav>

</body>

</html>

Report · Dec 28, 2016

Thank you for your response, I will be around to try this out later and let you know the outcome!

Report · Dec 29, 2016

So after checking this out for a while and trying to integrate this into my current site i have found that with the navbar at a negative z-index, the nav doesn't work while it's underneath the img wrapper! Any help is greatly appreciated from here.

Report · Dec 29, 2016

robertpiconedesigns wrote:
So after checking this out for a while and trying to integrate this into my current site i have found that with the navbar at a negative z-index, the nav doesn't work while it's underneath the img wrapper! Any help is greatly appreciated from here.

Needs a slight revision (complete code scroll down)

Here is the explanation:

Basically get rid of <div class="logo_wrapper"></div>

and the css:

.logo_wrapper {

position: absolute;

width: 100%;

}

Give the navbar a z-index: 1;

.navbar {

margin-top: 100px;

z-index: 1;

}

and change the logo css properties to as below

.logo {

position: relative;

z-index: 2;

width: 250px;

height: 200px;

margin: 0 auto;

background-color: #f2f2f2;

text-align: center;

}

Your drop menu should then function.

<!doctype html>

<html>

<head>

<title>Bootstrap Demo</title>

</script>

<style>

.navbar {

margin-top: 100px;

z-index: 1;

}

@media screen and (max-width: 768px) {

.navbar {

margin-top: 60px;

}

@media screen and (max-width: 480px) {

.navbar {

margin-top: 30px;

}

.logo {

position: relative;

z-index: 2;

width: 250px;

height: 200px;

margin: 0 auto;

background-color: #f2f2f2;

text-align: center;

}

@media screen and (max-width: 768px) {

.logo {

width: 200px;

height: 150px;

background-color: yellow;

}

@media screen and (max-width: 480px) {

.logo {

width: 150px;

height: 100px;

background-color: red;

margin-left: 30px;

}

</style>

</head>

<body>

Company Logo

</figure>

<a class="navbar-brand" href="#"> BRAND NAME or LOGO </a>

</div>

</ul>

</div>

</nav>

</body>

</html>

Report · Dec 29, 2016

Thanks for the revision, I ended up staying all night stressing about it before you answered and just ended up improvising and making the logo, the bar, and the nav 3 seperate things and got it to work perfectly!

Placing an image on top of Bootstrap navbar!

1 Correct answer