Thread: top manu modification question

I use ML 9.0
the items appears on top manu have different margin on each side.
example:

| Home| Categories| Departments| Manufactureries| Customer Servie

how do I change each item left and right margin evenly?
like below:
| Home | Categories | Departments | Manufactureries | Customer Servie

Source code:
<td style="white-space:nowrap;"><a class="ctl00_aspnetMenu_1 aspnetMenu_StaticMenuItemStyle ctl00_aspnetMenu_3 aspnetMenu_Level2 ctl00_aspnetMenu_10" href="#" style="border-style:none;font-size:1em;cursor:text;margin-left:16px;">Departments</a></td>

I couldn't find this code from style.css.

jerry

look for menudata.xml. can't quite remember where it is right now.

Why not just modify the top menu categories to include an extra space after them?

Your inline style has a margin-left: 16px but no margin-right: 16px. Have you tried that?

I am wondering the same thing as BOOMINGISLAND. My menu items are not centered in between the vertical lines. I don't see the code he is referring to "<td...". Where does that appear? Do I need to have the source code, because I don't.

Has anyone figured this out yet? I need to style the menu but the margin-left:16px inline style won't allow me to. Where is that coming from? How is it being produced?

What do you mean the style won't allow you to?

Because it is producing an inline style (margin-left:16p x, I cannot say "margin:0;" in the stylesheet, since the inline will override the css. So I was wondering if there is a way to remove or prevent that inline style from being produced.

I couldn't get the left margin to go away, so I ended up adding a margin-right to at least have the text centered between the seperators. I wasn't able to completely remove it

This is a problem for me because the navigation I'm trying to work with is a fixed width and needs the text to be centered, so adding right margin isn't going to solve my problem.

Ah, i'm sorry then I played around with everything in the style sheet I could change and couldn't figure how to remove it all together

After a long while with the help of an in-house developer in his free time, we found out that adding StaticSubMenuIndent="0" inside of <asp:Menu will remove the left margin! Now the text can be centered!

If you want to adjust the horizontal menu, you can do so in the template.master file and the style.css files. You'll need to be familiar with HTML and CSS to accomplish these changes, but you should have access to adjust the look and feel of the top menu with these 2 files.

In the style.css file, in ML, the styles for the top menu should start around line 1656. If your stylesheet is already modified, you can also search your style.css document for "ASP.Net Menu Styles", there should be a section there to help you style the menu.

You'll need to be an experienced UI developer in order to make changes here, if you're not familiar with this type of code, you may want to get help from one of our DevNet partners to help skin your site: http://devnet.aspdotnetstorefront.com

We have also just added some new material to our manual that can help with understanding the file structure and making basic changes to the layout: http://manual.aspdotnetstorefront.co...-tutorial.aspx

Originally Posted by stylish

After a long while with the help of an in-house developer in his free time, we found out that adding StaticSubMenuIndent="0" inside of <asp:Menu will remove the left margin! Now the text can be centered!

Thank you!! Would have never thought of that

I was having similar problems. Tried to use CSS Friendly Control Adapter, but this is causing massive problems with Storefront.
That's why i'm not using asp:menu, but have a literal control in the template and build the menu in app_code -> masterpagebase

I have some extra SPANs to control even more style and you may adjust the depth of you menu....



private Boolean BuildMenu(MenuItemCollection inItem)
{
Literal ctrMenu = this.FindControl("litTopMenu") as Literal;


bool isActive;
isActive = false;
string rawurl = Request.RawUrl.ToLower();

rawurl = rawurl.Substring(rawurl.LastIndexOf("/") + 1);
if (rawurl.IndexOf("?") >= 0)
rawurl = rawurl.Substring(0, rawurl.IndexOf("?"));

foreach (MenuItem mi in inItem)
{
if (mi.ChildItems.Count == 0 || mi.Depth==1)
{
if (mi.Text.Trim() != "")
{
if (mi.Depth < 2)
{
ctrMenu.Text += "<li onclick=\"self.location='" + mi.NavigateUrl + "';\" class=\"TopMenu_Level" + mi.Depth + "\"><span class=\"TopMenu_InnerLeftLevel" + mi.Depth + "\" ><span class=\"TopMenu_InnerRightLevel" + mi.Depth + "\">";
if (mi.Selected)
{
ctrMenu.Text += "<span class=\"active\">";
}
else
{
ctrMenu.Text += "<span class=\"inactive\">";
}
ctrMenu.Text+= "<a href=\"" + mi.NavigateUrl + "\">" + mi.Text + "</a></span></span></span></li>";
}
}

}
else
{
if (mi.Text.Trim() != "") {
if (mi.Depth < 2)
{
ctrMenu.Text += "<li class=\"TopMenu_Level" + mi.Depth + "\"><span class=\"TopMenu_InnerLeftLevel" + mi.Depth + "\"><span class=\"TopMenu_InnerRightLevel" + mi.Depth + "\">";
if (mi.Selected)
{
ctrMenu.Text += "<span class=\"active\">";
}
else
{
ctrMenu.Text += "<span class=\"inactive\">";
}
ctrMenu.Text += "<a href=\"" + mi.NavigateUrl + "\">" + mi.Text + "</a></span></span></span><ul>";
}
}
if (BuildMenu(mi.ChildItems) == true)
{
mi.Selectable = true;
mi.Selected = true;
isActive = true;
}
if (mi.Depth < 2)
{
ctrMenu.Text += "</ul></li>";
}
}
}

return isActive;
}

@stylish - the StaticSubMenuIndent="0" works great but now there is no spacing at all. Do you know how I may add a little space between the separators evenly?
Thanks.

I wish to remove or skip the 1st tier (Home); when I remove this in the xml config it does not work correctly

Menu modifications SUCK, any changes made in the CSS will now show up. I spent weeks trying to adjust and make modifications with no luck.
I just decided to replace with my own custom menu, check out the link.

http://www.promax.com/AspDotNetStorefront/default.aspx