html - Bootstrap navbar width larger than viewport -
my navbar larger content. tried problem clicking threw browser css, nothing ist working. havent changed on bootstrap nor have overwritten thats in relation navbar.
my css & html:
/* =============================================================================================== allgemeine settings ===============================================================================================*/ html, body{ height: 100%; width: 100%; max-width: 100%; font-family: arial; } body{ overflow-x:hidden; } .clearfix:before, .clearfix:after { content: " "; display: table; } .clearfix:after { clear: both; } .clearfix { *zoom: 1; } /* =============================================================================================== landing-page settings ===============================================================================================*/ .home-section{ height: auto !important; min-height: 100%; overflow: hidden; padding-top: 50px; background: url(../pics/home.jpg) no-repeat center; background-size: cover; color: rgb(207, 207, 207); } #wrapper { text-align: center; margin-top: 20%; } #wrapper h1{ text-shadow: 2px 2px #000; } /* =============================================================================================== landing-page-menu ===============================================================================================*/ .nationalpark-options{ margin-top: 15px; margin-left: -18px; width: 647px; text-shadow: none; } .activity-options{ margin-top: 15px; margin-left: -18px; width: 326px; text-shadow: none; } .dropdown-menu li{ border-bottom: 1px solid black; } .dropdown-activity, .dropdown-ort, input[name="date"], .search{ border:2px solid darkgrey; border-right: none; vertical-align: middle; font-size: 12pt; font-weight: bold; padding-top: 10px; padding-left: 15px; list-style-type:none; float: left; width: 100%; height: 50px; color: white; text-shadow: 2px 2px #000; } input[name="date"]{ width: 65%; color:black; text-shadow: none; } .search{ width: 20%; border: none; } .dropdown-activity a, .dropdown-ort a{ color: darkgrey; } .dropdown-arrow{ float: right; padding-right: 15px; margin-top: -18px; } li.page-scroll.active{ background: transparent; border: 1px black solid; } /* =============================================================================================== banner ===============================================================================================*/ .activity-box{ background-color: rgb(0, 150, 64); height: 100px; margin-top: 184px; margin-left: -50px; vertical-align: middle; } .activity-section{ margin-top: -15%; } /* =============================================================================================== group-content ===============================================================================================*/ .button-wrapper{ margin-top: 60px; } #zurueck{ border-right: 2px solid black; } #new-group{ border-left: 2px solid black; margin-left: -4px; } .group-wrapper{ width: 100%; height: 400px; border: 1px solid grey; } .g1{ width:23%; max-width: 33%; margin-top: 10%; float:left; margin-left: 10%; } .g2{ width:23%; max-width: 33%; float: left; margin-top: 10%; margin-left: 5%; margin-right: 5%; } .g3{ width:23%; max-width: 25%; float:left; margin-top: 10%; margin-right: 10%; } .g1, .g2, .g3, .g4, .g5, .g6{ border: 1px solid darkgrey; list-style: none; text-align: center; } .g1 a, .g2 a, .g3 a, .g4 a, .g5 a, .g6 a{ color: black; } .g1 .dropdown-arrow, .g2 .dropdown-arrow, .g3 .dropdown-arrow, .g4 .dropdown-arrow, .g5 .dropdown-arrow, .g6 .dropdown-arrow{ margin-top: 1px; } .g1 ul, .g2 ul, .g3 ul{ width: 220px; } .g1 ul li{ font-size: 0.72em; } .g3 .datepicker{ height: auto; width: 100%; border: none; } .g4{ width:23%; max-width: 33%; float:left; margin-left: 10%; } .g5{ width:23%; max-width: 33%; float: left; margin-left: 5%; margin-right: 5%; } .g6{ width:23%; max-width: 25%; float:left; margin-right: 10%; } .g4, .g5, .g6{ margin-top: 10%; float: left; } .row3{ margin-top: 5%; float: right; margin-right: 11%; } /* =============================================================================================== sonstiges ===============================================================================================*/ .about-section{ height: auto !important; min-height: 100%; overflow: hidden; padding-top: 50px; } .contact-section{ height: auto !important; min-height: 100%; overflow: hidden; padding-top: 50px; } /* =============================================================================================== bootstrap-überschreiben ===============================================================================================*/ .dropdown-menu li > a:hover, .dropdown-menu li > a:focus, .dropdown-submenu:hover > a{ background-image: none; background-color: #5cb85c; } .col-md-2,.col-md-3, .col-md-6{ padding-left: 0px; padding-right: 0px; }
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>our app</title> <meta name="desciption" content="wba"> <meta name="viewport" content="windth=device-width, inital-scale=1"> <link rel="stylesheet" href="../bootstrap-3.3.5-dist/css/bootstrap.css"> <link rel="stylesheet" href="../bootstrap-3.3.5-dist/css/bootstrap-theme.css"> <link rel="stylesheet" href="../vitalets-bootstrap-datepicker-c7af15b/css/datepicker.css"> <link rel="stylesheet" href="style/style.css"> </head> <body id="page-top" data-spy="scroll" data-target=".navbar-fixed-top"> <nav class="navbar navbar-default navbar-fixed-top"> <div class="container"> <div class="navbar-header page-scroll"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse"> <span class="sr-only">toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" rel="home" href="#home" title="buy sell rent everyting"> <img style="max-width:100px; margin-top: -7px;" src="pics/logo.png"> </a> </div> <div class="collapse navbar-collapse" id="navbar-collapse"> <ul class="nav navbar-nav"> <li class="page-scroll"><a href="#home">home</a></li> <li class="dropdown"> <a data-toggle="dropdown" class="dropdown-toggle" href="#">aktivitäten <b class="caret"></b></a> <ul role="menu" class="dropdown-menu page-scroll"> <li><a href="#aktivitäten">klettern</a></li> <li><a href="#aktivitäten">wandern</a></li> <li><a href="#aktivitäten">angeln</a></li> <li><a href="#aktivitäten">jagen</a></li> <li><a href="#aktivitäten">reiten</a></li> <li><a href="#aktivitäten">mountainbiking</a></li> <li><a href="#aktivitäten">kanu fahren</a></li> </ul> </li> <li class="page-scroll"><a href="#nationalparks">nationalparks</a></li> <li class="page-scroll"><a href="#aktuelles">aktuelles</a></li> <li class="page-scroll"><a href="#unterkünfte">unterkünfte</a></li> </ul> </div> </div> </nav> <section id="home" class="home-section"> <div id="wrapper"> <h1>finde deine gruppe <br>und erlebt zusammen den park</h1> </div> </section> <section id="activity" class="activity-section"> <div class="clearfix"> <div class="row"> <div class="col-md-2 col-md-offset-3"> <div class="dropdown-ort"> nationalpark <li class="dropdown"> <a data-toggle="dropdown" class="dropdown-toggle" href="#"><span class="glyphicon glyphicon-menu-down dropdown-arrow"></span> </a> <ul role="menu" class="dropdown-menu page-scroll" id="nationalpark-options"> <li><a href="#aktivitäten">bayerischer wald (by)</a></li> <li><a href="#aktivitäten">berchtesgaden (by)</a></li> <li><a href="#aktivitäten">schleswig-holsteinisches wattenmeer (sh)</a></li> <li><a href="#aktivitäten">niedersächsisches wattenmeer (ni)</a></li> <li><a href="#aktivitäten">hamburgisches wattenmeer (hh)</a></li> <li><a href="#aktivitäten">jasmund (mv)</a></li> <li><a href="#aktivitäten">müritz (mv)</a></li> <li><a href="#aktivitäten">sächsische schweiz (sn)</a></li> <li><a href="#aktivitäten">unteres odertal (bb)</a></li> <li><a href="#aktivitäten">vorpommersche boddenlandschaft (mv)</a></li> <li><a href="#aktivitäten">hainich (th)</a></li> <li><a href="#aktivitäten">eifel (nrw)</a></li> <li><a href="#aktivitäten">kellerwald-edersee (he)</a></li> <li><a href="#aktivitäten">harz (st, ni)</a></li> <li><a href="#aktivitäten">schwarzwald (bw)</a></li> <li style="border-bottom: none;"><a href="#aktivitäten">hunsrück-hochwald (sl, rp)</a></li> </ul> </li> </div> </div> <div class="col-md-2"> <div class="dropdown-activity"> aktivität <li class="dropdown"> <a data-toggle="dropdown" class="dropdown-toggle" href="#"><span id="dropdown-arrow" class="glyphicon glyphicon-menu-down dropdown-arrow"></span> </a> <ul role="menu" class="dropdown-menu page-scroll" id="activity-options"> <li><a href="#aktivitäten">bayerischer wald (by)</a></li> <li><a href="#aktivitäten">berchtesgaden (by)</a></li> <li><a href="#aktivitäten">schleswig-holsteinisches wattenmeer (sh)</a></li> <li><a href="#aktivitäten">niedersächsisches wattenmeer (ni)</a></li> <li><a href="#aktivitäten">hamburgisches wattenmeer (hh)</a></li> <li><a href="#aktivitäten">jasmund (mv)</a></li> <li><a href="#aktivitäten">müritz (mv)</a></li> <li><a href="#aktivitäten">sächsische schweiz (sn)</a></li> <li><a href="#aktivitäten">unteres odertal (bb)</a></li> <li><a href="#aktivitäten">vorpommersche boddenlandschaft (mv)</a></li> <li><a href="#aktivitäten">hainich (th)</a></li> <li><a href="#aktivitäten">eifel (nrw)</a></li> <li><a href="#aktivitäten">kellerwald-edersee (he)</a></li> <li><a href="#aktivitäten">harz (st, ni)</a></li> <li><a href="#aktivitäten">schwarzwald (bw)</a></li> <li style="border-bottom: none;"><a href="#aktivitäten">hunsrück-hochwald (sl, rp)</a></li> </ul> </li> </div> </div> <div class="col-md-2"> <input type="text" class="datepicker" name="date" placeholder="datum auswählen"> <button type="button" class="btn btn-success search"><span class="glyphicon glyphicon-search" aria-hidden="true"></span></button> </div> </div> </div> </section> <section class="activity-label"> <div class="row"> <div class="col-md-3 col-md-offset-3"> <div id="aktivitäten" class="activity-box"> <h1>klettern</h1> </div> </div> </div> </section> <section class="groups"> <div class="row"> <div class="col-md-2 col-md-offset-3"> <div class="button-wrapper"> <button type="button" class="btn btn-success" id="zurueck">zurück</button> <button type="button" class="btn btn-warning" id="new-group">neue gruppe erstellen</button> </div> </div> </div> <div class="row"> <div class="col-md-6 col-md-offset-3"> <div class="group-wrapper"> <div class="row1"> <div class="g1"> <li class="dropdown"> <a data-toggle="dropdown" class="dropdown-toggle" href="#">nationalpark <span class="glyphicon glyphicon-menu-down dropdown-arrow"></span></a> <ul role="menu" class="dropdown-menu page-scroll"> <li><a href="#aktivitäten">bayerischer wald (by)</a></li> <li><a href="#aktivitäten">berchtesgaden (by)</a></li> <li><a href="#aktivitäten">schleswig-holsteinisches wattenmeer (sh)</a></li> <li><a href="#aktivitäten">niedersächsisches wattenmeer (ni)</a></li> <li><a href="#aktivitäten">hamburgisches wattenmeer (hh)</a></li> <li><a href="#aktivitäten">jasmund (mv)</a></li> <li><a href="#aktivitäten">müritz (mv)</a></li> <li><a href="#aktivitäten">sächsische schweiz (sn)</a></li> <li><a href="#aktivitäten">unteres odertal (bb)</a></li> <li><a href="#aktivitäten">vorpommersche boddenlandschaft (mv)</a></li> <li><a href="#aktivitäten">hainich (th)</a></li> <li><a href="#aktivitäten">eifel (nrw)</a></li> <li><a href="#aktivitäten">kellerwald-edersee (he)</a></li> <li><a href="#aktivitäten">harz (st, ni)</a></li> <li><a href="#aktivitäten">schwarzwald (bw)</a></li> <li style="border-bottom: none;"><a href="#aktivitäten">hunsrück-hochwald (sl, rp)</a></li> </ul> </li> </div> <div class="g2"> <li class="dropdown"> <a data-toggle="dropdown" class="dropdown-toggle" href="#">nationalpark <span class="glyphicon glyphicon-menu-down dropdown-arrow"></span></a> <ul role="menu" class="dropdown-menu page-scroll"> <li><a href="#aktivitäten">klettern</a></li> <li><a href="#aktivitäten">wandern</a></li> <li><a href="#aktivitäten">angeln</a></li> <li><a href="#aktivitäten">jagen</a></li> <li><a href="#aktivitäten">reiten</a></li> <li><a href="#aktivitäten">mountainbiking</a></li> <li><a href="#aktivitäten">kanu fahren</a></li> </ul> </li> </div> <div class="g3"> <input type="text" class="datepicker" placeholder="datum auswählen"> </div> </div> <div class="row2"> <div class="g4"> <li class="dropdown"> <a data-toggle="dropdown" class="dropdown-toggle" href="#">nationalpark <span class="glyphicon glyphicon-menu-down dropdown-arrow"></span></a> <ul role="menu" class="dropdown-menu page-scroll"> <li><a href="#aktivitäten">bayerischer wald (by)</a></li> <li><a href="#aktivitäten">berchtesgaden (by)</a></li> <li><a href="#aktivitäten">schleswig-holsteinisches wattenmeer (sh)</a></li> <li><a href="#aktivitäten">niedersächsisches wattenmeer (ni)</a></li> <li><a href="#aktivitäten">hamburgisches wattenmeer (hh)</a></li> <li><a href="#aktivitäten">jasmund (mv)</a></li> <li><a href="#aktivitäten">müritz (mv)</a></li> <li><a href="#aktivitäten">sächsische schweiz (sn)</a></li> <li><a href="#aktivitäten">unteres odertal (bb)</a></li> <li><a href="#aktivitäten">vorpommersche boddenlandschaft (mv)</a></li> <li><a href="#aktivitäten">hainich (th)</a></li> <li><a href="#aktivitäten">eifel (nrw)</a></li> <li><a href="#aktivitäten">kellerwald-edersee (he)</a></li> <li><a href="#aktivitäten">harz (st, ni)</a></li> <li><a href="#aktivitäten">schwarzwald (bw)</a></li> <li style="border-bottom: none;"><a href="#aktivitäten">hunsrück-hochwald (sl, rp)</a></li> </ul> </li> </div> <div class="g5"> <li class="dropdown"> <a data-toggle="dropdown" class="dropdown-toggle" href="#">nationalpark <span class="glyphicon glyphicon-menu-down dropdown-arrow"></span></a> <ul role="menu" class="dropdown-menu page-scroll"> <li><a href="#aktivitäten">klettern</a></li> <li><a href="#aktivitäten">wandern</a></li> <li><a href="#aktivitäten">angeln</a></li> <li><a href="#aktivitäten">jagen</a></li> <li><a href="#aktivitäten">reiten</a></li> <li><a href="#aktivitäten">mountainbiking</a></li> <li><a href="#aktivitäten">kanu fahren</a></li> </ul> </li> </div> <div class="g6"> <li class="dropdown"> <a data-toggle="dropdown" class="dropdown-toggle" href="#">nationalpark <span class="glyphicon glyphicon-menu-down dropdown-arrow"></span></a> <ul role="menu" class="dropdown-menu page-scroll"> <li><a href="#aktivitäten">klettern</a></li> <li><a href="#aktivitäten">wandern</a></li> <li><a href="#aktivitäten">angeln</a></li> <li><a href="#aktivitäten">jagen</a></li> <li><a href="#aktivitäten">reiten</a></li> <li><a href="#aktivitäten">mountainbiking</a></li> <li><a href="#aktivitäten">kanu fahren</a></li> </ul> </li> </div> </div> <div class="row3"> <button type="button" class="btn btn-success" id="bestaetigen">bestätigen</button> </div> </div> </div> </div> </section> <section id="nationalparks" class="about-section"> nationalparks </section> <section id="aktuelles" class="contact-section"> aktuelles </section> <section id="unterkünfte" class="contact-section"> unterkünfte </section> <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script> <script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script> <script src="scroll-nav.js"></script> <script src="content_jquery.js"></script> <script src="../bootstrap-3.3.5-dist/js/bootstrap.min.js"></script> <script src="../vitalets-bootstrap-datepicker-c7af15b/js/bootstrap-datepicker.js"></script> <script src="../vitalets-bootstrap-datepicker-c7af15b/js/locales/bootstrap-datepicker.de.js"></script> </body> </html>
this looks like: http://www.directupload.net/file/d/4096/ztgt2d8h_jpg.htm
so want rid of whitespace on right side somehow caused navbar
create css file line hide unwanted space.
body { overflow-x:hidden; }
Comments
Post a Comment