mega menu text spacing

Horizontal menu bar with dynamic multi column drop-down display.
Post Reply
George
Posts: 3
Joined: Sun May 25, 2014 9:23 pm

mega menu text spacing

Post 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
norman
Site Admin
Posts: 1252
Joined: Sat Feb 07, 2004 9:55 pm

Re: mega menu text spacing

Post 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.
Norman
George
Posts: 3
Joined: Sun May 25, 2014 9:23 pm

Re: mega menu text spacing

Post 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 */
norman
Site Admin
Posts: 1252
Joined: Sat Feb 07, 2004 9:55 pm

Re: mega menu text spacing

Post 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.
Norman
George
Posts: 3
Joined: Sun May 25, 2014 9:23 pm

Re: mega menu text spacing

Post 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
Post Reply