jquery - bootstrap responsive utilities -
jquery - bootstrap responsive utilities -
i have code used create menus phone in header
<?php if ($categories) { ?> <div class="container visible-phone"> <nav id="menu" class="navbar"> <div class="navbar-header"><span id="category" class="visible-xs"><?php echo $text_category; ?></span> <button type="button" class="btn btn-navbar navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse"><i class="fa fa-bars"></i></button> </div> // , other tags creating menu </nav> </div> <?php } ?>
and along want create vertical menu, desktop , little devices m hidding hidden-xs, creating through
<div class="container" id="left-menu"> <nav id="menu" class="navbar-nav"> <ul class="nav sidebar"> <?php foreach ($categories $category) { ?> <?php if($category['children']){?> <li class="dropdown-submenu"> <a href="<?php echo $category['href']; ?>"><?php echo $category['name']; ?></a> <div class="dropdown-menu"> // other tags creating menus </li> <?php }?> <?php } ?> </ul> </nav> </div>
problem when not utilize visible-phone, in first horizontal menu, both display fine. utilize visible-phone first menu margin-left property of subsequent menu of sec menu become -196.xxx.
please remember remove visible-phone class both menu display correctly on desktop should. new user of bootstrap , jquery guidance of import me.
thankyou in advance.
also sharing css submenus
.dropdown-submenu { position: relative; } .dropdown-submenu>.dropdown-menu { top: 0; left: 100%; margin-top: -6px; margin-left: -1px; -webkit-border-radius: 0 6px 6px 6px; -moz-border-radius: 0 6px 6px; border-radius: 0 6px 6px 6px; } .dropdown-submenu:hover>.dropdown-menu { display: block; } .dropdown-submenu>a:after { display: block; content: " "; float: right; width: 0; height: 0; border-color: transparent; border-style: solid; border-width: 5px 0 5px 5px; border-left-color: #ccc; margin-top: 5px; margin-right: -10px; } .dropdown-submenu:hover>a:after { border-left-color: #fff; } .dropdown-submenu.pull-left { float: none; } .dropdown-submenu.pull-left>.dropdown-menu { left: -100%; margin-left: 10px; -webkit-border-radius: 6px 0 6px 6px; -moz-border-radius: 6px 0 6px 6px; border-radius: 6px 0 6px 6px; }
jquery css twitter-bootstrap responsive-design
Comments
Post a Comment