How to convert the Categories Vertical menu into horizontal

Hi, Nopcommerce has the categories on the left side vertically. I have spent several hours try to convert it to horizontal alignment and without results. I am planning to use it on a 1 column page in the default page. So I copied the control to the default page and it shows up vertically. Anyone can help with a solution?

Thank you.

CategoryNavigation.ascx lays out the categories using <li> tags (lists), which are always going to go vertical. If you want the categories to go horizontal you will have to edit CategoryNavigation.ascx.cs and take out the <li> and figure out what else you need to do to get to to go the way you want.

I use categories down the side like they're set up originally, so I don't have any code to post, but it should be fairly easy if you know what you're doing.

I removed the li from the .cs file but it still doesn't go away. I also have to implement the hover effect so that the subcategories would show up on mouse over.

Thanks.

You can make an unordered list render horizontally using css.

Just set the style to

li {display: inline;list-style: none;}

HTH

Thank you. But where exactly do I place
li {display: inline;list-style: none;}

Here ?

            protected override void Render(System.Web.UI.HtmlTextWriter writer)
            {
                writer.WriteBeginTag("li");
                writer.WriteAttribute("class", this.CssClass);
                if (!String.IsNullOrEmpty(this.LiLeftMargin))
                {
                    writer.WriteAttribute("style", string.Format("margin-left: {0}px", this.LiLeftMargin));
                }
                writer.Write(HtmlTextWriter.TagRightChar);
                this.HyperLink.RenderControl(writer);
                writer.WriteEndTag("li");
            }

or somewhere in the css file?

Thanks.

css file

This has worked thank you.

.block-category-navigation .listbox li
{
    display: inline;list-style: none;
}


How do I expand the navigation to show the sub categories on mouse over?

I knew that was going to be his next question... got any CSS for that Retroviz?

Nice CSS by the way - all I know about CSS is what I steal from others :)

Alpinhasov wrote:

Unfortunately this would require development since the current implementation only shows the subcategories for the selected category on postback.

First you need to achieve your desired menu outside of nopCommerce, for example, we like the Superfish jQuery menu.

Once you know the HTML structure you need, you need to change the nopCommerce module to render the same structure out.

Can't really be any more specific than that as it varies depending on the menu plugin you use.

HTH

No problem. Thanks a lot.