Modify navigation display on mobile phone version

Danimeeka
Active member
Topic Author
Member

11 years 3 months ago #32056 by Danimeeka

Modify navigation display on mobile phone version was created by Danimeeka

Hi,

I am building a website for a client at 184.154.224.13/~harpsint/ and have a couple of questions regarding the version you see on a mobile phone.

1. How do I change the words "Site Navigation" to something else (client's request)?

2. On a mobile phone, the top menu defaults to all sub menus showing. This gives a very cluttered look and makes the site navigation difficult to fully see and use, since some sub menus hide other menus. How can I fix this? (If there is no easy fix, how can I change the default so that only top level menus display?)

Many thanks for your help.

Please Log in to join the conversation.

ivan.milic
Support Staff
Moderator

11 years 3 months ago #32060 by ivan.milic

Replied by ivan.milic on topic Modify navigation display on mobile phone version

Open index.php of template , near bottom you will find:

Code:

<script>
jQuery(document).ready(function () {
	var browserWidth = jQuery(window).width();
	if (browserWidth<=961) {
		// for smaller screens, remove drop-down menu
		jQuery('.topmenu_area ul').removeClass('menutop').addClass('mobile_menu');

		// adding div with button
		jQuery('.topmenu_area div.container').prepend('<div class="menu_class">Site Navigation</div>');

		// entire menu opens on click
	    jQuery('div.menu_class').click(function () {
			jQuery('ul.mobile_menu').slideToggle('medium');
	    });
	}

	// if responsive slideshow exists, don't repeat background
    if (jQuery('div.flexslider').length != 0 && browserWidth>961) {
    	jQuery('.carousel_area').css('background','url(<?php echo $template_path ?>/images/carousel_bg<?php echo $carousel_bg ?>.jpg) no-repeat')
    }
});
</script>

change it to:

Code:

<script>

var mobileMenuToggle = function () {
			jQuery('ul.mobile_menu').slideToggle('medium');
};

var resizeLayoutFN = function(){
	var browserWidth = jQuery(window).width();
	if (browserWidth<=961) {
		// for smaller screens, remove drop-down menu
		jQuery('.topmenu_area ul').removeClass('menutop').addClass('mobile_menu');
		// adding div with button
		if(!jQuery('.topmenu_area div.container .menu_class')[0])
			jQuery('.topmenu_area div.container').prepend('<div class="menu_class">Site Navigation</div>');
		// entire menu opens on click
	    jQuery('div.menu_class').bind('click',mobileMenuToggle);
	}else{
		jQuery('.topmenu_area ul').removeClass('mobile_menu').addClass('menutop');
	    jQuery('.topmenu_area div.container .menu_class').css('display','none'); 
		jQuery('div.menu_class').unbind('click',mobileMenuToggle);
	}

	// if responsive slideshow exists, don't repeat background
    if (jQuery('div.flexslider').length != 0 && browserWidth>961) {
    	jQuery('.carousel_area').css('background','url(<?php echo $template_path ?>/images/carousel_bg<?php echo $carousel_bg ?>.jpg) no-repeat')
    }

}


jQuery(window).resize(resizeLayoutFN);

jQuery(document).ready(function () {
	resizeLayoutFN();
});
</script>

also in this new code change words "Site Navigation" to what you want.

Please Log in to join the conversation.

Danimeeka
Active member
Topic Author
Member

11 years 3 months ago #32111 by Danimeeka

Replied by Danimeeka on topic Modify navigation display on mobile phone version

Hi Ivan,

Thankyou for your reply. I made your changes in templates/hot_wedding/index.php (just copied it in and commented out the old script) and oddly:
1) the Site Navigation did not change text (I coded it to change to "Click for menu")
2) when I touch "Site Navigation" the menu very briefly drops down in full, including sub menus, then disappears again.

I have cleared cache a few times during my testing.

Any thoughts?
Thankyou!

Please Log in to join the conversation.

ivan.milic
Support Staff
Moderator

11 years 3 months ago #32123 by ivan.milic

Replied by ivan.milic on topic Modify navigation display on mobile phone version

Add this at beginning of template_css.css

.nav.menu UL{
display:none;
}

Please Log in to join the conversation.

Danimeeka
Active member
Topic Author
Member

11 years 3 months ago #32133 by Danimeeka

Replied by Danimeeka on topic Modify navigation display on mobile phone version

I have added the code now, but now luck - the Site Navigation still reads "Site Navigation" and the drop-downs still appear in full for a moment then disappear again.

Do you have an idea of what else I could try?

Thanks again!

Please Log in to join the conversation.

Danimeeka
Active member
Topic Author
Member

11 years 3 months ago #32134 by Danimeeka

Replied by Danimeeka on topic Modify navigation display on mobile phone version

I was wrong - at least partly! I have finally worked out how to emulate a phone screen on my PC and the new text ("Click for Menu") clearly displays! I can't get it to on my iPad or iPhone, but maybe clicking 'clear cookies and data' isn't enough to clear the cache. I'll look into that further.

The problem of the menu appearing really briefly then disappearing before anything can be touched, and still showing submenus, still exists. See attachment. (Tricky screen shot because it was so fleeting!)

Please Log in to join the conversation.

Time to create page: 0.224 seconds