Giter Site home page Giter Site logo

Dropdown Menu about wordpress-bootstrap HOT 5 OPEN

arnabwahid avatar arnabwahid commented on July 28, 2024
Dropdown Menu

from wordpress-bootstrap.

Comments (5)

Trippnology avatar Trippnology commented on July 28, 2024

I get the same results on Win7/Firefox. When resizing the window, the menu changes to a dropdown as expected but the dropdown button does not reveal the menu.

EDIT: Same symptoms in Chrome, Opera, Safari and IE.

from wordpress-bootstrap.

Trippnology avatar Trippnology commented on July 28, 2024

Does this happen for everybody? I need to find out if it is wp-bootstrap or some other code causing this issue.

from wordpress-bootstrap.

Trippnology avatar Trippnology commented on July 28, 2024

I found that script minification was causing this issue (for me anyway). When I disabled JS minification in W3TotalCache the menu works as expected.

Just to be clear, the problem is with the bootstrap collapse plugin not the bootstrap dropdown plugin (both of which are included in /library/js/script.js)

from wordpress-bootstrap.

martip07 avatar martip07 commented on July 28, 2024

Any other way to make it work without w3totalcache ?

from wordpress-bootstrap.

doubleotoo avatar doubleotoo commented on July 28, 2024

Any updates on resolving this issue?

Update: I found the problem with my installation (might just because I'm a Wordpress newbie): I was not including the bootstrap-collapse javascript.

Solution Attempt #1

Edit wp-bootstrap: Theme Functions (functions.php) to add <script> tags to load bootstrap-collapse.js:

Appearance > Editor > Theme Functions (functions.php)

function my_scripts_method() {
  // bootstrap-collapse requires bootstrap-transition.js
  wp_deregister_script('bootstrap-transition');
  wp_register_script('bootstrap-transition', 'http://twitter.github.com/bootstrap/assets/js/bootstrap-transition.js');
  wp_enqueue_script('bootstrap-transition');

  wp_deregister_script('bootstrap-collapse');
  wp_register_script('bootstrap-collapse', 'http://twitter.github.com/bootstrap/assets/js/bootstrap-collapse.js');
  wp_enqueue_script('bootstrap-collapse');
}
add_action('wp_enqueue_scripts', 'my_scripts_method');

Note: this is probably not the right way to do this, but it works.

Solution Attempt #2

Edit wp-bootstrap: Header (header.php) to make navbar collapsed by default and remove toggle button:

  1. Add collapse class to the div:

    <div class="nav-collapse collapse">
        <?php bones_main_nav(); // Adjust using Menus in Wordpress Admin ?>
    </div>
  2. Remove toggle button, i.e. remove this code:

    <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
    </a>

from wordpress-bootstrap.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.