Skip to main content
C
Cheddaa
Known Participant
December 28, 2016
Answered

Placing an image on top of Bootstrap navbar!

  • December 28, 2016
  • 2 replies
  • 18118 views

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. 

    This topic has been closed for replies.
    Correct answer osgood_

    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.


    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.

    <!------ COMPLETE EXAMPLE CODE -->

    <!doctype html>

    <html>

    <head>

    <meta charset="utf-8">

    <title>Bootstrap Demo</title>

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <!--Bootstrap-->

    <script src="http://code.jquery.com/jquery-latest.min.js">

    </script>

    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">

    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></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>

    <figure class="logo">

    Company Logo

    </figure>

    <!--begin top nav bar-->

    <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">

    <div class="container-fluid">

    <div class="navbar-header">

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

    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button>

    </div>

    <div class="collapse navbar-collapse" id="myNavbar">

    <ul class="nav navbar-nav navbar-right">

    <li><a href="#"><span class="glyphicon glyphicon-comment"></span> MENU 1</a></li>

    <li><a href="#"><span class="glyphicon glyphicon-list-alt"></span> MENU 2</a></li>

    <li><a href="#"><span class="glyphicon glyphicon-envelope"></span> MENU 3</a> </li>

    <li><a href="#">MENU 4</a> </li>

    <li><a href="#">MENU 5</a></li>

    </ul>

    </div>

    </div>

    <!--end top nav-->

    </nav>

    </body>

    </html>

    2 replies

    C
    CheddaaAuthor
    Known Participant
    December 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!

    O
    osgood_
    Legend
    December 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:

    <img src="blah.png" class="logo" alt="logo">

    .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

    C
    CheddaaAuthor
    Known Participant
    December 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!

    C
    CheddaaAuthor
    Known Participant
    December 29, 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>

    <meta charset="utf-8">

    <title>Bootstrap Demo</title>

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <!--Bootstrap-->

    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">

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

    <div class="logo_wrapper">

    <figure class="logo">

    Company Logo

    </figure>

    </div>

    <!-- end logo_wrapper -->

    <!--begin top nav bar-->

    <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">

    <div class="container-fluid">

    <div class="navbar-header">

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

    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button>

    </div>

    <div class="collapse navbar-collapse" id="myNavbar">

    <ul class="nav navbar-nav navbar-right">

    <li><a href="#"><span class="glyphicon glyphicon-comment"></span> MENU 1</a></li>

    <li><a href="#"><span class="glyphicon glyphicon-list-alt"></span> MENU 2</a></li>

    <li><a href="#"><span class="glyphicon glyphicon-envelope"></span> MENU 3</a> </li>

    <li><a href="#">MENU 4</a> </li>

    <li><a href="#">MENU 5</a></li>

    </ul>

    </div>

    </div>

    <!--end top nav-->

    </nav>

    </body>

    </html>


    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.

    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices