Responsive menu created by (php)wordpress

2 Views

I have made a menu in wordpress (the site is [http://andreadis.loginet.gr/][1]). This menu is auto generated when user creates a menu item from wordpress. And here i am confused about how can i make it open vertical in responsive.

Header.php is

 <!-- header -->
    <header>
        <div class="overNavPanel">
        <div class="container">
            <div class="col-md-12">
                <div class="row overNavPanel">
                    <div class="col-md-2 col-sm-6" id="logo">
                        <img class="img-reponsive" src="/wp-content/uploads/2015/12/logo.png" alt="logo.png">
                    </div>
                    <div class="col-md-4 col-md-offset-6 col-sm-6" id="top-right-contact">                      
                                    <image class="img-reponsive" src="/wp-content/uploads/2015/12/contact.png" alt="call-icon.png">


                    </div> <!--col-md-4 col-md-offset-7-->      
                </div><!--row-->
            </div>              
        </div>  <!--container-->
        </div><!--overNavPanel-->
        <nav id="myNavbar" class="navbar navbar-default" role="navigation">
            <!-- 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>           
                    </div>
                 <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="navDiv">
            <div class="container">
                <div class="col-md-12">
                    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                        <ul class="nav navbar-nav">
                        <ul id="nav" class="nav nav-pills nav-justified">
                          <li><?php wp_nav_menu(array('container_class'=>'nav','container'=>'container'));?></li>

                   </div>
                 </div>  
            </div>
        </div>
    </header>
    <!-- /header -->
Post Views: 2

Related posts

2 comments

  1. A couple of findings:

    1. You are loading Bootstrap JavaScript twice. I guess this is why collapsing is not working. Make sure that Bootstrap JS is loaded only once.
    2. The (non-PHP-generated) HTML structure above is not fully in line with the Bootstrap examples, so you may need to modify it to make it work properly. Here’s my fiddle for your case: https://jsfiddle.net/masa671/bjv1ovbw/
    3. The PHP-generated part: a call to wp_nav_menu() to generate a list item will not work. You need a PHP implementation that generates the correct structure for Bootstrap. This one looks promising, but I guess you are already using a Bootstrap theme for WordPress that might also have a corresponding implementation? Which theme are you using?

Comments are closed.