Make Menu Responsive to Mobile

Home Forums Older releases 0.9.x Make Menu Responsive to Mobile

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #1384
    airsoft
    Participant

    Hey everyone! I recently started using a SmartMenu design on my website – and I’ve recently found the important of having it mobile friendly. Can anyone direct me in the direction of making my nav responsive – without having to completely scrap it and start over?

    My website and Nav can be seen here: http://www.airsoftrustactical.com/

    Thanks!

    #1737
    admin
    Keymaster

    Hi,

    OK, I saw you already have your menu tree #menu styled for desktop view so basically you will just need to add some responsive styles to make sure it is transformed to a collapsible menu on small screens. You can find out how to do this by looking here:

    http://www.smartmenus.org/docs/#small-screen-support

    You will probably also need to tweak the look of your menu in collapsible mode by adding some additional rules inside the media query to override your existing desktop styles.

    The other things are:

    1) You will not need the following CSS at all since you already have styled your menu tree:

    <!-- SmartMenus core CSS (required) -->
    
    
    <!-- SmartMenus core CSS (required) -->
    
    
    <!-- #main-menu config - instance specific stuff not covered in the theme -->
    
    	#main-menu {
    		position:relative;
    		z-index:9999;
    		width:auto;
    	}
    	#main-menu ul {
    		width:12em; /* fixed width only please - you can use the "subMenusMinWidth"/"subMenusMaxWidth" script options to override this if you like */
    	}
    

    2) Of course, you will need to switch from your current script to actually using the SmartMenus plugin for your menu tree. You currently have just linked the script but even your init code:

    	$(function() {
    		$('#main-menu').smartmenus({
    			subMenusSubOffsetX: 1,
    			subMenusSubOffsetY: -8
    		});
    	});

    does not target #menu but #main-menu (the menu tree id on the default demos).

    Finally, please note that the CSS work might turn out to be a bit tricky since I am not familiar with your existing CSS code but hopefully it won’t be a big trouble for you.

    Hope this helps.

Viewing 2 posts - 1 through 2 (of 2 total)
  • You must be logged in to reply to this topic.

Register

You will be emailed a link to set your password.

Login

Lost password?