Bootstrap Submenu Not Working Correctly

Yii 1.1 General Discussion
1

Hi there!

I’ve used Yii Bootstrap for a website where I grap menuItems from a database. Here I use a the Bootstrap.widgets.TbNavbar which I really like to work with. However, the submenu is not working

on a mobile device. The submenu collapses, but when clicking the item which is on that location

originally is really clicked.

Thus in a menu: A B C (D E) F G, where D and E are in a submenu and I click on E, the mobile will

click ‘G’, since E is in place of G (originally, when the submenu is shown).

My code used:


$this->widget('bootstrap.widgets.TbNavbar',array(

	'brand'		=> CHtml::image('/images/logo.png', 'Heec Groep | HR management taken seriously logo'),

	'fixed'		=> 'top',	// fixed to top of page

	'fluid'		=> true,	// full width

	'collapse'	=> true, // requires bootstrap-responsive.css

	'type'		=> 'inverse',

	'items'=>	array(

			array(

			'id'			=> 'menu',

			'class'			=> 'bootstrap.widgets.TbMenu',

			'activeCssClass'	=> 'sel',							

			'items' => MenuItem::model()->getItems(1, null, $_SERVER['REQUEST_URI']),

			),

			),

	));

This seems quite logical to me, however, it does not work.

For a live version of this code, please see www.heecgroep.nl

where you can see the problem yourself.

Is this something where you are familiar with and do you know a fix for this?

Looking forward to your response, since this problem is driving me crazy!

Thanks in advance!!

With kind regards,

Reinier

2

Does anyone see what I am doing wrong here? Why does it not work?

I’ve tried to detect elements in the css, but that did not differ.

Have others worked with bootstrap including a submenu and did that work

(on a mobile phone!?)

Thanks in advance guys

3

Hi, I need to know if you found the solution about this post.

I have same issue and I have not found the solution, if you has resolved please let me know.

4

Dear Victor,

Yesterday I made a work-a-round to make the submenu (.dropdownmenu) display:block when on mobile, then it does work. Unfortunately, I couldn’t find a better solution for now…

So if someone else is aware of this problem:

  • a dropdown menu in a responsive navbar fluid with Yii Bootstrap hides the menu too early.

Probably this is due to the fact that the ul li ul is normally not in the ul li ul (as it is position:absolute) and on mobile it is position:static or something. Hence, when you click on a submenu item, it is registered as a click on the parent item and thus the menu is fold back.

5

Hi,

I’ve just encountered this problem. Everything works perfectly on a desktop, but on a mobile device the dropdown suv-menus in the navbar don’t work.

I’m not very fluent with CSS, so don’t see how you managed to implement the workaround. A clearer explanation would be appreciated.

Alan