Home / Community & Support / Developer Productivity Tools Forums / ASP.NET AJAX > Menu > how to center align the root menu using css

• sathish venkat

  Posted on Apr 14, 2010 (permalink)

  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

  Attached files

  • requiredmenu.JPG
  • currentmenu.JPG

  Reply

• Veronica Veronica

  Posted on Apr 15, 2010 (permalink)

  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.

  Reply


• sathish venkat

  Posted on Apr 15, 2010 (permalink)

  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

  Reply

• Veronica Veronica

  Posted on Apr 15, 2010 (permalink)

  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.

  Reply

• sathish venkat

  Posted on Apr 15, 2010 (permalink)

  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

  Attached files

  • menuusercontrol.JPG
  • menuxml.JPG

  Reply

• Peter Peter

  Posted on Apr 20, 2010 (permalink)

  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.

  Reply

• Answer TCF Schepers

  Posted on Jun 21, 2010 (permalink)

  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

  Reply

• Jeff

  Posted on Nov 29, 2011 (permalink)

  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?

  Reply

• Shinu MVP

  Posted on Nov 30, 2011 (permalink)

  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.

  Reply

• Richard

  Posted on Feb 6, 2012 (permalink)

  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;
  }
  
  

  Reply

Back to Top

Home / Community & Support / Developer Productivity Tools Forums / ASP.NET AJAX > Menu > how to center align the root menu using css