[admin]

Hi, I suppose your graphics are in some container with relative position. If this is the case, you will need to set a specific z-index to that container that is lower than the menu tree’s z-index. But this is just a guess – please provide me with a live test case if you like, so I can investigate the issue.

Thanks!

[admin]

For example for the CSS here https://tinyurl.com/mpfxh76 you have the following:

<link href="/smartmenus/css/sm-clean/sm-clean.css" rel="stylesheet" type="text/css">

which still returns 404:
http://www.londontrolleybus.com/smartmenus/css/sm-clean/sm-clean.css

If you are sure everything is correct with your paths, it might be a server-side issue in which case I guess it’s best to contact your hosting provider.

Please let me know if I could be of any further help. Thanks!

[admin]

Np at all! Glad to hear you’ve got everything working and live now! 🙂

[admin]

Hi, I guess you have moved the libs folder so the hardcoded path in “jquery-loader.js” is not accurate any more and jQuery doesn’t get loaded at all. So just check/fix this line:

var path = '../libs/jquery/jquery.js';

Or, alternatively, you can opt to not use “jquery-loader.js” at all and instead include directly your preferred jQuery version on your pages – e.g.:

The loader script is just used on the demo page to allow easy testing with different jQuery versions.

[admin]

As I mentioned, most probably some of your CSS rules affect the sub menus in collapsible mode. It’s easiest to find out which ones by using some browser’s dev tools (e.g. Chrome’s built-in, Firefox’s built-in or Firebug, etc.). Alternatively, you may try disabling/enabling your page CSS until you figure out which ones..

[admin]

Hi, yep, I will gladly take a look and try to investigate the issue. I suppose you have some additional CSS rules on the page that affect the sub menus in collapsible mode. However, it’s very difficult to guess what exactly it might be without looking at your code, so please post a link to a live URL I could test.

Thanks!

[admin]

Hi, as far as I can see there are 2 issues with that page – you don’t need this:

<!-- SmartMenus jQuery init -->
<script type="text/javascript" src="jquery.smartmenus.min.js"></script>

because you already have it linked here:

<!-- jQuery Loader -->
<script type="text/javascript" src="/smartmenus/libs/jquery/jquery.js"></script>
<script type="text/javascript" src="/smartmenus/jquery.smartmenus.min.js"></script>

The other issue is that the following returns 404:

<link href="/smartmenus/css/sm-clean/sm-clean.css" rel="stylesheet" type="text/css">

Apart from these, I don’t understand your question about subDomain1, subDomain2 and main domain. I guess you just need to make sure all your linked script and CSS files do not return 404 errors and are loaded correctly.

Cheers!

[admin]

Please post a link to a live demo (you can post it as Protected data if you want to keep it between us) because it’s very difficult to guess what exactly might be wrong without looking at your code.

Thanks!

[admin]

Hi, on sub pages – e.g.:
http://new.pretty-chic.co.uk/products.asp?cat=108

you try to include jQuery with this:

<!-- jQuery -->
<script src="smartmenus-0.9.5/jquery-1.4.4.min.js" type="text/javascript"></script>

But this seems to return 404 so jQuery is not loaded at all:
http://new.pretty-chic.co.uk/smartmenus-0.9.5/jquery-1.4.4.min.js

It should work when you fix this (unless there are some other issues).

Cheers!

[admin]

Hi, SmartMenus supports jQuery 1.4.4+ and it should work with 1.6.2 without problems so you don’t need to include 1.11.0 for it. If you still need to include it for your filter portfolio, then you could do it in noConflict() mode – i.e. include it after 1.6.2 in the source like this:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
jq1110 = jQuery.noConflict(true);
</script>

Then wrap all your filter portfolio code like this:

(function($, jQuery) {

// filter portfolio code

})(jq1110, jq1110);

This way only your filter portfolio code will use 1.11.0 and all other scripts on your page will still use 1.6.2.

Please let me know if you still have any troubles (BTW, a live test page would really help very much too).

Cheers!

[admin]

Hi,

You just need to add 2 menu list UL/LI/A structures in your source and set them different id’s – e.g.:

<ul id="main-menu-1" class="sm sm-blue">...
...
<ul id="main-menu-2" class="sm sm-blue">...

Then you can set their position as you like with some additional CSS – i.e. align the first to the left and the second to the right, etc.

Finally you will need to initialize both menus ondomready – e.g.:

$(function() {
	$('#main-menu-1').smartmenus({
		subMenusSubOffsetX: 1,
		subMenusSubOffsetY: -8
	});
	$('#main-menu-2').smartmenus({
		subMenusSubOffsetX: 1,
		subMenusSubOffsetY: -8,
		// you might want this option for the sub menus of the right menu
		rightToLeftSubMenus: true
	});
});

It’s actually just the same as having a single menu tree. You just need to configure 2 menus in this case.

Let me know if you have any questions.

Cheers!

[admin]

Hi,

You will need to tweak the z-index for either your menu tree or BlockUI. By default the menu tree uses 9999 – i.e.:

	#main-menu {
		position:relative;
		z-index:9999;
		width:auto;
	}

and, as far as I can see, BlockUI uses 1000.

So you could either use something like:

	#main-menu {
		position:relative;
		z-index:500;
		width:auto;
	}

or this option for BlockUI:

$.blockUI({ baseZ: 15000 });

Cheers!

[admin]

Hi,

For instance, you could use the following Unicode symbol http://shapecatcher.com/unicode/info/9776. So in your CSS it would be:

content:'Menu 2630';

If you like, you could also use some other icon from any icon font or even a background image (not that recommended).

Cheers!

[admin]

Hmm, yes I have obviously forgotten to test it on mobile.

Anyway, just use the following additionally and it will fix it:

@media screen and (max-width: 640px) {
	#main-menu {
		text-align:left;
	}
	#main-menu > li {
		display:block;
		margin-right:0;
	}
}

Cheers!

[admin]

Hi,

If you are using the “sm-blue” theme, you will need to edit the following rules:

	.sm-blue {
		...
		-moz-border-radius:8px;
		-webkit-border-radius:8px;
		border-radius:8px;
		...
	}

	...

	/* round the left corners of the first item for horizontal main menu */
	.sm-blue > li:first-child > a {
		-moz-border-radius:8px 0 0 8px;
		-webkit-border-radius:8px 0 0 8px;
		border-radius:8px 0 0 8px;
	}

like this:

	.sm-blue {
		...
		-moz-border-radius:0 0 8px 8px;
		-webkit-border-radius:0 0 8px 8px;
		border-radius:0 0 8px 8px;
		...
	}

	...

	/* round the left corners of the first item for horizontal main menu */
	.sm-blue > li:first-child > a {
		-moz-border-radius:0 0 0 8px;
		-webkit-border-radius:0 0 0 8px;
		border-radius:0 0 0 8px;
	}

Let me know if you still have any troubles.

Cheers!

[admin]

Hi,

As far as I can see, the SmartMenus plugin JS file is not included at all on this page (and the menu initialization code) so you will want to check this. Just the CSS files are linked correctly.

Cheers!

[admin]

Thanks, I am now able to reproduce the issue!

To fix this you would need a small modification of the default source – you need to find/replace the following:

prevAll('a')

with this:

prevAll('a').eq(-1)

If you use the minified version, just use double quotes prevAll("a").

I actually think this is a good generic tweak so I will make sure it’s added in future versions so you don’t need to worry that you could lose the fix if you decide to upgrade the script in the future.

As for posting HTML code samples, just replace the opening <'s with <'s for now. I will surely fix this when I have a bit more time..

Cheers!

[admin]

Hi,

Please post an exact code sample that I could test as I am not able to reproduce this. I tried the following on the default demo in the download package:

<li><a href="#">Introduction to SmartMenus jQuery<a href="#" style="display:none;">hidden link</a></a></li>

The item does not disappear if I click it (just its parent sub menu is deactivated).

Normally the script shouldn’t copy any attributes the way you describe. I guess some other script on your page is doing that.

Thanks!

[admin]

Hi,

You can use just jQuery 1.9.1 but make sure it’s also included before the link to SmartMenus jQuery in the source – i.e. you should have something like this in your source:

<!-- jQuery -->
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script> 

<!-- SmartMenus jQuery plugin -->
<script type="text/javascript" src="jquery/jquery.smartmenus.js"></script>

<!-- SlidesJS plugin -->
<script src="jquery/jquery.slides.min.js"></script>

Also you will need to set relative position for your main menu and a specific z-index, otherwise the sub menus will not appear properly over your slider – e.g.:

<ul id="main-menu" class="sm sm-simple" style="position:relative;z-index:100;">...

Cheers!

[admin]

OK, as far as I can see, you will just need to use the hideOnClick: false option – i.e.:

	$('#left-menu').smartmenus({
		subMenusSubOffsetX: 1,
		subMenusSubOffsetY: -8,
		hideOnClick: false
	});

Let me know if you have any questions.

Cheers!

[admin]

Hi,

Glad you like the script!

The “sm-simple” theme doesn’t have hover styles for the responsive menu by default. I.e. you have just the following by default:

	.sm-simple a {
		padding-top:13px;
		padding-bottom:13px;
		background:transparent !important;
		color:#555 !important;
	}

If you like, you could add hover styles by editing the above like this:

	.sm-simple a {
		padding-top:13px;
		padding-bottom:13px;
		background:#fff;
		color:#555;
	}
	.sm-simple a:hover, .sm-simple a:focus, .sm-simple a:active,
	.sm-simple a.highlighted {
		background:#bbb;
		color:#fff;
	}

However, note that on mobile touch devices the hover effect is sticky and if you ask me it really works better without it.

Cheers!

[admin]

Hm, I am not sure why this might happen for you (I believe normally it shouldn’t) but you can always call the following on menu toggle button click just in case to make sure all sub menus are reset:

$.SmartMenus.hideAll();

If this still doesn’t help, please post a link to a live example I could test.

Cheers!

[admin]

Np! Cheers!

[admin]

Hi,

Just expanding the menu on load is as simple as using the following (after the menu is initialized):

$('#main-menu').smartmenus('itemActivate', $('#main-menu a.current').eq(-1));

But I suspect you probably would like the menu to behave a bit differently than the others. For example, hide it when some other sub menu is shown but show it again automatically after the other one is hidden (i.e. make it sort of sticky). So if you need further tweaks, please explain in details how exactly it should work and also it would help very much if you could post a live example so I could test your exact code.

Cheers!

[admin]

Hmm, seems to be a weird bug in older Webkit’s. If the menu button link has display: inline set and no real text content (apart from that added via :before), it isn’t clickable. So you have 2 options:

I) Either set the following in the CSS:
http://e-ms.co/dev/mobilechildtheme/wp-content/themes/mobilefirst/style.css

#menu-button {
  display:inline-block;
  ...
}

II) Or add some real text inside the link here (and maybe add just the icon via :before):

jQuery("nav .genesis-nav-menu").before('<div id="menu-button-container"><a id="menu-button" class="null">MENU</a></div>');

[Author]

Posts