KOKOC KOKOC - 4 months ago 14
HTML Question

CSS add slogan into header

I have a header consists of a website name (at the left part) and a horizontal navigation menu (at the right part). My objective is to add a slogan under the site name. Meanwhile, the bottom of site name should still completely match with the bottom of menu elements, the only change is adding slogan.

Here are my header and a picture with expected result: https://jsfiddle.net/1nc9ch3x/1/

Give me please a hint how to figure it out. Thank you in advance!



body {
background: url(http://i.imgur.com/Asbdvgw.png);
font-family: 'Open Sans', sans-serif;
}
header {
width: 950px;
margin: auto;
position: relative;
background: #fff;
overflow: hidden;
}
.wrapper {
width: 950px;
margin: 0 auto;
}
header .logo {
display: inline;
border-left: 1px dashed #333333;
padding: 0 0 25px 10px;
text-decoration: none;
float: left;
font-size: 30px;
color: #cc3333;
margin: 25px 0px;
}
header nav {
float: right;
margin: 25px 0px;
}
header nav ul {
margin-top: 0px;
}
header nav ul li {
display: block;
float: left;
}
header nav ul li a {
text-decoration: none;
color: #333333;
font-size: 17px;
padding-top: 15px;
padding-bottom: 15px;
transition: all .2s linear;
-webkit-transition: all .2s linear;
-moz-transition: all .2s linear;
-o-transition: all .2s linear;
}
header nav ul li a.active,
header nav ul li a:hover {
color: #cc3333;
border-top: 1px dashed #cc3333;
border-bottom: 1px dashed #cc3333;
}
header li {
display: inline;
border-left: 1px dashed #cc3333;
padding: 10px 25px 10px 25px;
}
header li:first-child {
border: none;
}

<header>
<div class="wrapper">
<div class="logo">
Name
</div>
<nav>
<ul>
<li><a href="#">Category 1</a>
</li>
<li><a href="#">Category 2</a>
</li>
<li><a href="#">Category 3</a>
</li>
<li><a href="#">Category 4</a>
</li>
</ul>
</nav>
</div>
</header>

<br>
<br>
<center><font color="#fff">My goal:</font>
<br>
<br>
<img src="http://i.imgur.com/aW7k0QI.png">




Answer

This should do the trick :
Fiddle : https://jsfiddle.net/1nc9ch3x/3/
HTML :

<div class="logo">
   Name<span>Slogan</span>
</div>

CSS :

header .logo {
  position:relative;
}
header .logo span {
  white-space:nowrap;
  color:black;
  font-size:18px;
  position:absolute;
  bottom:0;
  left:10px;
}