I've created a custom Bootstrap sub-theme and am replacing the default Bootstrap menu with the Responsive and Off-Canvas Menu Module but seem to be running into a string of problems.

  1. No matter what settings I select, the Mobile "Burger" icon is always showing on the page. I thought it would hide depending on whether the horizontal menu was being shown or not by default. I know I can manually hide this with media queries in my CSS but just not sure if that's the optimal method.
  2. I have no idea where the Off-Canvas portion of my menu is coming from? There doesn't seem to be a twig template for it. How is this being generated?
  3. Also, when the off-canvas menu is being used, for some reason it's placing carats next to each link as well as the default arrow to show there is a sub-menu. Is this carat coming from the Bootstrap theme template files? Also, when I click to view the sub-menu items in the off-canvas view, none of the sub-menu items are listed at all like they are on the default horizontal view. Why is this? The off-canvas menu doesn't seem to be able to locate any sub links for some reason.

Has anyone used both Bootstrap and this Module together to shed some light on this for me and if there were any complications that you encountered as well, if any?

Let me know if any other details are needed.

Comments

SnowCoder created an issue. See original summary.

cof6656’s picture

Have you taken a look at this issue? Here it is stated that

Bootstrap theme needs wrapping div added to page.html.twig
SnowCoder’s picture

Yes, I've wrapped my custom Bootstrap sub-theme with a wrapping div.
That's not what is causing the problem.

SnowCoder’s picture

Turns out it was the Bootstrap menu--main.html.twig file that was causing my issues in number 2 & 3 so I believe I've got that all sorted out by overriding it to just be the drupal base code for it.

Still would like a clear answer on number 1 though. Is the "Menu" icon meant to be hidden by custom CSS? I thought through the settings for this that it should be hidden when the Horizontal menu is active.

tanc’s picture

The menu icon is supposed to be hidden by the module's own css, based upon your breakpoint specified. If you look at the responsive_menu_generate_breakpoint_css function, it creates a css file with a media query and some basic display: none or display: block css within it. I haven't extensively tested with bootstrap as I don't use it personally on projects but its possible there is something not working correctly.

Can you check you have a file called responsive_menu_breakpoint.css in your public files directory? Maybe paste the contents too.

SnowCoder’s picture

Yes that file was created with the following code:

@media all and (min-width: 992px) { nav.responsive-menu-block-wrapper { display: block; } div.responsive-menu-toggle { display: none; } }

However, the responsive-menu-toggle was still being displayed on screens larger 992px and not sure why. I just created my own custom CSS to hide it but I do find it weird that this didn't take effect.

tanc’s picture

Version: 8.x-2.4 » 8.x-2.x-dev
Assigned: Unassigned » tanc

There appear to be various issues with this module when using it with the bootstrap theme. I need to spend some time working out the issues and providing fixes, either within the settings of the module or through better documentation. Unfortunately I don't use bootstrap on any project work so I'll need to set aside time for this.

tiger_h’s picture

I added the following to my css File. div..responsive-menu-toggle in the module css does not match in bootstrap

@media all and (min-width: 768px) { nav.responsive-menu-block-wrapper { display: block; } .responsive-menu-toggle-icon { display: none; } }
ladew222’s picture

I had the same problem. I found a solution. May not be the most elegant but it worked
I changed line 407 of responsive_menu.module to

$css = '@media ' . $breakpoint . ' { ' . $element . '.responsive-menu-block-wrapper { display: block; } .responsive-menu-toggle { display: none !important; } }';

tanc’s picture

There is a patch for the problem of the mobile menu icon always showing in this issue: #2920765: Mobile menu icon block always displays on 8.4.0/Bootstrap site

Can people test it and report back? Also, there is a new setting that should remove the need to add the wrapping divs to the theme and it would be good to get feedback on that too.

I'm going to make this a parent issue for all Bootstrap related problems.

tanc’s picture

Title: Issues using this with a Bootstrap sub-theme » Issues with Bootstrap theme
jhmnieuwenhuis’s picture

Hi,

Should it be possible to use this with a bootstrap subtheme at this time ?
If it is not possible now, what themes are supported by this module ?

If it is could you please give instructions on how to install and configure it.
I spent a full day trying and testing, but i can't get it working.

I really love the functionality of this module and would like to use it.
But i also love the bootstrap theming ;-)

Regards and compliments for this module

UPDATE :
======
I got it working now.

I copied the menu.html.twig from the core/stable theme to .../themes/custom/subtheme/templates/menu/menu--main.html.twig

Then I have set the breakpoint in the module settings to all and (min-width: 768px)

Hans

tristanbradley’s picture

As far as I can see the "burger" comes from the Bootstrap template page.html.twig

I copied page.html.twig to YOURTHEME/templates. I then deleted the button code below and I was done.

{# .btn-navbar is used as the toggle for collapsed navbar content #}
        {% if page.navigation_collapsible %}
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse">
            <span class="sr-only">{{ 'Toggle navigation'|t }}</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
        {% endif %} 
Déjà vu’s picture

Copying the template from the core theme (stable/navigation/menu.html.twig) stable into my sub-theme worked for me. Thanks #12

Hookset Media’s picture

I can confirm that #14 fixes the layout problem with the burger (personally I prefer pancake but that is a whole different debate) and off screen menu when using this module with Bootstrap 3.

tanc’s picture

Status: Active » Closed (outdated)

Closing as there is now a patch to support Bootstrap: #3136984: Bootstrap wrapper