CODEWITHSUNDEEP
htmlcss
Alicia Angner
Alicia Angner

Reputation: 15

How do I center my logo in the navigation bar?

How do I center my logo in my Navigation bar? I kind of already have it centered, but the issue that I'm running into is when I place an image in the content area, the image covers up part of the logo. I do want the logo kind of dropped a little from the navigation links. I don't want a giant space between the logo and the content image. Is there a way I can achieve this? The image attached is the design I'm trying to accomplish. Thanks in advance! 

body {  
    font-family:Georgia;
    font-size:12pt;
    }

    * {
	margin:0;
	 padding:0;
     }

    #header {
    background-color:#000000;
    height:100px;
    margin:auto;
    }

    #header ul {
    margin:0 auto;
    width:35%;
    padding:12px;
    list-style: none;
    }

    #header li {
    float: left;
    }

    #header a {
    padding:0 14px;
    text-align:center;
    display:block;  
	text-decoration:none;
	color:#FFFFFF;
	font-size:18pt;
	}    

    #header ul li a.logo {
    background: url("Logo.png");
    background-repeat:no-repeat;
    height:140px;
    display:block;
    width:140px;
    padding: 0;
 

    .clearfix {
    *zoom: 1;
    }

    .clearfix:after {
     content: "";
     clear: both;
     display: table;
     }

    #MainContent {
	}

    #MainContent img {
	margin-top:-10px;
	position:absolute;
	left:0;
	width:100%;
    }

    }
<body>
	<div id="header" class="clearfix">
		
    	<ul class="Nav">      
			<li><a href="index.html">Home</a></li>
			<li><a href="menu.html">Menu</a></li>
			<li><a href="index.html" class="logo"></a></li>
			<li><a href="gallery.html" >Gallery</a></li>
			<li><a href="about.html">About</a></li>
				
            </ul>
               
            </div>
	<div id="MainContent">
	  <img src="Photos/drinks.jpeg">
	</div> 
</body>

Upvotes: 0

Views: 70

Answers (1)

schrej
schrej

Reputation: 450

You can add a z-index to your .logo class. This will render it above the image.

e.g.

.logo {
  z-index: 100;
}

https://developer.mozilla.org/de/docs/Web/CSS/z-index

Upvotes: 1

Related Questions