Page 1 of 1

mega menu text spacing

Posted: Sun May 25, 2014 9:54 pm
by George
Mega Menu is on my site http://www.bathrooms-kitchens.net
Top level text has wide spacing before and after text. This limits amount of sections showing without making a second line.
Is it possible to decrease spacing or to allow menu to change size to fit extra sections without making second line.
The other thing I notice is that if text size is increased in internet explorer > View > Text size I lose the end link, (drops down to second line)
Thanks in advance
Regards George

Re: mega menu text spacing

Posted: Sun May 25, 2014 10:19 pm
by norman
You seem to be using the "configurable" theme for this menu and have customised the CSS. The bit that's affecting the spacing is:

Code: Select all

ul#topnav li a {
	display:block; font-size:1.4em; padding:0 29px; border-right:solid #fff 1px;
   line-height:2.6em; color:#fff; text-decoration:none;
}
And the relevant bit is padding:0 29px; where you've set a left and right padding of 29 pixels (and a top / bottom padding of 0). Go to Design / Library / Layouts / Multi Column Menu / configurable, locate and reduce that 29.

Re: mega menu text spacing

Posted: Sun May 25, 2014 11:25 pm
by George
Hi Norman
Thanks for prompt reply
Unable to find code have included copy of my code
Help please

/* 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: 2px 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 */

Re: mega menu text spacing

Posted: Mon May 26, 2014 12:34 am
by norman
That looks like an unaltered version of the original supplied layout. It doesn't correlate with what's appearing on your live pages so it's very likely that someone has made other design changes.

Have a look at Settings / Site Options / Layout / Multi Column Menu / Menu Theme and note down what's set there. That's the layout to look in.

Re: mega menu text spacing

Posted: Mon May 26, 2014 4:05 pm
by George
Hi Norman
I have found style sheet with code as you showed me in first reply and made changes as suggested.
All OK.
Thank you for your help
Regards George