This is a migrated thread and some comments may be shown as answers.

how to center align the root menu using css

14 Answers 228 Views
Menu
This is a migrated thread and some comments may be shown as answers.
sathish venkat
Top achievements
Rank 2
sathish venkat asked on 14 Apr 2010, 10:06 PM
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

14 Answers, 1 is accepted

Sort by
0
Veronica
Telerik team
answered on 15 Apr 2010, 12:19 PM
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.
0
sathish venkat
Top achievements
Rank 2
answered on 15 Apr 2010, 01:39 PM
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
0
Veronica
Telerik team
answered on 15 Apr 2010, 02:34 PM
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.
0
sathish venkat
Top achievements
Rank 2
answered on 15 Apr 2010, 06:53 PM
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
0
Peter
Telerik team
answered on 20 Apr 2010, 09:40 AM
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.
0
Accepted
TCF Schepers
Top achievements
Rank 2
answered on 21 Jun 2010, 09:51 AM
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:ArialVerdana;  
    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
0
Jeff
Top achievements
Rank 1
answered on 29 Nov 2011, 09:57 PM
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?
0
Shinu
Top achievements
Rank 1
answered on 30 Nov 2011, 01:31 PM
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.
0
Richard
Top achievements
Rank 2
answered on 06 Feb 2012, 11:00 PM
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;
}

0
Bharadwaj
Top achievements
Rank 1
answered on 21 Sep 2012, 07:51 AM
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..
0
Kate
Telerik team
answered on 26 Sep 2012, 09:11 AM
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
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
0
Velu
Top achievements
Rank 1
answered on 19 Aug 2013, 07:22 PM
I tried this. This isn't working either. The first level menu is always left aligned.
0
Kate
Telerik team
answered on 21 Aug 2013, 10:13 AM
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
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.
0
Zaharan
Top achievements
Rank 1
answered on 19 Sep 2013, 03:30 PM
Thanks Kate.
Tags
Menu
Asked by
sathish venkat
Top achievements
Rank 2
Answers by
Veronica
Telerik team
sathish venkat
Top achievements
Rank 2
Peter
Telerik team
TCF Schepers
Top achievements
Rank 2
Jeff
Top achievements
Rank 1
Shinu
Top achievements
Rank 1
Richard
Top achievements
Rank 2
Bharadwaj
Top achievements
Rank 1
Kate
Telerik team
Velu
Top achievements
Rank 1
Zaharan
Top achievements
Rank 1
Share this question
or