dizzL dizzL - 2 months ago 5
CSS Question

Nesting an image in Nav Bar using CSS

I am working on a web project for school, which brings me to a dead end at the moment. I am currently building a navigation bar for my pages and I am looking to nest a logo image to the inside left portion of the navbar. Any suggestions would be great!

Note: I apologize ahead of time, I could not figure out jsfiddle. Too many dang errors.



body {
font-family: 'Roboto', sans-serif;
padding: 0;
margin: 0;
background: lightblue;
}
small {
font-size: 12px;
color: rgba(0, 0, 0, 0.4);
}
h1 {
text-align: center;
padding: 50px 0;
font-weight: 800;
margin: 0;
letter-spacing: -1px;
color: inherit;
font-size: 40px;
}
h2 {
text-align: center;
font-size: 30px;
margin: 0;
font-weight: 300;
color: inherit;
padding: 50px;
}
.center {
text-align: center;
}
section {
height: 50vh;
}
/* NAVIGATION */

nav {
width: 60%;
margin: 0 auto;
background: #d67ca8;
padding: .25px 0;
box-shadow: 0px 5px 0px #dedede;
}
nav ul {
list-style: none;
text-align: center;
}
nav ul li {
display: inline-block;
}
nav ul li a {
display: block;
padding: 15px;
text-decoration: none;
color: black;
font-weight: 800;
text-transform: uppercase;
margin: 0 1px;
}
nav ul li a,
nav ul li a:after,
nav ul li a:before {
transition: all .5s;
}
nav ul li a:hover {
color: #555;
}
/* stroke */

nav.stroke ul li a,
nav.fill ul li a {
position: relative;
}
nav.stroke ul li a:after,
nav.fill ul li a:after {
position: absolute;
bottom: 0;
left: 0;
right: 0;
margin: auto;
width: 0%;
content: '.';
color: transparent;
background: #aaa;
height: 1px;
}
nav.stroke ul li a:hover:after,
nav.stroke ul li a.active:after {
width: 100%;
}
nav.fill ul li a {
transition: all 2s;
}
nav.fill ul li a:after {
text-align: left;
content: '.';
margin: 0;
opacity: 0;
}
nav.fill ul li a:hover,
nav.fill ul li a.active {
color: #fff;
z-index: 1;
}
nav.fill ul li a:hover:after,
nav.fill ul li a.active:after {
z-index: -10;
animation: fill 1s forwards;
-webkit-animation: fill 1s forwards;
-moz-animation: fill 1s forwards;
opacity: 1;
}
/* Keyframes */

@-webkit-keyframes fill {
0% {
width: 0%;
height: 1px;
}
50% {
width: 100%;
height: 1px;
}
100% {
width: 100%;
height: 100%;
background: #333;
}
}
/* IMAGES */

#navlogo {}

<html>

<head>
<title>Title | Home</title>

<link href='http://fonts.googleapis.com/css?family=Roboto:500,900,100,300,700,400' rel='stylesheet' type='text/css'>
<link rel="icon" type="text/css" sizes="32x32" href="images/favicon1-32x32.png" />
<link rel="stylesheet" type="text/css" media="screen" href="main.css" />
<meta charset="utf-8" />

</head>

<body>

<nav class="fill">
<ul>
<li>
<img id="navlogo" src="images/logo-72x72.png"></img>
<li><a href="index.html" class="active">Home</a>
</li>
<li><a href="#">About</a>
</li>
<li><a href="#">Downloads</a>
</li>
<li><a href="#">More</a>
</li>
<li><a href="#">Contact</a>
</li>
</ul>
</nav>


</body>

</html>




Answer

In my other post - i wasn't really looking at the actual outcome - more just hte nesting hting - this time - I have put the image into ists own li and it lines up with the text and be tremoving the text-align:center - is left aligned - hopefully you can play around with this:

body {
  font-family: 'Roboto', sans-serif;
  padding: 0;
  margin: 0;
  background: lightblue;
}
small {
  font-size: 12px;
  color: rgba(0, 0, 0, 0.4);
}
h1 {
  text-align: center;
  padding: 50px 0;
  font-weight: 800;
  margin: 0;
  letter-spacing: -1px;
  color: inherit;
  font-size: 40px;
}
h2 {
  text-align: center;
  font-size: 30px;
  margin: 0;
  font-weight: 300;
  color: inherit;
  padding: 50px;
}
.center {
  text-align: center;
}
section {
  height: 50vh;
}
/* NAVIGATION */

nav {
  margin: 0 auto;
  background: #d67ca8;
  padding: .25px 0;
  box-shadow: 0px 5px 0px #dedede;
}
nav ul {
  list-style: none;

}
nav ul li {
  display: inline-block;
}
nav ul li a {
  display: block;
  padding: 15px;
  text-decoration: none;
  color: black;
  font-weight: 800;
  text-transform: uppercase;
  margin: 0 1px;
}
nav ul li a,
nav ul li a:after,
nav ul li a:before {
  transition: all .5s;
}
nav ul li a:hover {
  color: #555;
}
/* stroke */

nav.stroke ul li a,
nav.fill ul li a {
  position: relative;
}
nav.stroke ul li a:after,
nav.fill ul li a:after {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  width: 0%;
  content: '.';
  color: transparent;
  background: #aaa;
  height: 1px;
}
nav.stroke ul li a:hover:after,
nav.stroke ul li a.active:after {
  width: 100%;
}
nav.fill ul li a {
  transition: all 2s;
}
nav.fill ul li a:after {
  text-align: left;
  content: '.';
  margin: 0;
  opacity: 0;
}
nav.fill ul li a:hover,
nav.fill ul li a.active {
  color: #fff;
  z-index: 1;
}
nav.fill ul li a:hover:after,
nav.fill ul li a.active:after {
  z-index: -10;
  animation: fill 1s forwards;
  -webkit-animation: fill 1s forwards;
  -moz-animation: fill 1s forwards;
  opacity: 1;
}
/* Keyframes */

@-webkit-keyframes fill {
  0% {
    width: 0%;
    height: 1px;
  }
  50% {
    width: 100%;
    height: 1px;
  }
  100% {
    width: 100%;
    height: 100%;
    background: #333;
  }
}
/* IMAGES */

#navlogo {}
<html>

<head>
  <title>Title | Home</title>

  <link href='http://fonts.googleapis.com/css?family=Roboto:500,900,100,300,700,400' rel='stylesheet' type='text/css'>
  <link rel="icon" type="text/css" sizes="32x32" href="images/favicon1-32x32.png" />
  <link rel="stylesheet" type="text/css" media="screen" href="main.css" />
  <meta charset="utf-8" />

</head>

<body>

 <nav class="fill">
    <ul>
      <li>
        <img id="navlogo" src="images/logo-72x72.png" alt ="logo" width="72"  height ="72"/>
       </li>
            <li><a href="index.html" class="active">Home</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Downloads</a></li>
            <li><a href="#">More</a></li>
            <li><a href="#">Contact</a></li>
    </ul>
  </nav>


</body>

</html>

Comments