Mega Menu Text & Highlight Colours Problem

Horizontal menu bar with dynamic multi column drop-down display.
Post Reply
enjoymuzic
Posts: 8
Joined: Thu Mar 27, 2008 6:39 pm

Mega Menu Text & Highlight Colours Problem

Post by enjoymuzic » Tue Jul 08, 2014 11:32 am

Hi,

I'm trying to set new colours on my mega menu http://www.enjoymuzic.com. I'm using the configurable theme and have set up as follows...

MenuTopBarColour #5100A2
MenuTopBarHoverColour white
MenuTopTextColour white
MenuTopTextHoverColour black

MenuSubBarColour white
MenuSubBarHoverColour #5100A2
MenuSubTextColour black
MenuSubTextHoverColour white

I'm probably missing something obvious but with these settings I select the top level item and the dropdown and top menu turn white with the text in top bar turning black as intended but when the mouse moves down to hover over a sub menu then the text in the top bar reverts back to white so is hidden whilst the bar is still white. Is there any way to get the text to remain black whilst the dropdown is still active (and the bar returns to #5100A2 when the subcategories have lost focus)?

Also as a separate question is it possible to get a different font weight or colour JUST for the second level menu items (the ones just down from the top menu)?

Thanks,


Dave

norman
Site Admin
Posts: 1233
Joined: Sat Feb 07, 2004 9:55 pm

Re: Mega Menu Text & Highlight Colours Problem

Post by norman » Wed Jul 09, 2014 9:56 am

Your first question re the hover. Try this:

Edit file multicolumnmenu.js (in your Site folder) using Notepad.

Look for the line:

Code: Select all

function megaHoverOver(){
After this add a line:

Code: Select all

	$(this).find("a.product_section").css('color', 'black');
Look for the line:

Code: Select all

function megaHoverOut(){
After this add a line:

Code: Select all

  $(this).find("a.product_section").css('color', 'white');
Norman

norman
Site Admin
Posts: 1233
Joined: Sat Feb 07, 2004 9:55 pm

Re: Mega Menu Text & Highlight Colours Problem

Post by norman » Wed Jul 09, 2014 10:03 am

Your second question re sub font weight and colour:

Covered by settings MenuSubTextColour, MenuSubTextWeight and MenuSubSubTextColour.
Norman

enjoymuzic
Posts: 8
Joined: Thu Mar 27, 2008 6:39 pm

Re: Mega Menu Text & Highlight Colours Problem

Post by enjoymuzic » Wed Jul 09, 2014 12:29 pm

Hi Norman,

Thanks for that - the fix for the top level works well.

The second issue about the sub menu text is something I still can't get to work.

As an example I've changed MenuSubTextColour to purple and MenuSubSubTextColour to Black and all second and third levels show as purple. It's not uploaded in this state but I've attached a screenshot.

Any ideas what might cause this?

Thanks again,

Dave
screenshot.gif
enjoymuzic menu snapshot
screenshot.gif (159.73 KiB) Viewed 3643 times

norman
Site Admin
Posts: 1233
Joined: Sat Feb 07, 2004 9:55 pm

Re: Mega Menu Text & Highlight Colours Problem

Post by norman » Wed Jul 09, 2014 1:07 pm

Those settings work as expected here. Without a live page to look at I can't help further.

It would also help when updating the site to set MenuSubTextWeight to say bold to distinguish second and third level entries.

Here is a screenshot the menu using blue and green, respectively. Also note the 3rd level indent that seems to be missing from your menu. Not sure why.
Attachments
Image1.jpg
Image1.jpg (29.63 KiB) Viewed 3642 times
Norman

enjoymuzic
Posts: 8
Joined: Thu Mar 27, 2008 6:39 pm

Re: Mega Menu Text & Highlight Colours Problem

Post by enjoymuzic » Wed Jul 09, 2014 2:14 pm

Hi Norman,

MenuSubTextWeight is already set to bold and there's no difference between 2nd and 3rd level text. Also don't know why there's no indent. I've tried replacing the .js file with the one from your original email but to no avail. I will upload again now and would appreciate if you would take a look when you have time. http://www.enjoymuzic.com

Would it help if I reimported the Menu design and started again?

Thanks,

Dave

norman
Site Admin
Posts: 1233
Joined: Sat Feb 07, 2004 9:55 pm

Re: Mega Menu Text & Highlight Colours Problem

Post by norman » Wed Jul 09, 2014 6:08 pm

All the CSS generated from the "configurable" layout (Design / Library / Layouts / Multi Column Menu / configurable) should appear at the bottom of actinic.css.

However, only this is appearing:

Code: Select all

 #multicolumnmenu img {border:none; vertical-align:middle;} 
So it look like someone has either butchered the "configurable" layout or started a comment tag and inadvertently commented out the rest of that code.
Here is what should be in "configurable":

Code: Select all

/* Start Configurable Multi Column Menu */

#multicolumnmenu {
	<actinic:variable name="MenuContainerStyle" />
}

.mcmseeall	{	/* for the See all ... link */
	<actinic:variable name="MenuMaxThirdLevelStyle" />
}

ul#topnav {
	margin: 0; padding: 0;
	float:left;
	width: 100%;
	list-style: none;
	background-color: <actinic:variable name="MenuTopBarColour" />;
	border: <actinic:variable name="MenuTopBarBorder" />;
}

ul#topnav li {
	float: left;
	height: 27px;
	margin: 0; padding: 0;
	border-right: <actinic:variable name="MenuTopBarSeparator" />;
	position: relative; /*--Important--*/
	z-index: 8888;
}

ul#topnav li a {
	float: left;
	padding: 7px;
	font-weight: <actinic:variable name="MenuTopTextWeight" />;
	color: <actinic:variable name="MenuTopTextColour" />;
	text-decoration: none;
}

ul#topnav li a:hover { 
	color: <actinic:variable name="MenuTopTextHoverColour" /> !important;
}

ul#topnav li:hover { /*--Hover State--*/
	background-color: <actinic:variable name="MenuTopBarHoverColour" />;
} 

ul#topnav li .sub {
	position: absolute;	
	top: 27px; left: 0;
	background: <actinic:variable name="MenuSubBarColour" />;
	border: <actinic:variable name="MenuSubSectionBorder" />;
	z-index: 8888;	
	padding: 20px 20px 20px;
	float: left;
	/*--Bottom right rounded corner--*/
	-moz-border-radius-bottomright: 5px;
	-khtml-border-radius-bottomright: 5px;
	-webkit-border-bottom-right-radius: 5px;
	/*--Bottom left rounded corner--*/
	-moz-border-radius-bottomleft: 5px;
	-khtml-border-radius-bottomleft: 5px;
	-webkit-border-bottom-left-radius: 5px;
	display: none;
}

ul#topnav li .row {
	clear: both;
	float: left;
	width: 100%;
	margin-bottom: 10px;
}

ul#topnav li .sub ul{
	list-style: none;
	margin: 0; padding: 0;
	width: <actinic:variable name="MenuSubColumnWidth" />px;
	float: left;
}
ul#topnav .sub ul li {
	border-right: none;
	height: auto;
	width: 100%;
}
ul#topnav .sub ul li h2 {
	padding: 0;  margin: 0;
	padding-left:10px;
	font-size: 1.1em;
}
ul#topnav .sub ul li h2 a {
	padding: 3px 0;
	background-image: none;
	color: <actinic:variable name="MenuSubTextColour" />;
	font-weight: <actinic:variable name="MenuSubTextWeight" />;
}
ul#topnav .sub ul li a {
	float: none; 
	text-indent: 0; /*--Reset text indent--*/
	height: auto;
	padding: 3px 5px 7px 15px;
	display: block;
	text-decoration: none;
	font-weight: normal;
	color: <actinic:variable name="MenuSubSubTextColour" />;
}

ul#topnav .sub ul li:hover {
	background-color: <actinic:variable name="MenuSubBarHoverColour" />; /*--Hover State--*/
} 

ul#topnav .sub ul li a:hover {
	color: <actinic:variable name="MenuSubTextHoverColour" /> !important;
}

.mcmparent	{	/* for the parent top section */
	<actinic:variable name="MenuTopParentStyle" />
}

/* End Configurable Multi Column Menu */
Norman

enjoymuzic
Posts: 8
Joined: Thu Mar 27, 2008 6:39 pm

Re: Mega Menu Text & Highlight Colours Problem

Post by enjoymuzic » Wed Jul 09, 2014 7:17 pm

Hi Norman,

I've copied and pasted the entire code and tested it offline but the colour for all of the text has remained as purple and although I can now set the top level to either bold or normal I can't seem to do the same with the sub levels. Are there any other settings or snippets of code that could or should be reset to the original?

I'm in the process of uploading the site with the new configurable layout in place but it will take a couple of hours.

Thanks, Dave

norman
Site Admin
Posts: 1233
Joined: Sat Feb 07, 2004 9:55 pm

Re: Mega Menu Text & Highlight Colours Problem

Post by norman » Wed Jul 09, 2014 9:53 pm

Someone seems to have altered the Multi Column Sub Section List layout. Essential <h2> and </h2> tags have been are missing.

Best re-install the add-on as I've no way of knowing what other changes have been made.

Also, if you're trying to use a SDV11 version of the menu on SD 2013 (as your site now is) that is not supported by me. Best upgrade at £25 +VAT.
Norman

enjoymuzic
Posts: 8
Joined: Thu Mar 27, 2008 6:39 pm

Re: Mega Menu Text & Highlight Colours Problem

Post by enjoymuzic » Wed Jul 09, 2014 11:54 pm

Hi Norman,
Please send me an upgrade invoice.
Cheers,
Dave

Post Reply

Who is online

Users browsing this forum: No registered users and 1 guest