nav menu with icon html - html

Question

Trying to make a responsive nav menu with icons in html. Its supposed to look like "image 1" but instead it looks like "image 2". Any ideas on how to fix it? it was working fine, but when I added icons to the nav menu, it went wrong. Thanks in advance.
My code
Home
My Work
About Me
Get in Touch
</ul>
<a class="toggle-nav" href="#">☰</a>
</nav>
<style>
.icons1 {
width: 40px;
height: 30.5px;
margin-left: 38px;
background: url('http://icons.iconarchive.com/icons/paomedia/small-n-flat/1024/sign-check-icon.png') no-repeat;
background-size: contain;
margin-top: 15px;
float: left;
}
.current-item{
width: 40px;
height: 30.5px;
margin-top: 30px;
background: url('http://icons.iconarchive.com/icons/paomedia/small-n-flat/1024/sign-check-icon.png') no-repeat;
background-size: contain;
}
/*----- Toggle Button -----*/
.toggle-nav {
display:none;
}
/*----- Menu -----*/
#media screen and (min-width: 860px) {
.menu {
width:100%;
height:100px;
box-shadow:0px 1px 1px rgba(0,0,0,0.15);
border-radius:3px;
background:#303030;
}
}
.menu ul {
display:inline-block;
margin-top:10px;
height:90px;
}
.menu li {
margin:0px 50px 0px 0px;
float:left;
list-style:none;
font-size:17px;
margin-top:10px;
height:70px;
}
.menu li:last-child {
margin-right:0px;
}
.menu a {
text-shadow:0px 1px 0px rgba(0,0,0,0.5);
color:#777;
transition:color linear 0.15s;
text-decoration: none;
line-height:6;
}
.menu a:hover, .menu .current-item a {
text-decoration:none;
color:#66a992;
}
/*----- Responsive -----*/
#media screen and (max-width: 1150px) {
.wrap {
width:90%;
}
}
#media screen and (max-width: 970px) {
.search-form input {
width:120px;
}
}
#media screen and (max-width: 860px) {
.menu {
position:relative;
display:inline-block;
width:100%;
text-align:center;
background-color:red;
}
.menu ul.active {
display:none;
}
.menu ul {
width:100%;
position:absolute;
top:120%;
left:0px;
padding:10px 0px;
box-shadow:0px 1px 1px rgba(0,0,0,0.15);
border-radius:3px;
background:#303030;
}
.menu ul:after {
width:0px;
height:0px;
position:absolute;
top:0%;
left:22px;
content:'';
transform:translate(0%, -100%);
border-left:7px solid transparent;
border-right:7px solid transparent;
border-bottom:7px solid #303030;
}
.menu li {
margin:5px 0px 5px 0px;
float:none;
display:block;
}
.menu a {
display:block;
}
.toggle-nav {
padding:20px;
float:left;
display:inline-block;
box-shadow:0px 1px 1px rgba(0,0,0,0.15);
border-radius:3px;
background:#303030;
text-shadow:0px 1px 0px rgba(0,0,0,0.5);
color:#777;
font-size:20px;
transition:color linear 0.15s;
}
.toggle-nav:hover, .toggle-nav.active {
text-decoration:none;
color:#66a992;
}
.search-form {
margin:12px 0px 0px 20px;
float:left;
}
.search-form input {
box-shadow:-1px 1px 2px rgba(0,0,0,0.1);
}
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script>
jQuery(document).ready(function() {
jQuery('.toggle-nav').click(function(e) {
jQuery(this).toggleClass('active');
jQuery('.menu ul').toggleClass('active');
e.preventDefault();
});
});
</script>

Answer 1

try adding white-space:nowrap; to .menu a
.menu a {
text-shadow:0px 1px 0px rgba(0,0,0,0.5);
color:#777;
transition:color linear 0.15s;
text-decoration: none;
line-height:6;
white-space:nowrap;
}