ShowMenu2: Bootstrap Navigation

[varjo]

@dbs
@Ruud

Thanks to both of you. Unchecking the jQuery helped.

[Ruud]

Have a look at the example on http://www.w3schools.com/bootstrap/bootstrap_navbar.asp (the "Collapsing The Navigation Bar" part)

At least the <button> you disabled is needed, with the correct "data-target" set.
I would advise to use the bootstrap classes like "collapse navbar-collapse". Bootstrap has a lot of working rules set for these classes.

[dbs]

Hi, try this:
Go to Admin Tools > Frontend Output Filter > uncheck jQuery.

[varjo]

Hello all,

I have a problem regarding the Bootstrap navigation. I have used bs_naturak template on one website but the navigation isn't working correctly. On smaller screens the navigation isn't collapsing. When I got the navigation to work as it should one of the snippets, responsiveslides, stopped working.

What should I do to get the navigation working right? Please help quickly.

The website: http://www.merjaportti.com/

[noname8]

Didn't read fully but
DO NOT DO THAT if there is even one user using mobile

but do make a redirect subpage on top of that list, perhaps using name info or general etc..
1.st subpage->to that main page->profit!

[Ruud]

I checked this, bootstrap doesn't support this.

There is a good reason for this.

A mobile device does not have a mouse and therefore no mouseover event (hover) to show sub-menus. Clicking a "normal" menu will show the sub-menu but the browser immediately starts loading that page.
For that reason you see many many websites where you cannot access child-pages with a mobile device at all.

Some frameworks solve this by always showing all sub-menu items in the mobile view, but on large websites this is not very pretty.
On tablets you will typically see the standard website anyway. In that viewmode a tablet will not be able to go to any sub-menus.

[zirzy]

I checked this, bootstrap doesn't support this.
There are several workarounds on the web but i can't get them to work.

I googled: bootstrap navbar parent clickable

and got e.g. this answer: http://stackoverflow.com/questions/25692514/bootstrap-how-do-i-make-dropdown-navigation-parent-links-an-active-link

If you have more questions regarding this issue you should post them at a bootstrap forum because this has nothing to do with WebsiteBaker.

Kind regards,

Nibz

Ok,  thanks Nibz for your kind help.
I will try those too and if they don't work for me, I will use this one 😊
Thanks for your help!

-zirzy

[nibz]

I checked this, bootstrap doesn't support this.
There are several workarounds on the web but i can't get them to work.

I googled: bootstrap navbar parent clickable

and got e.g. this answer: http://stackoverflow.com/questions/25692514/bootstrap-how-do-i-make-dropdown-navigation-parent-links-an-active-link

If you have more questions regarding this issue you should post them at a bootstrap forum because this has nothing to do with WebsiteBaker.

Kind regards,

Nibz

[nibz]

Hi zirzi,

I think this is a problem with bootstrap not with showmenu2.

Maybe this is a solution: https://github.com/mrhanlon/twbs-dropdown-doubletap

Kind regards

Nibz

[zirzy]

The url is missing.

Try this:

Code Select Expand


<?php 
$open = '<li class="[if(class=menu-current||class=menu-parent){active}] [if(class==menu-expand){dropdown}]">[if(class==menu-expand&&level==1){<a href="[url]" class="dropdown-toggle" data-toggle="dropdown">[menu_title] <b class="caret"></b></a>}else {<a href="[url]">[menu_title]</a>}]';

show_menu2(
$aMenu          = 1,
$aStart         = SM2_ROOT+1, 
$aMaxLevel      = SM2_START+1,
$aOptions       = SM2_ALL,
$aItemOpen      = $open,
$aItemClose     = '</li>',
$aMenuOpen      = '<ul class="[if(level==1){nav navbar-nav}] [if(level==2){dropdown-menu}]">',
$aMenuClose     = '</ul>',
$aTopItemOpen   = false,
$aTopMenuOpen   = false
); 
?>


Isn't that the same as my option 2? Did not work the way I needed Dropdown is correct but when I klick menu link where is "arrow" (level 1) only dropdown opens, I can not enter to the page..

Ok, here is a pic of the menu and if I klick that LR menu link --> dropdown opens. If I klick LR menu link two times --> dropdown desapears. But if I wanna go to the LR page, I can not acces that page. I can acces only pages LR-kategoria 1 and LR-kategoria 2, but not the LR page.



What can I do to acces LR menu link page?




-zirzy

[nibz]

The url is missing.

Try this:

Code Select Expand


<?php 
$open = '<li class="[if(class=menu-current||class=menu-parent){active}] [if(class==menu-expand){dropdown}]">[if(class==menu-expand&&level==1){<a href="[url]" class="dropdown-toggle" data-toggle="dropdown">[menu_title] <b class="caret"></b></a>}else {<a href="[url]">[menu_title]</a>}]';

show_menu2(
$aMenu          = 1,
$aStart         = SM2_ROOT+1, 
$aMaxLevel      = SM2_START+1,
$aOptions       = SM2_ALL,
$aItemOpen      = $open,
$aItemClose     = '</li>',
$aMenuOpen      = '<ul class="[if(level==1){nav navbar-nav}] [if(level==2){dropdown-menu}]">',
$aMenuClose     = '</ul>',
$aTopItemOpen   = false,
$aTopMenuOpen   = false
); 
?>


[zirzy]

Ok, thanks for fast reply

Option 1
Here is what i have (all links works fine but dropdown desapears):


<?php
$open = '<li class="[if(class=menu-current||class=menu-parent){active}] [if(class==menu-expand){dropdown}]">[if(class==menu-expand&&level==0){<a href="" class="dropdown-toggle" data-toggle="dropdown">[menu_title] <b class="caret"></b></a>}else {<a href="">[menu_title]</a>}]';

show_menu2(
$aMenu          = 1,
$aStart         = SM2_ROOT+1,
$aMaxLevel      = SM2_START+1,
$aOptions       = SM2_ALL,
$aItemOpen      = $open,
$aItemClose     = '</li>',
$aMenuOpen      = '<ul class="[if(level==1){nav navbar-nav}] [if(level==2){dropdown-menu}]">',
$aMenuClose     = '</ul>',
$aTopItemOpen   = false,
$aTopMenuOpen   = false
);
?>


Option 2
..and like this (links with "arrow down" is referring nowhere and dropdown is working nicely ):


<?php
$open = '<li class="[if(class=menu-current||class=menu-parent){active}] [if(class==menu-expand){dropdown}]">[if(class==menu-expand&&level==1){<a href="" class="dropdown-toggle" data-toggle="dropdown">[menu_title] <b class="caret"></b></a>}else {<a href="">[menu_title]</a>}]';

show_menu2(
$aMenu          = 1,
$aStart         = SM2_ROOT+1,
$aMaxLevel      = SM2_START+1,
$aOptions       = SM2_ALL,
$aItemOpen      = $open,
$aItemClose     = '</li>',
$aMenuOpen      = '<ul class="[if(level==1){nav navbar-nav}] [if(level==2){dropdown-menu}]">',
$aMenuClose     = '</ul>',
$aTopItemOpen   = false,
$aTopMenuOpen   = false
);
?>


What is wrong? 

-Zirzy

[nibz]

Hi zirzy,

This will fix the problem:

Code Select Expand


<nav class="navbar navbar-default" role="navigation">
<?php 
$open = '<li class="[if(class=menu-current||class=menu-parent){active}] [if(class==menu-expand){dropdown}]">
[if(class==menu-expand&&level==0){<a href="[url]" class="dropdown-toggle" data-toggle="dropdown">[menu_title] <b class="caret"></b></a>}else {<a href="[url]">[menu_title]</a>}]';
show_menu2(
$aMenu          = 1,
$aStart         = SM2_ROOT, 
$aMaxLevel      = SM2_START+1,
$aOptions       = SM2_ALL,
$aItemOpen      = $open,
$aItemClose     = '</li>',
$aMenuOpen      = '<ul class="[if(level==0){nav navbar-nav}] [if(level==1){dropdown-menu}]">',
$aMenuClose     = '</ul>',
$aTopItemOpen   = false,
$aTopMenuOpen   = false
);?>
</nav>


i added a conditional format option the ul wrapper, now only level 1 (root is level 0) will have the class dropdown-menu. Also i added a conditional format option to the menu-expand it will only search the root items and add the arrow icon to them (since if the link isn't at the root it will not work with a icon.)

Kind regards,

Robin

[nibz]

Hi Zirzy,

You are right, i see the problem; when there are more levels the links with the > dont work.
I think this has something to do with the JS but don't know.
Tomorrow or tonight i will have some time to take a look.
I will report back.

Kind regards,

Nibz

[zirzy]

From here i don't know. Do you have a link to a demo page?

Sorry, but I do not have a link on this page  I'am only testing this on my localhost, just to be sure it works with no flaws.. But I'm gonna use it if possible on my new project. I have made a few sites for bootstrap 3 but I have been using a different responsive navigation. It works fine on multilevel but there is a few flaws and for bootstrap it would be nice to have its own navigation It is ok if there is max level thing. I can create another menu for + 2 etc. levels.

Maybe this has the same problem: http://websitebaker.at/wb-templates/template-bs_naturak.html

$aMaxLevel      = SM2_CURR+1, -> If I change 1 to 2 or 3, menu disappears.. Why?

So if someone can help me with this I would appreciate it And maybe others will need this too


zirzy

[nibz]

From here i don't know. Do you have a link to a demo page?

[zirzy]

i have limited the numer of levels, see $aMaxLevels.

I did this because:

Hi dbs.

I'm sorry to say but bootstrap themselve took out the 3rd level from the navbar

"Submenus just don't have much of a place on the web right now, especially the mobile web. They will be removed with 3.0" - https://github.com/twbs/bootstrap/pull/6342

But over here they show that it is possible with some extra CSS: http://stackoverflow.com/a/18024991

Hope you can get it working the way you want!
If you still can't don't hessitate to ask again here in the forum then i will take a look what i can do (no guarantees)

But why isn't link with caret (arrow) working in drop down menu? All other links are working but links with arrow isn't.. If level is greater than SM2_CURR+1 there comes this arrow thing and link does not work.  So how can I fix it?

zirzy

[nibz]

i have limited the numer of levels, see $aMaxLevels.

I did this because:

Hi dbs.

I'm sorry to say but bootstrap themselve took out the 3rd level from the navbar

"Submenus just don't have much of a place on the web right now, especially the mobile web. They will be removed with 3.0" - https://github.com/twbs/bootstrap/pull/6342

But over here they show that it is possible with some extra CSS: http://stackoverflow.com/a/18024991

Hope you can get it working the way you want!
If you still can't don't hessitate to ask again here in the forum then i will take a look what i can do (no guarantees)

[zirzy]

Why 4th level is not showing on dropdown? 3th level links with carret is not active at all

please check at first your wb-setting -> advanced setting
look there to LIMIT of Levels or something like this, set it up to max = 10

I got 6 and still dont work..

[Gast]

Why 4th level is not showing on dropdown? 3th level links with carret is not active at all

please check at first your wb-setting -> advanced setting
look there to LIMIT of Levels or something like this, set it up to max = 10

[zirzy]

I updated the code above (the one for 2.3.2)

And here is an example for  3,0

Code Select Expand


<nav class="navbar navbar-default" role="navigation">
<?php 
$open = '<li class="[if(class=menu-current||class=menu-parent){active}] [if(class==menu-expand){dropdown}]">
[if(class==menu-expand){<a href="[url]" class="dropdown-toggle" data-toggle="dropdown">[menu_title] <b class="caret"></b></a>}else {<a href="[url]">[menu_title]</a>}]';
show_menu2(
$aMenu          = 1,
$aStart         = SM2_ROOT, 
$aMaxLevel      = SM2_CURR+1,
$aOptions       = SM2_ALL,
$aItemOpen      = $open,
$aItemClose     = '</li>',
$aMenuOpen      = '<ul class="[if(level==0){nav navbar-nav} else {dropdown-menu}]">',
$aMenuClose     = '</ul>',
$aTopItemOpen   = false,
$aTopMenuOpen   = false
);?>
</nav>


Why 4th level is not showing on dropdown? 3th level links with carret is not active at all 


-zirzy

[macsmet]

Hi Nibz,

Your addition to the code works fine.
Thanks.

greetings,

MacSmet

[nibz]

Hi there Macsmet,

I missed your question (forum is a little busy  )

But to answer it:

You could add another conditional statement to check if the menu level is less then 1 then the next level will not show.

Here my updated code:

Code Select Expand


<nav class="navbar navbar-default" role="navigation">
<?php 
$open = '<li class="[if(class=menu-current||class=menu-parent){active}] [if(class==menu-expand){dropdown}]">
[if(class==menu-expand&&level<1){<a href="[url]" class="dropdown-toggle" data-toggle="dropdown">[menu_title] <b class="caret"></b></a>}else {<a href="[url]">[menu_title]</a>}]';
show_menu2(
$aMenu          = 1,
$aStart         = SM2_ROOT, 
$aMaxLevel      = SM2_CURR+1,
$aOptions       = SM2_ALL,
$aItemOpen      = $open,
$aItemClose     = '</li>',
$aMenuOpen      = '<ul class="[if(level==0){nav navbar-nav} else {dropdown-menu}]">',
$aMenuClose     = '</ul>',
$aTopItemOpen   = false,
$aTopMenuOpen   = false
);?>
</nav>


Notice the if(class==menu-expand&&level<1) this checks if the level is not more than 1 and will not place the caret on the first level items, only on the root level.

Hope this answers your question,

Please let me know if it does or doesn't

[macsmet]

Hi,

Just playing with Bootstrap and using this menu code to get the Bootstrap menu working.
How can I limit WB showing the third level in the Bootstrap menu?
It doesn't actually work but it show there are more pages (class="caret" shows up) and it makes the second level not responding anymore.

[DarkViper]

Hi. I am using this menu for my template. works fine, but when I add another menu block the functionality seems not to work anymore.

$menu[1]='Main';
$menu[2]='Top';

The 'Main' menu with the ID 1 works fine, but as soon I use the 'Top' menu with the ID 2, this 'Top' menu is empty, not displayed anymore. Can you help on this?

Code Select Expand

<?php
// Top Navigation
ob_start(); 
$topnav = str_replace('menu-current','active',$topnav);
show_menu2(
$aMenu          = 2,
...
);
$topnav = ob_get_contents();
ob_end_clean();


this can not work, because you try to replace the class names before the menu is calculated.

A more simple solution without str_replace():

Code Select Expand

<?php
// Top Navigation
$topnav = show_menu2(
    $aMenu          = 2,
    $aStart         = SM2_ROOT+1, 
    $aMaxLevel      = SM2_START,
    $aOptions       = SM2_PRETTY|SM2_BUFFER,
    $aItemOpen      = '<li class="[class][if(class=menu-current||class=menu-parent){ active}]">[ac][menu_title]</a>',
    $aItemClose     = '</li>',
    $aMenuOpen      = '<ul>',
    $aMenuClose     = '</ul>',
    $aTopItemOpen   = false,
    $aTopMenuOpen   = false
);
// end Top Navigation

// Main Navigation
$mainnav = show_menu2(
$aMenu          = 1,
$aStart         = SM2_ROOT+1, 
$aMaxLevel      = SM2_CURR+1,
$aOptions       = SM2_ALL|SM2_BUFFER,
$aItemOpen      = '<li class="[if(class=menu-current||class=menu-parent){active}] [if(class==menu-expand){dropdown}]">[if(class==menu-expand){<a href="[url]" class="dropdown-toggle" data-toggle="dropdown">[menu_title] <b class="caret"></b></a>}else {<a href="[url]">[menu_title]</a>}]',
$aItemClose     = '</li>',
$aMenuOpen      = '<ul class="[if(level==1){nav navbar-nav} else {dropdown-menu}]">',
$aMenuClose     = '</ul>',
$aTopItemOpen   = false,
$aTopMenuOpen   = false
);
// end Main Navigation


have a nice day
Manuela