Responsive Isn't Working

[suziet]

Hello all, I have a menu how I want it to be and the responsive aspect of it isn’t working.

I have the link to the CSS and the JS in my nav.php file.
You can see the site here http://www.cafepreview.com/Simpson/advanced-dentistry.php

[admin]

Hi, you’ve added some custom rules and declarations that break it. In order to fix it, open the following file:

http://www.cafepreview.com/Simpson/css/sm-simple.css

and do the following tweaks:

1) After the following line:

@media screen and (max-width: 1060px) {

add the following rule:

@media screen and (max-width: 1060px) {

	#main-menu > li {
		float:none;
		display:inline-block;
		margin-right:-4px;
		z-index:4500;
		font-size: 16px;
	}

	...

2) Modify the following rule:

	#main-menu ul:hover, 
	#main-menu li:hover  {
		color: white; 
		background: #327c84;
		height:50px;
		line-height:60px; 
	}

like this:

	#main-menu ul:hover, 
	#main-menu li:hover  {
		color: white; 
		background: #327c84;
	}

3) Modify the following rule:

	/* add some text indentation for the 2+ level sub menu items */
	.sm-simple ul a {
		border-left:8px solid transparent;
		display:none;
	}

like this:

	/* add some text indentation for the 2+ level sub menu items */
	.sm-simple ul a {
		border-left:8px solid transparent;
	}

This will restore the collapsible function. You can then do any further tweaks if you like.

Cheers!

[Author]

Posts