change horizontal navigation to vertical - html

Question

I have horizontal navigation bar like this.
I need to make this navigation bar vertical left. This is my html
<div ng-controller="PortalController">
<header>
<h1>E_Zuite</h1>
<nav role='navigation'>
<ul>
<li><a class="link-1 entypo-home active" href="#home"></a></li>
<li><a class="link-2 entypo-picture" href="#clients"></a></li>
<li><a class="link-3 entypo-user" href="#about"></a></li>
<li><a class="link-4 entypo-mail" href="#contact-us"></a></li>
</ul>
</nav>
</header>
</div>
and this is my css
header {
width: 100%;
height: 70px;
box-sizing: border-box;
background-color: #373948;
position: fixed;
top: 0px;
left: 0px;
padding: 0px 0px 0px 30px;
}
header h1 {
float: left;
margin: 5px 0px;
color: white;
font-family: 'Meddon', cursive;
}
header nav ul {
height: 70px;
float: right;
}
header nav ul li {
height: 70px;
display: inline-block;
}
I exactly need this navigation bar and icons from top.I'm not much familiar with css.

Answer 1

Change your css to this:
header {
width: 200px;
height: 100%;
box-sizing: border-box;
background-color: #373948;
position: fixed;
top: 0px;
left: 0px;
padding: 0px 0px 0px 30px;
}
header h1 {
float: left;
margin: 5px 0px;
color: white;
font-family: 'Meddon', cursive;
}
header nav ul {
height: 70px;
float: right;
}
header nav ul li {
width: 200px;
height: 70px;
float: left;
display: block;
}
What I have done is simple, changed the width of the header and set the height to be 100%, then I have set the width and float attribute for your li menu.
It should work as you expect, BUT have a look through it to make it exactly how you want it.

Answer 2

header h1{
float:none;
}
header nav ul {
float:none;
}
header nav ul li{
display:block;
width:100%
}
just add css in your css file.

Answer 3

In case you want to fix your vertical nav to the left, the code below will help.
nav{
position: fixed;//fixes the navigation bar to left
top: 100px;
left: 0px;
}
header {
width: 100%;
height: 70px;
box-sizing: border-box;
background-color: #373948;
position: fixed;
top: 0px;
left: 0px;
padding: 0px 0px 0px 30px;
}
header h1 {
float: left;
margin: 5px 0px;
color: white;
font-family: 'Meddon', cursive;
}
header nav ul {
height: 70px;
width: 30px;
margin: 0;
padding: 0;
}
header nav ul li {
display: inline-block;
width: 30px;
}