I'm using bootstrap on WordPress using the _ib
theme, and I would like to add in my own responsive menu for when window is less than 768px. By default bootstrap will convert the menu to a dropdown-toggle
, which when clicked shows your original menu. What I would like to do is implement my own menu when it is used on a small device or at a low resolution.
How would I remove this dropdown-toggle
? I have looked around the bootstrap JS files, but I'm no JS whizz, so I can't quite figure out how to simply scrap the dropdown-toggle
.
Any help appreciated!
EDIT:
<div class="container">
<div class="row">
<div class="site-navigation-inner col-sm-12">
<div class="navbar navbar-default">
<div class="navbar-header">
<!-- .navbar-toggle is used as the toggle for collapsed navbar content -->
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-responsive-collapse">
<span class="sr-only">Go to...</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<!-- The WordPress Menu goes here -->
<?php wp_nav_menu(
array(
'theme_location' => 'primary',
'container_class' => 'collapse navbar-collapse navbar-responsive-collapse',
'menu_class' => 'nav navbar-nav',
'fallback_cb' => '',
'menu_id' => 'main-menu',
'walker' => new wp_bootstrap_navwalker()
)
); ?>
</div><!-- .navbar -->
</div>
</div>
</div><!-- .container -->
I tried the simple method of just removing this .navbar-toggle
as I don't need it, but that actually removes the entire menu even on a full page window...