Bootstrap Static Top Navbar doesn't work correctly

Question

I am new to the StackOverFlow community and hope this is the right way to ask ! I already saw answers on the same topic, but I couldn't figured out the problem that I encounter.

I work on a Wordpress page, using functions.php to load my scripts. I am trying to install the 'static top navbar' Bootstrap menu, but it doesnt show up correctly :

<!DOCTYPE html>
<html <?php language_attributes(); ?>>

<head>
	<meta charset="<?php bloginfo( 'charset' ); ?>">
	<meta name="viewport" content="width=device-width, initial-scale=1">


<?php wp_head(); ?>

</head>

<body>


	<header>
		

		<!-- Static navbar -->
		<nav class="navbar navbar-default navbar-static-top">
			<div class="container">
				<div class="navbar-header">
					<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
						<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="/">Home</a>
				</div>
				<div id="navbar" class="navbar-collapse collapse">
					<ul class="nav navbar-nav navbar-right">
						<li class="active"><a href="#">menu 1</a></li>
						<li><a href="#">menu 2</a></li>
						<li><a href="#">menu 3</a></li>
					</ul>
				</div><!--/.nav-collapse -->
			</div>
		</nav>		


	</header>




	<div class="container">
		<div class="jumbotron">
			<h1>Coucou c'est nous</h1>
		</div>	
	</div> <!-- /container -->	

	<section>
		<div class="container">

			<div class="m-dw-30">
				<div class="col-xs 2">
					<img src="<?php echo get_template_directory_uri(); ?>/assets/yesfragile.jpg"
					alt="" class="img-fluid">
				</div>
				<div class="col-xs-10">
					<h1>Titre de l'article</h1>
					<p>description de l'article description de l'article description de l'article description de l'article</p>
				</div>
			</div> <!-- /m-dw-30 -->		

			<div class="m-dw-30">
				<div class="col-xs 2">
					<img src="<?php echo get_template_directory_uri(); ?>/assets/yesfragile.jpg"
					alt="" class="img-fluid">
				</div>
				<div class="col-xs-10">
					<h1>Titre de l'article</h1>
					<p>description de l'article description de l'article description de l'article description de l'article</p>
				</div>
			</div> <!-- /m-dw-30 -->		

			<div class="m-dw-30">
				<div class="col-xs 2">
					<img src="<?php echo get_template_directory_uri(); ?>/assets/yesfragile.jpg"
					alt="" class="img-fluid">
				</div>
				<div class="col-xs-10">
					<h1>Titre de l'article</h1>
					<p>description de l'article description de l'article description de l'article description de l'article</p>
				</div>
			</div> <!-- /m-dw-30 -->				

		</div><!-- /container -->	
	</section>



</body>






<?php wp_footer(); ?>

</html>

The navbar shows only the "Home" button with a clic button on its left, wich dropdowns the "menu1", "menu2" and "menu3". That is not what the static top navbar is supposed to do as presented.

Here are my functions :

<?php

//=========================================
//============ loading scripts ============
//=========================================

define('LGMAC_VERSION', '1.0.2');

// front-end loading
function lgmac_scripts() {

	// styles loading
	wp_enqueue_style( 'lgmac_bootstrap-core', get_template_directory_uri() . '/css/bootstrap.min.css', array(), LGMAC_VERSION , 'all');
	wp_enqueue_style( 'lgmac_custom', get_template_directory_uri() . '/style.css', array('lgmac_bootstrap-core'), LGMAC_VERSION , 'all');


	// scripts loading
	wp_enqueue_script('bootstrap-js', get_template_directory_uri() . '/js/bootstrap.min.js', array('jquery'), LGMAC_VERSION , true);

	wp_enqueue_script( 'lgmac_admin_script', get_template_directory_uri() . '/js/temporary_gallery.js', array('jquery', 'bootstrap-js'), LGMAC_VERSION , true);

} //end function lgmac_scripts

add_action('wp_enqueue_scripts', 'lgmac_scripts');






//=========================================
//============ Utilitaires ============
//=========================================

function lgmac_setup() {

	// thumbnail support
	add_theme_support( 'post-thumbnails' );

	// delete version generator
	remove_action('wp_head', 'wp_generator');

	// delete french quotation marks
	remove_filter('the_content', 'wptexturize');

	// title support
	add_theme_support('title-tag');

} // end lgmac_setup function

add_action('after_setup_theme', 'lgmac_setup');

I would really appreciate your help!

Thank you Vindhyachal Kumar for your answer. Do you know where I can find the Boostrap Library, and where I should add it in the code? — Lolo
Ok! Now the nav bar seems to appear in a closer way to the original bootstrap navbar. I don't have to clic to see the menus buttons, but still, they appear vertically and not horizontally, and the bar is not fixed on top but a little down. Do you have any idea why? Is it about the css? Here is my page (temporarygallery.org/do-not-remove-this-folder) — Lolo
yes it is because loading css of other version temporarygallery.org/do-not-remove-this-folder/wp-content/… — Vindhyachal Kumar

Lolo Lolo · Accepted Answer · 2017-07-18T13:26:20

@Vindhyachal Kumar, thank you! I think it is because I had a bootstrap style loading in my functions.php file. It blocked the good bootstrap css version. So, I have deleted this line :

	wp_enqueue_style( 'lgmac_bootstrap-core', get_template_directory_uri() . '/css/bootstrap.min.css', array(), LGMAC_VERSION , 'all');

I hope it won't have an impact on the style loading?

Bootstrap Static Top Navbar doesn't work correctly

1 Answers