CODEWITHSUNDEEP
htmlcssnavbar
Axis
Axis

Reputation: 49

Overlapping Image in Navigation Bar

Is it possible to overlap images in the navigation bar, without getting the background color and some stuffs? The image or the logo itself shouldn't have any background-color (that is inherited) and should have overlapped the navigation bar. I'm looking for an output like this.

This is the CodePen link, try it out

HTML Codes:

<nav>
    <ul>
        <li>
            <span class="logo">
                <img src="https://static.wixstatic.com/media/c86d4e_46042d8a0d99473f82209f03ab4dd146~mv2.gif" alt="Star of Hope" title="Star of Hope" id="logo">    
            </span>
        </li>
        <li><a href="" title="" class="active">Home</a></li>
        <li><a href="" title="">Our School</a></li>
        <li><a href="" title="">Academics</a></li>
        <li><a href="" title="">Lesson and Quizzes</a></li>
        <li><a href="" title="">Event &amp; News</a></li>
        <li><a href="" title="">Grades</a></li>
    </ul>
</nav>

CSS Codes:

* {
    margin: 0px;
}

nav {
    width: 100%;
    height: 100%;
    text-align: center;
    font-weight: lighter;
    font-size: 0.95em;
    font-family: Century Gothic;
    text-transform: uppercase;
    list-style-type: none;
    overflow: hidden;
    background-color: #343F64;
}

ul {    
    margin: 0;
    padding: 0;
    width: 100%;
}

li {
    display: inline;
    float: left;
}

li a {
    display: block;
    padding: 14px 16px;
    background-color: #343F64;
    color: white;
    text-decoration: none;
    padding-top: 25px;
    padding-bottom: 25px;
}

.active {
    color: #E9DB89;
}

li img {
    float: left;

}

img {
    margin-left: 75px;
}

#logo {
    float:left;
    z-index: 1000;
}

Upvotes: 1

Views: 3331

Answers (2)

Kalnode
Kalnode

Reputation: 11384

Here's another variation, not using absolute positioning:

HTML:

<div id="header_container"> 

    <div id="header">
        <div class="logo">
                <img src="https://static.wixstatic.com/media/c86d4e_46042d8a0d99473f82209f03ab4dd146~mv2.gif" alt="Star of Hope" title="Star of Hope" id="logo">    
            </div>  

        <div class="nav">
            <ul>
                <li><a href="" title="" class="active">Home</a></li>
                <li><a href="" title="">Our School</a></li>
                <li><a href="" title="">Academics</a></li>
                <li><a href="" title="">Lesson and Quizzes</a></li>
                <li><a href="" title="">Event &amp; News</a></li>
                <li><a href="" title="">Grades</a></li>
            </ul>
        </div>
    </div>
</div>

CSS:

* {
        margin: 0px;
    }

    #header_container {
      width: 100%;
      height: 100px;
      background-color: #343F64;
    }

    #header {
    margin: 0 auto;
      width: 1200px;

    }

    .nav {
      float: left;
      margin-top: -100px;
      margin-left: 350px;
      height: 100px;
        text-align: center;
        font-weight: lighter;
        font-size: 0.95em;
        font-family: Century Gothic;
        text-transform: uppercase;
        list-style-type: none;
        overflow: hidden;
    }

    ul {    
        margin: 0;
        padding: 0;
        width: 100%;
    }

    li {
        display: inline;
        float: left;
    }

    li a {
        display: block;
        padding: 14px 16px;
        background-color: #343F64;
        color: white;
        text-decoration: none;
        padding-top: 25px;
        padding-bottom: 25px;
    }

    .active {
        color: #E9DB89;
    }

    li img {
        float: left;

    }

    img {
        margin-left: 75px;
    }

    .logo {
        float:left;
        z-index: 1000;
    }

Upvotes: 0

Oke Tega
Oke Tega

Reputation: 883

I have made an edit to your code to get the results

* {
	margin: 0px;
}

nav {
	width: 100%;
	height: 70px;
	text-align: center;
	font-weight: lighter;
	font-size: 0.95em;
	font-family: Century Gothic;
	text-transform: uppercase;
	list-style-type: none;
	overflow: hidden;
	background-color: #343F64;
    position: relative;/*change here*/
}

ul {	
	margin: 0;
	padding: 0;
	width: 100%;
  position: absolute;/*change here*/
  right: -25%;/*change here*/
}

li {
	display: inline;
	float: left;
}

li a {
	display: block;
	padding: 14px 16px;
	background-color: #343F64;
	color: white;
	text-decoration: none;
	padding-top: 25px;
	padding-bottom: 25px;
}

.active {
	color: #E9DB89;
}

li img {
	float: left;

}

img {
	margin-left: 75px;
}
.line {
  width: 100%;
  height: 50px;
  border-bottom: 1px solid #111;
}
#logo {
	float:left;
	z-index: 1000;
  position: absolute;/*change here*/
}
<!--move logo outside nav-->
<span class="logo">
                <img src="https://static.wixstatic.com/media/c86d4e_46042d8a0d99473f82209f03ab4dd146~mv2.gif" alt="Star of Hope" title="Star of Hope" id="logo">    
            </span>
<nav>
		<ul>
			<li><a href="" title="" class="active">Home</a></li>
			<li><a href="" title="">Our School</a></li>
			<li><a href="" title="">Academics</a></li>
			<li><a href="" title="">Lesson and Quizzes</a></li>
			<li><a href="" title="">Event &amp; News</a></li>
			<li><a href="" title="">Grades</a></li>
		</ul>
	</nav>
<div class="line"></div>

Upvotes: 1

Related Questions