This is my problem,
I have a website with some content, and i want the header to be 100% width of the browser, and some content that's wrapped inside wrapper to make it about.. 50% of the browser width.
Then we have something like this:
But, we're adding a menu aswell. This is done with UL, and we cant just add the menu (i think), because the content of the menu is going to be in the wrapper. So it looks like this:
What have i tried? I've given the element header/menu this css:
padding-left: 3000px;
margin-left: -3000px;
padding-right: 3000px;
margin-right: -3000px;
I also added overflow-x:hidden; on the body element so they cant scroll x wise. But on their phones, they can. So this makes everything "unresponsive"
HTML:
<html>
<title>Rocket League Prices - Home</title>
<body>
<div class="wrapper">
<header>
<a href="/index.php">
<div class="header-1">
Rocket League Prices
</div>
</a>
</header>
<ul class="nav-top">
<li class="nav-top"><a href="/index.php" title="HOME" class="nav-top">
<i class="fa fa-home fa-lg" aria-hidden="true" ></i><br><span class="meny-text">Home</span></a></li>
<li class="nav-top"><a href="/pc.php" title="PC PRICE LIST" class="nav-top">
<i class="fa fa-desktop fa-lg" aria-hidden="true"></i><br><span class="meny-text">PC list</span></a></li>
<li class="nav-top"><a href="/ps4.php" title="PS4 PRICE LIST" class="nav-top">
<i class="fa fa-gamepad fa-lg" aria-hidden="true"></i><br><span class="meny-text">PS4 list</span></a></li>
<li class="nav-top"><a href="/certified.php" title="CERTIFIED LIST" class="nav-top">
<i class="fa fa-certificate" aria-hidden="true"></i><br><span class="meny-text">Certified list</span></a></li>
<li class="nav-top" style="float:right;!important" >
<a href="#" class="nav-top meny-text" data-toggle="modal" data- target="#modal-staff">
<i class="fa fa-envelope-o" aria-hidden="true"></i> <br>Staff</a></li>
</ul>
<div class="modal fade" id="modal-staff" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
CSS:
body{
overflow-x: hidden;
}
header{
padding: 20px;
background-color: #1798e5;
color: black;
padding-left: 3000px;
margin-left: -3000px;
padding-right: 3000px;
margin-right: -3000px;
}
ul.nav-top {
background-color: white;
margin-left: auto;
margin-right: auto;
padding: 0;
margin-top: 0 auto;
float:left;
color: #34495e;
display:table-row;
text-align: center;
width: 100%;
margin: 0;
margin-bottom: 15px;
list-style-type: none;
padding-left: 3000px;
margin-left: -3000px;
padding-right: 3000px;
margin-right: -3000px;
}
li a.nav-top{
color: #34495e;
text-decoration: none;
padding: 20px 20px;
}
li a.nav-top:hover{
background-color: #f1f2f3;
color: #1798e5;
}
li.nav-top {
text-decoration: none;
float: left;
}
.wrapper{
max-width: 1000px;
margin-left: auto;
margin-right: auto;
}
CODEPEN: http://codepen.io/anon/pen/QdLpzM
Your html has to change a bit.
and your css