responsive menu does not work

chriscamp1
Inactive member
Topic Author
Member

11 years 7 months ago #37875 by chriscamp1

responsive menu does not work was created by chriscamp1

Hello hot-themes team!
I have got 2 questions:

1. on our website the responsive menu when used on a smart phone does not work. you can scroll down, all menu options appear, but you can not click on it! any hints how to fix this?

2. when minimizing the size of the browser window the menu changes into a responsive menu, BUT it pops out of the window so it cannot be seen on windows and the color is grey and hard to read (i attach a screenshot)

any hints about how to solve these 2 riddles would be very much appreciated!

Thanks & have s good day! Chris

Attachments:

Please Log in to join the conversation.

ivan.milic
Support Staff
Moderator

11 years 7 months ago #37883 by ivan.milic

Replied by ivan.milic on topic responsive menu does not work

Follow this thread form beginning :

www.hotjoomlatemplates.com/support-forum...-work?start=12#37798

It for music template but you can apply same thing.

Please Log in to join the conversation.

chriscamp1
Inactive member
Topic Author
Member

11 years 6 months ago #38636 by chriscamp1

Replied by chriscamp1 on topic responsive menu does not work

Hi Ivan, thanks for your hints! I followed all the steps from the thread you posted, but it did not work on the hot_bokeh template. The responsive drop down menu on the smart phone disappeared, instead the "normal" top menu was shown which "destroyed" the responsive layout! So I changed back everything as the solution was not satisfying. I'm not sure if I explained the problem properly. I'll try again.

When using the drop down menu on my smart phone it is possible to scroll down but if you click on a category it would not open, you have to click the "Fertig" button (german version) and than it opens. however I'd like to open the categories when clicking directly on the drop down menu rather than confirming with "Fertig" I'll add an iphone screen shot. Would be great if you could help! Many thanks! Cheers, Chris

Attachments:

Please Log in to join the conversation.

ivan.milic
Support Staff
Moderator

11 years 6 months ago #38660 by ivan.milic

Replied by ivan.milic on topic responsive menu does not work

Can you send a link so we could check

Please Log in to join the conversation.

chriscamp1
Inactive member
Topic Author
Member

11 years 6 months ago #38665 by chriscamp1

Replied by chriscamp1 on topic responsive menu does not work

campadventure.de
many thanks!

Please Log in to join the conversation.

ivan.milic
Support Staff
Moderator

11 years 6 months ago #38673 by ivan.milic

Replied by ivan.milic on topic responsive menu does not work

Ok here are complete steps one again.

resoponsive_menu.js full code:

Code:

function menutransform(){

	var topMenuContainerWidth = jQuery(".mp_topmenu ul.menu").closest('div.cell').innerWidth();
	var topMenuWidth = jQuery(".mp_topmenu ul.menu").innerWidth();
	
	jQuery(".mp_topmenu ul.menu").css("min-width",topMenuWidth);

	if(topMenuWidth > topMenuContainerWidth) {
	
	    if(!jQuery('.bumNav')[0]){
		  var bumNav = jQuery(".mp_topmenu ul.menu").clone();
		  bumNav.removeAttr("class").css('min-width','0');
		  jQuery("<ul class='bumNav'><li><div></div></li></ul>").insertAfter(jQuery(".mp_topmenu ul.menu"));
		  jQuery('.bumNav > LI').append(bumNav);
		  
		  jQuery('.bumNav').css({
		   'float':'right'
		  });
		  
		  jQuery('.bumNav, .bumNav > LI > UL, .bumNav > LI > UL > LI > UL').css({
		   'list-style':'none',
		   'display':'block'
		  });
		  
		  jQuery('.bumNav > LI > UL').css({
		   'position':'absolute',
		   'right':'10px',
		   'display':'none',
		   'min-width':'none',
		   'float':'right'
		  });
		  
		  jQuery('.bumNav > LI > DIV').click(function(){
		     if(jQuery('.bumNav > LI > UL:visible')[0])
				jQuery('.bumNav > LI > UL').css('display','none');
			 else	
			    jQuery('.bumNav > LI > UL').css('display','block');
		  });
		
		}

		jQuery("ul.bumNav").css("display","block");
		jQuery(".mp_topmenu ul.menu").css("display","none");

  }else{
	    jQuery('.bumNav > LI > UL').css('display','none');
		jQuery("ul.bumNav").css("display","none");
		jQuery(".mp_topmenu ul.menu").css("display","block");
	}
}

jQuery(function(){
	menutransform();
	jQuery(window).resize(function(){
		menutransform();
	});
});

CSS to add to layout.css:

Code:

UL.bumNav > LI{
display: block;
height: 35px;
width: 50px;
}

UL.bumNav > LI > DIV{
background: url(../images/tinynav.png);
height: 30px;
width: 40px;
}

UL.bumNav > LI UL{
background:white;
padding:15px 10px;
margin:0;
z-index:999999;
border-radius: 15px;
}

UL.bumNav > LI UL LI{
padding:10px 10px;
border-bottom:1px dotted silver;
}

ul.bumNav{
position: absolute;
right: 10px;
}

Please Log in to join the conversation.

Time to create page: 0.189 seconds