CSS add slogan into header - html

Question

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>Category 1
</li>
<li>Category 2
</li>
<li>Category 3
</li>
<li>Category 4
</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 1

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

Answer 2

To achieve what you want is as easy as putting the following code inside <div class="logo">:
<p id = "slogan">Slogan should be right here</p>
Then, you can go in your CSS file and make the necessary changes for #slogan. Something like the following:
#slogan {
color: #0c0c0c;
font-size: 16px;
display: block;
margin-top: 5px;
}
You can check out this working demo or the following snippet.
Snippet:
body {
background: url(http://i.imgur.com/Asbdvgw.png);
font-family: 'Open Sans', sans-serif;
}
header {
width: 100%;
height: 100px;
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;
}
#slogan {
margin-top: 5px;
color: #0c0c0c;
font-size: 16px;
display: block;
}
<header>
<div class="wrapper">
<div class="logo">
Name
<p id="slogan">Slogan should be right here</p>
</div>
<nav>
<ul>
<li>Category 1
</li>
<li>Category 2
</li>
<li>Category 3
</li>
<li>Category 4
</li>
</ul>
</nav>
</div>
</header>

Answer 3

Get your code:
html:
<header>
<div class="wrapper">
<div class="logo">
<h4>
Name
</h4>
<p>your slogan here</p>
</div>
<nav>
<ul>
<li>Category 1</li>
<li>Category 2</li>
<li>Category 3</li>
<li>Category 4</li>
</ul>
</nav>
</div>
</header>
<br><br>
<center><font color="#fff">My goal:</font><br><br>
<img src="http://i.imgur.com/aW7k0QI.png">
css:
body {
background: url(http://i.imgur.com/Asbdvgw.png);
font-family: 'Open Sans', sans-serif;
margin:0;
}
header {
width: 950px;
margin: auto;
position: relative;
background: #fff;
overflow: hidden;
}
.wrapper {
width: 950px;
margin: 0 auto;
}
header .logo{
border-left: 1px dashed #333333;
padding:5px 10px;
}
header .logo h4{
padding: 0px ;
text-decoration: none;
font-size: 30px;
color: #cc3333;
padding: 10px;
padding-bottom:0;
}
.logo h4{
margin:0;
padding:0;
}
.logo p{
color:rgba(0,0,0,0.7);
margin:0;
padding:0 10px;
}
header nav{
position:absolute;
right:0;
top:0;
margin: 0px 0px;
}
header nav ul{
margin: 0px;
}
header nav ul li{
display: block;
float: left;
margin: 0px;
}
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;
}

Answer 4

Here's an updated Fiddle.
Critical CSS:
header .slogan {
color: #000;
font-size: 20px;
display: block;
}
And HTML:
<div class="logo">
Name
<span class="slogan">Tagline here</span>
</div>