Hey there! I'm new to the world of Front-end development and I've been learning by watching videos and reading everything I can find on the Internet. Currently, I'm using HTML, CSS, and JS for my website. Can anyone help me figure out how to add a logo to my site without it taking up the entire page when inserted into the header?
Here's the HTML & CSS code:
<div class="container">
<div class="nav-header">
<a href="#" class="js-fh5co-nav-toggle fh5co-nav-toggle dark"><i></i></a>
<h1 id="fh5co-logo"><a href="index.html"><i class="icon-airplane"></i>Wayfarer Tours</a></h1>
<!-- START #fh5co-menu-wrap -->
<nav id="fh5co-menu-wrap" role="navigation">
.nav-header {
position: relative;
float: left;
width: 100%;
}
#fh5co-logo {
position: relative;
z-index: 2;
font-size: 28px;
text-transform: uppercase;
margin-top: 35px;
font-weight: 700;
float: left;
padding-left: 40px;
}
#fh5co-logo i {
position: absolute;
top: 0;
left: 0;
font-size: 16px;
color: #F78536;
background: rgba(0, 0, 0, 0.06);
padding: 10px;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-ms-border-radius: 50%;
border-radius: 50%;
}
#fh5co-logo a {
color: #F78536;
}
#fh5co-logo a:hover, #fh5co-logo a:focus {
color: #F78536 !important;
}
#fh5co-menu-wrap {
position: relative;
z-index: 2;``
display: block;
float: right;
margin-top: 15px;
}
#fh5co-menu-wrap .sf-menu a {
padding: 1em .75em;
}
#fh5co-primary-menu > li > ul li.active > a {
color: #F78536 !important;
}
#fh5co-primary-menu > li > .sf-with-ul:after {
border: none !important;
font-family: 'icomoon';
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
/* Better Font Rendering =========== */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
position: absolute;
float: right;
margin-right: -0px;
top: 50%;
font-size: 12px;
margin-top: -7px;
content: "\e922";
color: rgba(0, 0, 0, 0.5);
}