CODEWITHSUNDEEP
phpwordpresstwitter-bootstrapfunction
Lolo
Lolo

Reputation: 135

Bootstrap Static Top Navbar doesn't work correctly

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 doesn't 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 click button on its left, which 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!

Upvotes: 0

Views: 232

Answers (1)

Lolo
Lolo

Reputation: 135

@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?

Upvotes: 1

Related Questions