javascript - Change slide navigation for tablet -
i using navigation supplied bootstrap (and javascript supplied elsewhere).
when screen becomes small enough, navigation changes off-canvas navigation (when menu icon clicked, slides onto screen) works on phone view, however, on tablet, still seeing whole navigation. when changing min-width & max-width higher px, (from 767 800 example), doesnt work, navigation vanishes, navigation icon not viewable until screen 767px wide. dont know why happening. , have spent hours looking fix.
thank you.
^ js fiddle working version ^
http://jsfiddle.net/ezr8xrmc/1/
^ fiddle max width & min width changed ^.
if need more information, please let me know .
working code
<div class="navbar navbar-inverse" role="navigation" id="slide-nav"> <div class="container"> <div class="navbar-header"> <a class="navbar-toggle"> <span class="sr-only">toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </a> <a class="navbar-brand" href="#">project name</a> </div> <div id="slidemenu"> <form class="navbar-form navbar-right" role="form"> <div class="form-group"> <input type="search" placeholder="search" class="form-control"> </div> <button type="submit" class="btn btn-primary">search</button> </form> <ul class="nav navbar-nav"> <li class="active"><a href="#">home</a></li> <li><a href="#about">about</a></li> <li><a href="#contact">contact</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data- toggle="dropdown">dropdown <b class="caret"></b></a> <ul class="dropdown-menu"> <li><a href="#">action</a></li> <li><a href="#">another action</a></li> <li><a href="#">something else here</a></li> <li class="divider"></li> <li class="dropdown-header">nav header</li> <li><a href="#">separated link</a></li> <li><a href="#">one more separated link</a></li> <li><a href="#">action</a></li> <li><a href="#">another action</a></li> <li><a href="#">something else here</a></li> <li class="divider"></li> <li class="dropdown-header">nav header</li> <li><a href="#">separated link</a></li> <li><a href="#">one more separated link</a></li> <li><a href="#">action</a></li> <li><a href="#">another action</a></li> <li><a href="#">something else here</a></li> <li class="divider"></li> <li class="dropdown-header">nav header</li> <li><a href="#">separated link test long title goes here</a></li> <li><a href="#">one more separated link</a></li> </ul> </li> </ul> </div> </div> </div> <!--wrap page content not style this--> <div id="page-content"> <div class="container" > <h1 class="no-margin-top">bootstrap starter template</h1> <p class="lead">use document way start new project. text , barebones html document.</p> <p class="lead">use document way start new project. text , barebones html document.</p> <p class="lead">use document way start new project. text , barebones html document.</p> <p class="lead">use document way start new project. text , barebones html document.</p> <p class="lead">use document way start new project. text , barebones html document.</p> <p class="lead">use document way start new project. text , barebones html document.</p> <p class="lead">use document way start new project. text , barebones html document.</p> <p class="lead">use document way start new project. text , barebones html document.</p> <p class="lead">use document way start new project. text , barebones html document.</p> <p class="lead">use document way start new project. text , barebones html document.</p> <p class="lead">use document way start new project. text , barebones html document.</p> <p class="lead">use document way start new project. text , barebones html document.</p> <p class="lead">use document way start new project. text , barebones html document.</p> <p class="lead">use document way start new project. text , barebones html document.</p> <p class="lead">use document way start new project. text , barebones html document.</p> <p class="lead">use document way start new project. text , barebones html document.</p> <p class="lead">use document way start new project. text , barebones html document.</p> <p class="lead">use document way start new project. text , barebones html document.</p> <p class="lead">use document way start new project. text , barebones html document.</p> <p class="lead">use document way start new project. text , barebones html document.</p> <p class="lead">use document way start new project. text , barebones html document.</p> <p class="lead">use document way start new project. text , barebones html document.</p> </div> <!-- /.container --> </div> <!-- /#page-content --> /* adjust body when menu open */ body.slide-active { overflow-x: hidden } /*first child of #page-content doesn't shift around*/ .no-margin-top { margin-top: 0px!important } #page-content { position: relative; padding-top: 70px; left: 0; } #page-content.slide-active { padding-top: 0 } /* put toggle bars on left :: not using button */ #slide-nav .navbar-toggle { cursor: pointer; position: relative; line-height: 0; float: left; margin: 0; width: 30px; height: 40px; padding: 10px 0 0 0; border: 0; background: transparent; } /* icon bar prettyup - optional */ #slide-nav .navbar-toggle > .icon-bar { width: 100%; display: block; height: 3px; margin: 5px 0 0 0; } #slide-nav .navbar-toggle.slide-active .icon-bar { background: orange } .navbar-header { position: relative } .navbar.navbar-fixed-top.slide-active { position: relative } @media (max-width:767px) { #slide-nav .container { margin: 0; padding: 0!important; } #slide-nav .navbar-header { margin: 0 auto; padding: 0 15px; } #slide-nav .navbar.slide-active { position: absolute; width: 80%; top: -1px; z-index: 1000; } #slide-nav #slidemenu { background: #f7f7f7; left: -100%; width: 80%; min-width: 0; position: absolute; padding-left: 0; z-index: 2; top: -8px; margin: 0; } #slide-nav #slidemenu .navbar-nav { min-width: 0; width: 100%; margin: 0; } #slide-nav #slidemenu .navbar-nav .dropdown-menu li { min-width: 0; width: 80%; white-space: normal; } #slide-nav { border-top: 0 } #slide-nav.navbar-inverse #slidemenu { background: #333 } #slide-nav #navbar-height-col { position: fixed; top: 0; height: 100%; width: 80%; left: -80%; background: #eee; } #slide-nav.navbar-inverse #navbar-height-col { background: #333; z-index: 1; border: 0; } #slide-nav .navbar-form { width: 100%; margin: 8px 0; text-align: center; overflow: hidden; /*fast clearfixer*/ } #slide-nav .navbar-form .form-control { text-align: center } #slide-nav .navbar-form .btn { width: 100% } } @media (min-width:768px) { #page-content { left: 0!important } .navbar.navbar-fixed-top.slide-active { position: fixed } .navbar-header { left: 0!important } } $(document).ready(function () { //stick in fixed 100% height behind navbar don't wrap $('#slide-nav.navbar .container').append($('<div id="navbar-height-col"> </div>')); // enter ids or classes var toggler = '.navbar-toggle'; var pagewrapper = '#page-content'; var navigationwrapper = '.navbar-header'; var menuwidth = '100%'; // menu inside slide menu var slidewidth = '80%'; var menuneg = '-100%'; var slideneg = '-80%'; $("#slide-nav").on("click", toggler, function (e) { var selected = $(this).hasclass('slide-active'); $('#slidemenu').stop().animate({ left: selected ? menuneg : '0px' }); $('#navbar-height-col').stop().animate({ left: selected ? slideneg : '0px' }); $(pagewrapper).stop().animate({ left: selected ? '0px' : slidewidth }); $(navigationwrapper).stop().animate({ left: selected ? '0px' : slidewidth }); $(this).toggleclass('slide-active', !selected); $('#slidemenu').toggleclass('slide-active'); $('#page-content, .navbar, body, .navbar-header').toggleclass('slide-active'); }); var selected = '#slidemenu, #page-content, body, .navbar, .navbar-header'; $(window).on("resize", function () { if ($(window).width() > 767 && $('.navbar-toggle').is(':hidden')) { $(selected).removeclass('slide-active'); } }); }); thank
that's because bootstrap still has options using "old" values, example this:
@media (min-width: 768px) { .navbar-toggle { display: none; } } you need overwrite properties. did here: http://jsfiddle.net/ezr8xrmc/3/
@media (max-width:849px) { [...] /* overwriting bootstrap */ .navbar-toggle { display: block !important; } .navbar>.container .navbar-brand, .navbar>.container-fluid .navbar-brand { margin-left: 0 !important; } } @media (min-width:850px) { [...] /* overwriting bootstrap */ .navbar-toggle { display: none !important; } .navbar>.container .navbar-brand, .navbar>.container-fluid .navbar-brand { margin-left: -15 !important; } } those !important shouldn't needed, better reading added them.
i prefer customizing bootstrap instead of overwriting it: http://getbootstrap.com/customize/
Comments
Post a Comment