Make fixed div not scroll Horizontally?

Question

I have a navbar that I am trying to make sticky. It works until the user scrolls horizontally on smaller screen sizes, then the navbar scrolls with them, while the page remains in its position (its set to absolute ) I need it to be fixed vertically so to say, but absolute horizontally. Or is there another way to achieve this/is there a workaround?

**CSS and CSS**

 .wrapper { min-width: 900px; } .header { height: 0px; width: 604px; margin-right: auto; margin-left: auto; position: relative; -webkit-transition: transform 0.5s ease 0s; -moz-transition: transform 0.5s ease 0s; -ms-transition: transform 0.5s ease 0s; -o-transition: transform 0.5s ease 0s; transition: transform 0.5s ease 0s; } /* Page 1 */ .wrapper .contentpagewrapper1 { height: auto; width: 650px; margin-right: auto; margin-left: auto; position: relative; z-index: 6; opacity: 1; display: block; top: -10px; } .wrapper .contentpage1 { background-image: url(../images/Page%20no%20shadow2.jpg); background-repeat: repeat; background-position: center center; box-shadow: 0px 0px 50px 1px #000000; height: auto; width: 650px; margin-right: auto; margin-left: auto; position: absolute; top: 70px; } .wrapper .contentpage1 h1 { font-family: 'Lusitana', serif; color: #666; padding-left: 15px; padding-top: 10px; } .wrapper .contentpage1 p { font-family: 'Lusitana', serif; color: #999; padding-right: 15px; padding-bottom: 15px; padding-left: 15px; } /* Page 2 */ .wrapper .contentpagewrapper2 { height: auto; width: 650px; margin-right: auto; margin-left: auto; position: relative; z-index: 6; opacity: 1; display: none; top: -10px; } .wrapper .contentpage2 { background-image: url(../images/Page%20no%20shadow2.jpg); background-repeat: repeat; background-position: center center; box-shadow: 0px 0px 50px 1px #000000; height: auto; width: 650px; margin-right: auto; margin-left: auto; position: absolute; top: 70px; } .wrapper .contentpage2 h1 { font-family: 'Lusitana', serif; color: #666; padding-left: 15px; padding-top: 10px; } .wrapper .contentpage2 p { font-family: 'Lusitana', serif; color: #999; padding-right: 15px; padding-bottom: 15px; padding-left: 15px; } /* Page 3 */ .wrapper .contentpagewrapper3 { height: auto; width: 650px; margin-right: auto; margin-left: auto; position: relative; z-index: 6; opacity: 1; display: none; top: -10px; } .wrapper .contentpage3 { background-image: url(../images/Page%20no%20shadow2.jpg); background-repeat: repeat; background-position: center center; box-shadow: 0px 0px 50px 1px #000000; height: auto; width: 650px; margin-right: auto; margin-left: auto; position: absolute; top: 70px; } .wrapper .contentpage3 h1 { font-family: 'Lusitana', serif; color: #666; padding-left: 15px; padding-top: 10px; } .wrapper .contentpage3 p { font-family: 'Lusitana', serif; color: #999; padding-right: 15px; padding-bottom: 15px; padding-left: 15px; } .header:hover { transform: scale(1.05); cursor: pointer; } .navbar { height: 0px; width: 400px; margin-right: auto; margin-left: auto; z-index: 5; position: relative; top: 200px; } .navbar ul { list-style-type: none; margin: 0; padding: 0; } .navbar a { display: block; width: 400px; height: 79px; text-align: center; padding-top: 20px; background-image: url(../images/Menu%20Button2.png); text-decoration: none; color: #FFF; text-shadow: 1px 1px 5px #000000; background-position: center center; font-size: 24px; font-family: Arial, Helvetica, sans-serif; line-height: 60px; position: relative; -webkit-transition: color 0.5s ease 0s; -moz-transition: color 0.5s ease 0s; -ms-transition: color 0.5s ease 0s; -o-transition: color 0.5s ease 0s; transition: color 0.5s ease 0s; } .navbar a:hover { color: #D4B906; } .header #logo { height: 200px; width: 504px; margin-right: auto; margin-left: auto; z-index: 4; } .navbar .show, a:hover span { display: none; } .navbar a:hover .show { display: inline; } .wrapper .header2 { position: fixed; height: 73px; width: 100%; text-align: center; z-index: 8; } .navbar2 { position: relative; height: 73px; width: 880px; margin-right: auto; margin-left: auto; background-image: url(../images/Header3.png); background-repeat: no-repeat; background-position: center center; background-color: #FF0; } .navbar2 .navshadow { box-shadow: 0 5px 40px -15px black; height: 65px; width: 745px; margin-right: auto; margin-left: auto; position: relative; left: -2px; } .navbar2 .menu2 { list-style-type: none; padding: 0; margin-right: auto; margin-left: auto; text-align: center; margin-top: 0; margin-bottom: 0; line-height: 100px; } .navbar2 li { display: inline; } .navbar2 li:nth-child(1) { padding-right: 5px; padding-left: 10px; } .navbar2 li:nth-child(2) { padding-right: 10px; padding-left: 10px; } .navbar2 li:nth-child(3) { padding-right: 145px; padding-left: 145px; } .navbar2 li:nth-child(4) { padding-right: 5px; padding-left: 5px; } .navbar2 li:nth-child(5) { padding-right: 5px; padding-left: 5px; } .navbar2 a { text-align: center; text-decoration: none; font-family: Arial, Helvetica, sans-serif; color: #7A6E00; font-size: 18px; -webkit-transition: color 0.5s ease 0s; -moz-transition: color 0.5s ease 0s; -ms-transition: color 0.5s ease 0s; -o-transition: color 0.5s ease 0s; transition: color 0.5s ease 0s; } .navbar2 a:hover { color: #FFF; } 

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Lemon Tree</title> <META NAME="ROBOTS" CONTENT="NOINDEX, NOFOLLOW"> <link rel="stylesheet" type="text/css" href="css/about.css"/> <link href='http://fonts.googleapis.com/css?family=Lusitana:700,400' rel='stylesheet' type='text/css'> <link rel="stylesheet" type="text/css" href="js/font-awesome-4.2.0/css/font-awesome.min.css"/> <script src="js/jquery-1.11.1.min.js"></script> <script src="js/jquery.nicescroll.js"></script> <script src="js/fullPage.js-master/fullPage.js-master/vendors/jquery.easings.min.js"></script> <script type="text/javascript" src="js/GSAP/src/minified/TweenMax.min.js"></script> <script type="text/javascript"> $(document).ready(function() { $("html").niceScroll({ cursorcolor: "#FF0" }); }); </script> <style type="text/css"> html { background: url(images/BG.jpg) no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; background-color: #FFF; } body { margin: 0px; } </style> </head> <body> <div class="wrapper"> <div class="header2"> <div class="navbar2"> <div class="navshadow"> <ul class="menu2"> <li><a id="homepage2" href="index.html"><i class="fa fa-home"></i> Home</a></li> <li><a id="aboutpage2" href="about.html"><i class="fa fa-info-circle"></i> About Us</a></li> <li><a id="homepage2" href="index.html">       </a></li> <li><a id="servicespage2" href="services.html"><i class="fa fa-tasks"></i> Services</a></li> <li><a id="contactpage2" href="contact.html"><i class="fa fa-envelope"></i> Contact</a></li> </ul> </div> </div> </div> <div class="contentpagewrapper1"> <div class="contentpage1"> <h1><i class="fa fa-info-circle"></i> Who Are We?</h1><p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.</p> <p>Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur? At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere.</p> <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur? At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere.</p> </div> </div> </div> <!-- wrap --> </body> </html> 

Answer 1

You have to either use % width or a responsive container

@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {
/* Styles */
}

/* iPads (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) {
/* Styles */
}

Add new styles to display the menu differently when these screensize are used

Answer 2

I got something to that effect to work making the following adjustments to your CSS:

   /* Page 1 */
.wrapper .contentpagewrapper1 {
    width: 650px;
    margin-right: 125;
    margin-left: 125;
    position: fixed;
    top: 0;
    bottom: 0;
    z-index: 6;
    opacity: 1;
    display: block;
    overflow: auto;
}
.wrapper .contentpagewrapper1::-webkit-scrollbar {
    display: none;
}
/* Some more of your unchanged code */
.wrapper .header2 {
    position: relative;
    height: 73px;
    width: 100%;
    text-align: center;
    z-index: 8;
}

So basically you changed your fixed header to a relative header and make it so your content is fixed and any overflow is scrollable. Use the -webkit- to destroy the ugly extra scrollbars that are created. This code misbehaves on large screens but I think with some tweaking to the rest of your CSS this could be a viable way to get the functionality you're looking for.