html - Bootstrap navbar items not spacing to my adjustments no matter how many I make -
i'm trying make navbar items responsively space end or @ least close i'm using media queries , padding space them no matter how increment padding or size increase increment at, of navbar buttons still drop line below i'm trying avoid.
here's navbar code followed css. site i'm working on http://staging.kareemhackett.com/home.html i'm working on around fix not catching breaks it's small oversight, appreciated.
<nav class="navbar transparent navbar-static-top" role="navigation"> <nav class="navbar-inner"> <div class="container-fluid"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#example-nav-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 animsition-link" href="home.html"><img class="img-responsive" src="img/bang_final50-1.png"></a></div> <div class="collapse navbar-collapse text-center" id="example-nav-collapse"> <ul class="nav navbar-nav"> <li><a class="animsition-link" href="about.html">about</a></li> <li><a class="animsition-link" href="contact.html">contact</a></li> <li><a class="animsition-link" href="services.html">services</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">stylists</a> <ul class="dropdown-menu" role="menu"> <li><a class="text-center animsition-link" href="justin.html">justin</a></li> <li><a class="text-center animsition-link" href="sarah.html">sarah</a></li> <li><a class="text-center animsition-link" href="noelia.html">noelia</a></li> <li><a class="text-center animsition-link" href="matthew.html">matthew</a></li> <li><a class="text-center animsition-link" href="meaghan.html">meaghan</a></li> </ul> </li> <li><a href="https://instagram.com/bangtoronto/" target="_blank"><i class="fa fa-instagram fa-lg"></i></a></li> <li><a href="https://www.facebook.com/bangsalontoronto" target="_blank"><span class="fa fa-facebook-official fa-lg"></span></a></li> <li><a href="https://twitter.com/bangsalonto" target="_blank"><i class="fa fa-twitter fa-lg"></i></a></li> <li><a class="btn btn-xs btn-primary outline" href="https://clients.mindbodyonline.com/classic/ws?studioid=224446&stype=41" target="_blank">book online</a></li> </ul> </div> </div> </nav> </nav> related css
@media screen , (min-width: 3200px){ .navbar-nav > li{ padding-left: 3.5%; padding-right: 3.5%; } } @media screen , (min-width: 2581px) , (max-width: 3199px){ .navbar-nav > li{ padding-left: 3%; padding-right: 3%; } } @media screen , (min-width: 2187px) , (max-width: 2580px){ .navbar-nav > li{ padding-left: 2.5%; padding-right: 2.5%; } } @media screen , (min-width: 1915px) , (max-width: 2186px){ .navbar-nav > li{ padding-left: 2%; padding-right: 2%; } } @media screen , (min-width: 1723px) , (max-width: 1914px){ .navbar-nav > li{ padding-left: 1.5%; padding-right: 1.5%; } } @media screen , (min-width: 1562px) , (max-width: 1722px){ .navbar-nav > li{ padding-left: 1%; padding-right: 1%; } } @media screen , (min-width: 1441px) , (max-width: 1561px){ .navbar-nav > li{ padding-left: 0.5%; padding-right: 0.5%; } } @media screen , (min-width: 1355px) , (max-width: 1440px){ .navbar-nav > li{ padding-left: 9px; padding-right: 9px; } } body { letter-spacing: 1px; margin: 0; padding: 0; } h1 { font-family: "roboto", sans-serif; font-weight: 900; color: #bde4e1; text-align: left; font-size: 400%; } .container { padding: 0; } .intro { background: url(img/headerbg.jpg) no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; height: 100vh; } .home { background: url(img/homeheader.jpg) no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; width: 100%; height: 100vh; } .about { background: url(img/aboutbg.jpg) no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; min-height: 100vh; background-size: cover; /* width: 100%; height: 100%;*/ } .contact { background: url(img/contactbg.jpg) no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; width: 100%; /*height: 100%;*/ min-height: 100vh; position: absolute; } .services { background: url(img/servicesbg.jpg) no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; width: 100%; min-height: 100vh; position: absolute; } .justin { background: url(img/guybg.jpg) no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; width: 100%; min-height: 100vh; position: absolute; } .sarah { background: url(img/girl1bg.jpg) no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; width: 100%; height: 100vh; position: absolute; } .noelia { background: url(img/girl2bg.jpg) no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; width: 100%; min-height: 100vh; position: absolute; } .matthew { background: url(img/guybg.jpg) no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; width: 100%; height: 100vh; position: absolute; } .meaghan { background: url(img/girl1bg.jpg) no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; width: 100%; height: 100vh; position: absolute; } .site-wrapper { display: table; width: 100%; height: 100%; /* @ least firefox */ min-height: 100%; -webkit-box-shadow: inset 0 0 100px rgba(0, 0, 0, .5); box-shadow: inset 0 0 100px rgba(0, 0, 0, .5); } .site-wrapper-inner { display: table-cell; vertical-align: middle; } .cover-container { margin-right: auto; margin-left: auto; } /* padding spacing */ .inner { padding: 30px; } .cover { padding: 0 20px; } .cover .btn-lg { padding: 10px 20px; font-weight: bold; } @media (min-width: 768px) { .site-wrapper-inner { vertical-align: middle; } .cover-container { width: 100%; } } @media (min-width: 992px) { .cover-container { width: 700px; } } .navbar .navbar-nav { display: inline-block; float: none; vertical-align: top; } .navbar .navbar-collapse { text-align: center; } .navbar.transparent .navbar-inner .open .dropdown-menu>li>a, .navbar.transparent .navbar-inner .open .dropdown-menu { background-color: #bde4e1; color: #5b5e5e; } .navbar.transparent .navbar-inner { color: #ffffff; background: transparent; } .navbar.transparent .navbar-inner li { color: #ffffff; font-family: 'roboto', sans-serif; font-size: 10pt; letter-spacing: 3pt; } .navbar.transparent .nav > li > a:focus, .navbar.transparent .nav > li > a:hover { color: #bde4e1; text-decoration: none; background-color: transparent; } .button.navbar-toggle.collapsed:focus, .button.navbar-toggle.collapsed:hover { color: #666666; } .navbar.transparent .navbar-brand:hover, .navbar.transparent .navbar-brand:focus { background-color: transparent; color: #ffffff; } .navbar.transparent .navbar-brand { background-color: transparent; color: #ffffff; font-family: "tenor sans"; font-size: 16pt; letter-spacing: 1pt; } .navbar-toggle { position: relative; float: right; padding: 9px 10px; margin-top: 8px; margin-right: 15px; margin-bottom: 8px; background-image: none; border: 1px solid transparent; border-radius: 4px; } .navbar-toggle .icon-bar { display: block; width: 22px; height: 2px; border-radius: 1px; background-color: #bde4e1; } @media screen , (min-width: 3200px) { .navbar-nav > li { padding-left: 3.5%; padding-right: 3.5%; } } @media screen , (min-width: 2581px) , (max-width: 3199px) { .navbar-nav > li { padding-left: 3%; padding-right: 3%; } } @media screen , (min-width: 2187px) , (max-width: 2580px) { .navbar-nav > li { padding-left: 2.5%; padding-right: 2.5%; } } @media screen , (min-width: 1915px) , (max-width: 2186px) { .navbar-nav > li { padding-left: 2%; padding-right: 2%; } } @media screen , (min-width: 1723px) , (max-width: 1914px) { .navbar-nav > li { padding-left: 1.5%; padding-right: 1.5%; } } @media screen , (min-width: 1562px) , (max-width: 1722px) { .navbar-nav > li { padding-left: 1%; padding-right: 1%; } } @media screen , (min-width: 1441px) , (max-width: 1561px) { .navbar-nav > li { padding-left: 0.5%; padding-right: 0.5%; } } @media screen , (min-width: 1355px) , (max-width: 1440px) { .navbar-nav > li { padding-left: 9px; padding-right: 9px; } } /*@media screen , (max-width: 1354px) , (min-width: 1276px){ .navbar-nav > li{ padding-left: 5px; padding-right: 5px; } }*/ @media (max-width: 1274px) { .navbar-header { float: none; } .navbar-left, .navbar-right { float: none !important; } .navbar-toggle { display: block; } .navbar-collapse { /*border-top: 1px solid transparent;*/ box-shadow: none; } .navbar-fixed-top { top: 0; border-width: 0 0 1px; } .navbar-collapse.collapse { display: none!important; } .navbar-nav { float: none!important; margin-top: 7.5px; } .navbar-nav>li { float: none; } .navbar-nav>li>a { padding-top: 10px; padding-bottom: 10px; } .collapse.in { display: block !important; } } @media screen , (max-width: 1199px) { .navbar-nav > li { padding-left: -10px; padding-right: -10px; } } .btn.outline { background: none; padding: 12px 22px; } .btn-primary.outline { border: 2px solid white; color: white; } .btn-primary.outline:hover, .btn-primary.outline:focus, .btn-primary.outline:active, .btn-primary.outline.active, .open > .dropdown-toggle.btn-primary { color: #bde4e1; border-color: #bde4e1; } .btn-primary.outline:active, .btn-primary.outline.active { border-color: #bde4e1; color: #bde4e1; box-shadow: none; } @media screen , (max-width: 767px) { .selected-box { background-color: transparent; color: white; /* position: absolute; top: 50%; left:50%; transform: translate(-50%,-50%);*/ padding-left: 30px; padding-right: 30px; padding-bottom: 10px; font-family: "roboto", sans-serif; font-weight: 100; font-size: 150% } } @media screen , (min-width: 768px) , (max-width: 991px) { .selected-box { background-color: transparent; color: white; /* position: absolute; top: 50%; left:50%; transform: translate(-50%,-50%);*/ padding-left: 30px; padding-right: 30px; padding-bottom: 10px; font-family: "roboto", sans-serif; font-weight: 100; font-size: 200% } } @media screen , (min-width: 992px) { .selected-box { background-color: transparent; color: white; /* position: absolute; top: 50%; left:50%; transform: translate(-50%,-50%);*/ padding-left: 30px; padding-right: 30px; padding-bottom: 10px; font-family: "roboto", sans-serif; font-weight: 100; font-size: 300% } } .stylist-box { margin-top: 5%; background-color: transparent; font-family: "roboto", sans-serif; font-weight: 100; color: white; border-top-style: solid; border-top-color: white; border-top-width: thin; border-bottom-style: solid; border-bottom-color: white; border-bottom-width: thin; } .bolded { font-family: "roboto", sans-serif; font-weight: 500; color: white; } .price { color: #bde4e1; } .portfolio-link { font-family: "roboto", sans-serif; font-weight: 400; color: white; font-size: 130%; } .modal-price-list { background-color: #bde4e1; opacity: 1; font-family: "roboto", sans-serif; font-weight: 100; color: #5b5e5e; } .modal-price-bold { font-family: "roboto", sans-serif; font-weight: 500; color: #5b5e5e; } @media screen , (min-width: 982px) { .modal.custom .modal-dialog { width: 28%; margin-top: 50% auto; } } @media screen , (min-width: 768px) , (max-width: 981px) { .modal.custom .modal-dialog { width: 48%; margin-top: 50% auto; } } .modal.modal-wide .modal-dialog { width: 90%; } .modal-wide .modal-body { overflow-y: auto; } .navbar-nav > li { margin-top: 10px; } @media screen , (max-width: 1222px) { .navbar-nav>li>a { line-height: 5px; } } @media screen , (min-width: 1275px) { .dropdown:hover .dropdown-menu { display: block; background-color: #bde4e1; color: #5b5e5e; min-width: 135px !important; } } @media screen , (max-width: 1274px) { .dropdown:hover .dropdown-menu { display: block; background-color: #bde4e1; color: #5b5e5e; padding: 5px 15px 5px 25px; } }<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="x-ua-compatible" content="ie=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- above 3 meta tags *must* come first in head; other head content must come *after* these tags --> <meta name="description" content=""> <meta name="author" content=""> <link rel="icon" href="../../favicon.ico"> <title>bang salon | official site</title> <!-- icon --> <link rel="icon" href="favicon.ico" type="image/x-icon" /> <!-- bootstrap core css --> <link href="css/bootstrap.min.css" rel="stylesheet"> <!-- font awesome --> <link rel="stylesheet" href="css/font-awesome.min.css"> <!-- fonts used --> <link href='http://fonts.googleapis.com/css?family=roboto:500,900,100,300,400' rel='stylesheet' type='text/css'> <!-- custom styles--> <link href="newstyle.css" rel="stylesheet"> <!-- animsition css --> <link rel="stylesheet" href="css/animsition.min.css"> <!-- debugging purposes. don't copy these 2 lines! --> <!--[if lt ie 9]><script src="../../assets/js/ie8-responsive-file-warning.js"></script><![endif]--> <script src="js/ie-emulation-modes-warning.js"></script> <!-- html5 shim , respond.js ie8 support of html5 elements , media queries --> <!--[if lt ie 9]> <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script> <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> <![endif]--> </head> <body> <div class="animsition"> <div class="home"> <nav class="navbar transparent navbar-static-top"> <div class="navbar-inner"> <div class="container-fluid"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar"> <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" href="home.html"> <img class="img-responsive" src="img/bang_final50-1.png"> </a> </div> <div id="navbar" class="collapse navbar-collapse text-center"> <ul class="nav navbar-nav"> <li><a class="animsition-link" href="about.html">about</a> </li> <li><a class="animsition-link" href="contact.html">contact</a> </li> <li><a class="animsition-link" href="services.html">services</a> </li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">stylists</a> <ul class="dropdown-menu" role="menu"> <li><a class="text-center animsition-link" href="justin.html">justin</a> </li> <li><a class="text-center animsition-link" href="sarah.html">sarah</a> </li> <li><a class="text-center animsition-link" href="noelia.html">noelia</a> </li> <li><a class="text-center animsition-link" href="matthew.html">matthew</a> </li> <li><a class="text-center animsition-link" href="meaghan.html">meaghan</a> </li> </ul> </li> <li><a href="https://instagram.com/bangtoronto/" target="_blank"><i class="fa fa-instagram fa-lg"></i></a> </li> <li><a href="https://www.facebook.com/bangsalontoronto" target="_blank"><span class="fa fa-facebook-official fa-lg"></span></a> </li> <li><a href="https://twitter.com/bangsalonto" target="_blank"><i class="fa fa-twitter fa-lg"></i></a> </li> <li><a class="btn btn-xs btn-primary outline" href="https://clients.mindbodyonline.com/classic/ws?studioid=224446&stype=41" target="_blank">book online</a> </li> </ul> </div> <!--/.nav-collapse --> </div> </div> </nav> </div> </div> <!-- bootstrap core javascript ================================================== --> <!-- placed @ end of document pages load faster --> <script src="js/jquery.min.js"></script> <script src="js/bootstrap.min.js"></script> <!-- ie10 viewport hack surface/desktop windows 8 bug --> <script src="js/ie10-viewport-bug-workaround.js"></script> <!-- animsition js --> <script src="js/jquery.animsition.min.js"></script> <script src="js/main.js"></script> </body> </html>the hidden snippet full css , html see on site. looked @ bootstrap nav spacing issues before posting didn't come across specific issue unfortunately
here 1 solution seems work example: change css match following.
@media screen , (max-width: 1914px) , (min-width: 1715px) .navbar-nav > li { padding-left: 0.5%; padding-right: 0.5%; } i reducing padding because padding of 3% total each element end 24% of page being padding, li items won't fit that.
.navbar .navbar-nav { vertical-align: top; float: right; display: block; } your ul can float right if want take right side of page, , make display block well.
does work you?
Comments
Post a Comment