My navigation bar is causing a horizontal scrollbar to appear. I've searched for solutions, but haven't found one that works for me. The issue seems to get worse as the screen size decreases, especially in IE 11. Can anyone provide assistance? Thank you. Here is the code snippet where I suspect the problem lies (HTML, page CSS, and parallax CSS).
<body>
<div class="wrapper">
<header class="lighthouse">
<nav class="main">
<div class="menu-icon"> <i class="fa fa-bars fa-2x"></i> </div>
<div class="top-nav-logo"> <img src="images/mlc-logo/mlcwhite.png" width="97" height="59" alt="Mission Lighthouse Church Logo"/></div>
<ul>
<li><a href="index.html">HOME</a></li>
<li><a href="who-jesus-is.html">WHO JESUS IS</a></li>
<li><a href="who-we-are.html">WHO WE ARE</a></li>
<li><a href="media.html">MEDIA</a></li>
<li><a href="contact.html">CONNECT</a></li>
</ul>
</nav>
<div class="logo"><img src="images/mlc-logo/mlc-main-320.png" width="280" height="167" alt="Mission Lighthouse Church Logo" data-enllax-ratio="-.8" data-enllax-type="foreground"/> </div>
<div class="seagull"><img src="images/Parallax/seagull2.png" alt="Seagulls" width="276" height="136" class="seagull" data-enllax-ratio="-3" data-enllax-direction="horizontal" data-enllax-type="foreground"/></div>
<div class="welcome-home" data-enllax-ratio="-1.1" data-enllax-type="foreground">Welcome Home</div>
</header>
CSS:
html, html * {
padding: 0;
margin: 0;
}
body {
font-size: 62.5%;
}
.wrapper {
width: 100%;
background-color: #000000;
position: absolute;
}
.top-nav-logo {
display: block;
width: 100%;
margin: 10px 10px 0 20px;
position: fixed;
z-index: 100;
}
.menu-icon {
width: 50%;
box-sizing: border-box;
background-color: #000;
text-align: right;
padding: 15px 24px;
cursor: pointer;
color: #fff;
display: none;
}
nav.main {
display: inline-block;
position: fixed;
top: 0;
right: 0;
left: 0;
max-width: 1341px;
margin: 0 auto;
overflow: hidden;
width: 100%;
text-align: left;
z-index: 80;
}
nav ul {
list-style: none;
text-align: center;
background-color: rgba(0,0,0,0.0);
overflow: hidden;
color: #fff;
padding: 0;
margin: 0;
transition: 1s;
z-index: 80;
}
nav.blue ul {
background-color: rgba(0,34,73,0.95);
}
nav ul li {
display: inline-block;
padding: 20px;
}
nav ul li a {
display: inline-block;
color: #ffffff;
font-family: 'Montserrat', sans-serif;
font-weight: 500;
font-size: 1.7em;
text-decoration: none;
}
nav ul li a:visited {
color: rgba(240,183,110,1.00);
}
nav a:hover {
color: #F0F694;
text-decoration: none;
font-weight: 700;
transition: 1.7s;
-webkit-transition: 1.7s; /*Safari*/
}
CSS for Parallax:
.lighthouse {
width: 100%;
height: 768px;
position: relative;
background-image: url(../images/Parallax/front-header-4.jpg), url(../images/Parallax/2nd-header-background.jpg);
background-size: auto 768px, cover;
background-position: top center;
background-attachment: fixed;
background-repeat: no-repeat;
will-change: transform;
overflow: hidden;
}
.logo {
height: 140px;
width: 88%;
position: relative;
top: 170px;
margin: 0 auto;
text-align: center;
opacity: 0.65;
z-index: 20;
}
.seagull {
height: 123px;
width: auto;
position: relative;
left: -190px;
opacity: 0.8;
z-index: 10;
}
.welcome-home {
font-family: 'Kaushan Script', cursive;
font-size: 9.0em;
color: #004391;
position: relative;
text-align: center;
width: 98%;
top: 255px;
}