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 » Sun May 25, 2014 9:54 pm

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: 1238
Joined: Sat Feb 07, 2004 9:55 pm

Re: mega menu text spacing

Post by norman » Sun May 25, 2014 10:19 pm

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 » Sun May 25, 2014 11:25 pm

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: 1238
Joined: Sat Feb 07, 2004 9:55 pm

Re: mega menu text spacing

Post by norman » Mon May 26, 2014 12:34 am

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 » Mon May 26, 2014 4:05 pm

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