0

I'm using bootstrap on WordPress using the _ib theme, and I would like to add in my own responsive menu for when window is less than 768px. By default bootstrap will convert the menu to a dropdown-toggle, which when clicked shows your original menu. What I would like to do is implement my own menu when it is used on a small device or at a low resolution.

How would I remove this dropdown-toggle? I have looked around the bootstrap JS files, but I'm no JS whizz, so I can't quite figure out how to simply scrap the dropdown-toggle.

Any help appreciated!

EDIT:

<div class="container">
        <div class="row">
            <div class="site-navigation-inner col-sm-12">
                <div class="navbar navbar-default">
                    <div class="navbar-header">
                        <!-- .navbar-toggle is used as the toggle for collapsed navbar content -->
                        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-responsive-collapse">
                            <span class="sr-only">Go to...</span>
                          <span class="icon-bar"></span>
                          <span class="icon-bar"></span>
                          <span class="icon-bar"></span>
                        </button>
                    </div>
                    <!-- The WordPress Menu goes here -->
                    <?php wp_nav_menu(
                        array(
                            'theme_location' => 'primary',
                            'container_class' => 'collapse navbar-collapse navbar-responsive-collapse',
                            'menu_class' => 'nav navbar-nav',
                            'fallback_cb' => '',
                            'menu_id' => 'main-menu',
                            'walker' => new wp_bootstrap_navwalker()
                        )
                    ); ?>
                </div><!-- .navbar -->
            </div>
        </div>
    </div><!-- .container -->

I tried the simple method of just removing this .navbar-toggle as I don't need it, but that actually removes the entire menu even on a full page window...

2
  • This will not make a toggle menu, but put the menu items under eachother: jsfiddle.net/no5j25cj/1
    – Refilon
    Commented Nov 7, 2014 at 8:19
  • I want to pretty much remove all the behaviour of bootstrap's toggle solution. For the time being, as bad as it looks, I would prefer it to be unresponsive so that I can then implement my own solution using a simple WordPress plugin I have. Commented Nov 7, 2014 at 8:30

1 Answer 1

0

When you look at you index php page. You will see your navigation divs.

To turn off the behavior you can remove the toggle class.

<div class = container>

Etc

One of the classes will be a toggle class. Simply remove it.

What version is it? 2 or 3.

You can just replace the code with yours. I'm familiar with joomla with is basically html surrounding php.

If your looking to modify the css you will need to override it. How you do this easily will depend on wether your template uses CSS LESS or a custom.css file. You could even remove the navigation diva and replace with your own code utilizing bootstrap layout classes.

Giving the version of bootstrap will help with this question.

Bootstrap uses media queries you need to find what query you are targeting. Bootstrap website is very informative on this

http://getbootstrap.com/getting-started/

There are examples of layouts here. Make sure your nav divs and classes are the same. It will work.

Please back up or comment out old code for reuse.

When I get to my PC il look at code if not fixed by then.

You cofusing me slightly here. You have a menu (bootstrap) one and you have a plugin that is also calling a menu?

Or

Do you have two menus on the same page? Or does your plugin rely on the the current menu?

Im confused what you want here. It looks like you have a menu as part of the template and then you are calling a module to create a menu in the form of a plugin. It will not work if this is the case.

The plugin menu may conflict with the existing menu. If you have your own existing menu why dont you just remove the entire template menu and then just let your plugin be called?

If I am way of the mark I apologize. However if a plugin is involved the code is an unknown!

Is the plugin an addon to the template? If not you may have a conflict

Think you may need to contact the developer of the plugin

4
  • I'm using the latest version, so 3. I'm trying to do exactly what you said and remove the toggle functionality. I've added the navigation code above for you, thanks for your help! Commented Nov 7, 2014 at 8:47
  • In the above code the PHP code creates the menu, and I already have a plugin which creates a Responsive Select Menu using that menu. I would like to completely remove the toggle which bootstrap implements using JS/CSS. I have used media queries before, but I don't know if that's where the problem lies. As I said before if I remove the toggle code, then the entire navbar dissappears. And thanks for your help. Commented Nov 7, 2014 at 9:00
  • Sorry to have confused you. The plugin is dependent on a menu existing, so for this problem you don't need to know anything about it. All the plugin does is take care of the menu's appearance on anything less than 768px, and it actually just makes it a <select> menu, an old school looking dropdown. The plugin itself works great and converts the menu to a <select> menu. So what I actually get at the moment if I resize to 768px is bootstrap's toggle button, which I don't want, and when I press the toggle, it shows my nice <select> menu. So....I want to stop it from using dropdown-toggle. Commented Nov 7, 2014 at 10:28
  • There is no problem with the plugin, you can forget that :P It's just the matter of removing the toggle behaviour Commented Nov 8, 2014 at 10:34

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.