As I work on creating a WordPress theme using Bootstrap 3, I encountered an issue with the navbar toggle when reducing the screen width for testing. The image displayed doesn't align with what I expected. While I suspect it might be a WordPress-related problem rather than an issue with the Bootstrap 3 files themselves, I'm not entirely certain.
I am loading my CSS/JS files using wp_enqueue_style and wp_enqueue_script.
wp_register_script( 'custom-script', get_template_directory_uri() . '/bootstrap/js/bootstrap.js');
wp_register_script( 'full-calendar', get_template_directory_uri() . '/js/fullcalendar.js');
wp_register_script( 'google-calendar', get_template_directory_uri() . '/js/gcal.js');
wp_register_script( 'main', get_template_directory_uri() . '/js/main.js');
wp_register_style( 'style', get_template_directory_uri() . '/style.css');
wp_register_style( 'bootstrap', get_template_directory_uri() . '/css/bootstrap.css');
wp_register_style( 'fullcalendar', get_template_directory_uri() . '/css/fullcalendar.css');
wp_register_style( 'gravityforms', get_template_directory_uri() . '/css/gravityforms.css');// For either a plugin or a theme, you can then enqueue the script:
wp_enqueue_script("jquery");
wp_enqueue_script( 'custom-script' );
wp_enqueue_script( 'full-calendar');
wp_enqueue_script( 'google-calendar');
wp_enqueue_script( 'main');
wp_enqueue_style('style');
wp_enqueue_style('bootstrap');
wp_enqueue_style('fullcalendar');
wp_enqueue_style('gravityforms');The structure of my header.php file specifically for the navbar section looks like this:
<nav class="navbar navbar-default navbar-fixed-top remove-bottom-margin" role="navigation">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" 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="<?php echo home_url(); ?>"><img src="<?php bloginfo('template_url'); ?>/img/UCHURCH.png"/></a>
</div>
<ul class="pull-right" id="nav-menu-mobile">
<?php
wp_nav_menu( array(
'menu' => 'primary',
'theme_location' => 'header-menu',
'depth' => 2,
'container' => 'div',
'container_class' => 'collapse navbar-collapse',
'container_id' => 'bs-example-navbar-collapse-1',
'menu_class' => 'nav navbar-nav',
'echo' => 'false',
'fallback_cb' => 'wp_bootstrap_navwalker::fallback',
'walker' => new wp_bootstrap_navwalker())
);
?>
</ul>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container -->
</nav>
To make use of WordPress' menu editor functionalities, I incorporated the wp_bootstrap_navwalker. Initially, everything seemed to function correctly. However, I now need guidance on how to display the menu in its own section without a transparent background as seen in the Bootstrap 3 demo. Any suggestions?