css - navbar dropdown menus display issue on mobile and small devices with media query -


not big expert in css , responsiveness design, try collapse navbar using media query. issue dropdown menus, responsive design not applied correctl : dropdown menus displayed on large desktop device.

what want :

result expected

but result obtain :

current result

my code following : 

    <nav class="navbar navbar-default">         <div class="container-fluid">             <!-- brand , toggle grouped better mobile display -->             <div class="navbar-header">                 <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> <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="#">brand</a>              </div>             <!-- collect nav links, forms, , other content toggling -->             <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">                 <ul class="nav navbar-nav">                     <li class="active"><a href="#">link <span class="sr-only">(current)</span></a>                      </li>                     <li><a href="#">link</a>                      </li>                     <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">dropdown <span class="caret"></span></a>                          <ul class="dropdown-menu" role="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><a href="#">separated link</a>                              </li>                             <li class="divider"></li>                             <li><a href="#">one more separated link</a>                              </li>                         </ul>                     </li>                 </ul>                 <form class="navbar-form navbar-left" role="search">                     <div class="form-group">                         <input type="text" class="form-control" placeholder="search">                     </div>                     <button type="submit" class="btn btn-default">submit</button>                 </form>                 <ul class="nav navbar-nav navbar-right">                     <li><a href="#">link</a>                      </li>                     <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">dropdown <span class="caret"></span></a>                          <ul class="dropdown-menu" role="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><a href="#">separated link</a>                          </li>                     </ul>                 </li>             </ul>         </div>         <!-- /.navbar-collapse -->     </div>     <!-- /.container-fluid --> </nav>

and media query current 1 found googling web : 

@media (max-width: 992px) {     .navbar-header {         float: none;     }     .navbar-left,.navbar-right {         float: none !important;     }     .navbar-toggle {         display: block;     }     .navbar-collapse {         border-top: 1px solid transparent;         box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);     }     .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;     } }

additional info : menu displayed when viewport size under 768px.

i guess, there missing on media query handling dropdown menu case don't know ? can me ?

thanks lot.

here fiddle remove default style dropdown

jsfiddle.net/qxgy6l9b/18/

Comments

Post a Comment

Popular posts from this blog

ubuntu - PHP script to find files of certain extensions in a directory, returns populated array when run in browser, but empty array when run from terminal -

i running os ububtu 16.04. ultimate goal able run php script cron job every minute. here php script located @ /var/www/html/tests/test/index.php : <?php $directorypath = $_server['document_root']."/tests/test/data/"; echo "directorypath: $directorypath<br><br>";//check $imagefilepathsarray = glob($directorypath . "*.{png,gif}", glob_brace); echo "<br><br>imagefilepathsarray: "; print_r($imagefilepathsarray);//check ?> when open php script in browser visiting url my-ip-address/tests/test/index.php , get: directorypath: /var/www/html/tests/test/data/ imagefilepathsarray:array( [0] => /var/www/html/tests/test/data/pic.png [1] => /var/www/html/tests/test/data/pic.gif ) before writing cron job in crontab file, need check if can run anywhere using terminal . opened ubuntu terminal @ /home/ location, , executed in terminal: sudo php /var/www/html/tests/test/index.php i got following out...
Read more

php - How can i create a user dashboard -

today have questions you, want create user dashboard site, include (obviously), users data, example -email -username -and others stuff how can information, , print them in html page? if can, how can these information via php sessions? shuld use session? example, if user login, , start new session ( session_start() ), how can data print in dashboard? should use php "project"? in advice, have day , thank time!
Read more

javascript - How to detect toggling of the fullscreen-toolbar in jQuery Mobile? -

i have jquery mobile page fixed full-screen toolbar, data-tap-toggle enabled. straight under toolbar have positioned banner should slide upwards when toolbar hiding , slide downward when toolbar showing. jquery mobile toggles toolbar applying , removing ui-fixed-hidden class - sadly, can't find in documentation of toolbar widget toggle , hide or show event that. how can detect when toolbar toggled, reposition banner? .banner { position: fixed; background-color: darkseagreen; top: 46px; min-height: 48px; width: 100%; text-align: center; line-height: 48px; } <!doctype html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"> <link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.css"> <script src="https://code.jquery.com/jquery-1....
Read more