how to center align the root menu using css

[sathish venkat]

hi 

i am using rad menu control for horizontal menu and i am using black css
i need to center align my root menu please give me a solution for this
CurrentMenu.jpg---now i am getting this menu
RequiredMenu.jpg---i need to change like this
please refer attached screen shots

[Veronica]

Hello sathish,

Please take a look at this demo for a solution.

The idea is to use the DefaultGroupSettings property and set a negative value to be able to shift the child items to the left:

<telerik:RadMenu ID="RadMenu1" runat="server">
            <Items>
                <telerik:RadMenuItem runat="server" Text="Root RadMenuItem1">
                    <Items>
                        <telerik:RadMenuItem runat="server" Text="Child RadMenuItem 1">
                        </telerik:RadMenuItem>
                        <telerik:RadMenuItem runat="server" Text="Child RadMenuItem 2">
                        </telerik:RadMenuItem>
                    </Items>
                    <GroupSettings OffsetX="0" />
                </telerik:RadMenuItem>
                <telerik:RadMenuItem runat="server" Text="Root RadMenuItem2">
                    <Items>
                        <telerik:RadMenuItem runat="server" Text="Child RadMenuItem 1">
                        </telerik:RadMenuItem>
                    </Items>
                </telerik:RadMenuItem>
                <telerik:RadMenuItem runat="server" Text="Root RadMenuItem3">
                    <Items>
                        <telerik:RadMenuItem runat="server" Text="Child RadMenuItem 1">
                        </telerik:RadMenuItem>
                        <telerik:RadMenuItem runat="server" Text="Child RadMenuItem 2">
                        </telerik:RadMenuItem>
                        <telerik:RadMenuItem runat="server" Text="Child RadMenuItem 3">
                        </telerik:RadMenuItem>
                    </Items>
                </telerik:RadMenuItem>
            </Items>
            <DefaultGroupSettings OffsetX="-50" />
        </telerik:RadMenu>

Regards,
Veronica Milcheva
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

[sathish venkat]

Hi,

   Thanks for your reply  your solution is useful to center align the sub menu items
is there any option to centre align the root menu because i given root menu width as 200px each, so i need to
center align root menu text

[Veronica]

Hi sathish venkat,

Please take a look at this knowledge base article:
http://www.telerik.com/support/kb/aspnet-ajax/menu/how-to-stretch-the-menu-items-to-fill-the-entire-width-of-the-menu.aspx

Hope this helps.

Kind regards,
Veronica Milcheva
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

[sathish venkat]

hi

     that javascript not working because i am using user control for menu and binding menu from xml
please help me to solve the issue

[Peter]

Hello sathish,

Do you get any specific errors? The fact that your RadMenu is in a user control and populated from xml should not affect the approach from the kb article. Can you isolate the problem and send it to us via a support ticket?

Regards,
Peter
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

[TCF Schepers]

Hi sathish,

I coped with the same issue as you, and I've found the solution. The problem is that the CSS-classes you want are being overruled by the standard webresource.axd. So, in order for things to work, you'll have to overrule those yourself with the standard CSS selectors.

Here's a copy of my CSS:

.RadMenu_samplemenu
{
    font-family:Arial, Verdana;
    font-size:14px;
    color:#FFFFFF;
    margin-left:100px;
}
.RadMenu_samplemenu .rmItem
{
    margin-top:6px;
    width:122px;
    height:30px;
    border-right:solid 1px #FFFFFF;
}

.RadMenu_samplemenu .rmFirst
{
    margin-top:6px;
    width:122px;
    height:30px;
    border-left:solid 1px #FFFFFF;
}
.RadMenu .rmLink
{
    text-decoration:none;
    width:100%!important;
    padding:0px!important;
    text-align:center;
}
.RadMenu .rmText
{
    margin-left:auto!important;
    margin-right:auto!important;
    float:none!important;
}
.RadMenu .rmHorizontal .rmText
{
    padding:0px!important;
}
.RadMenu_samplemenu .rmItem .rmText
{
    margin-top:6px;
    color:#FFFFFF;
}
.RadMenu_samplemenu .rmItem .rmText:hover
{
    color:#000000;
    cursor:hand;
    cursor:pointer;
}
.RadMenu_samplemenu .rmItem .rmText:active
{

}

If you have any questions, do not hesitate to ask.

Regards and good luck,

Thomas Schepers

[Jeff]

While this works for me as well, how do I tell the submenu items to NOT be centered while the top level text is centered?

[Shinu]

Hello Jeff,

Try the following CSS.
CSS:

<style type="text/css">
 .RadMenu .rmGroup .rmText
 {
    margin: 0 0 0 -20px !important;
    background-color:White !important;
 }
</style>

-Shinu.

[Richard]

This is what worked for me to get the top level centered but the sub-level left aligned.

.RadMenu .rmText
{
    text-align: center;
}

.RadMenu .rmGroup .rmText
{
     text-align: left !important;
}

[Bharadwaj]

i used ur code for making top level to center and sub level to left aligned.... but top level is always aligned to left... der is any other way to do top level as center aligned...can u please help me out with dis..

[Kate]

Hi Bharadwaj,

Try using the following css class selector to get the desired appearance of the RadMenu:

div.RadMenu .rmText
       {
           text-align: center;
           color: Red;
       }
       div.RadMenu .rmText
       {
           float: none;
       }
       div.RadMenu .rmHorizontal .rmItem
       {
           text-align: center;
       }
       div.RadMenu .rmGroup .rmText
       {
           text-align: left !important;
           color: Green;
       }

All the best,
Kate
the Telerik team

[Velu]

I tried this. This isn't working either. The first level menu is always left aligned.

[Kate]

Hello Kulanthaivel,

Can you please provide the markup that you are using so I can test if there is something specific in your scenario and assist you in getting the desired look?

Regards,
Kate
Telerik

[Zaharan]

Thanks Kate.