Centering Horizontal Navigation - Front- & Back-End Development - Front- & Back-End Development - Progress Community
 Front- & Back-End Development

Centering Horizontal Navigation

  • Centering Horizontal Navigation
  • Thanks Tim.
    I tried modifying the block I mentioned in the original post, removing the float and adding the margin: 0 auto;

    Unfortunately, it still didn't center the navigation options on the screen horizontally; they still start at the far left margin of the screen.  I'm guessing it's more to do with all the default sytling that was loaded into the CSS when I added it.  Maybe something in another block is overriding the margin setting.
  • Adam,

    Is the site publicly available? If not, can you put up a fiddle with the code you're looking to modify? Without seeing the actual code, I'd just be guessing. :)
  • I am trying to center the default horizontal navigation on a page.  Is there a way to do this via changing the CSS provided by default when adding a new theme?  I've played with the following, with no success:

    div.RadTabStrip.RadTabStrip_Sitefinity ul li a.rtsLink

    height:46px;
    line-height:46px;
    float:left;
    display:block;
    padding:0 20px;
    color:#333;
  • Horizontally centering an element is usually done with:

    .exampleselector margin: 0 auto;

    The 0 will be top/bottom margin, the auto will specify left/right. Also, you'll need to remove any floats that are applied to the specific element you're trying to center.
  • @Adam,


    The class .RadTabStrip .rtslevel (which is the wrapper div surrounding the ul/li) has a width of 100% so that's the first thing to take care of.

    Second part is the display type, set it to table and you're done.

    div.RadTabStrip.RadTabStrip_Sitefinity
    width: auto;
    display: table;
    margin: 0 auto;

    Jochem
  • Thanks Jochem.  That did the trick for centering the horizontal nav.  Now the only issue is that when I hover over a link in the nav bar, the whole navbar shoots back to the left margin instead of remaining centered.  I've wiped out all CSS, so I don't believe it's being overridden.  I'll dig deeper and see if I can't tell what's going on.  The only code for the horizontal nav is:

    div.RadTabStrip.RadTabStrip_FooterNav ul li a.rtsLink.rtsSelected

     font-weight: bold;

    div.RadTabStrip.RadTabStrip_FooterNav

     width: auto;
     display: table;
     margin: 0 auto;

  • Hey Adam,

    The problem's related to a style you're setting through your theme.
    I just tried using both the Sitefinity basic theme, and no theme and in both cases, hovering or clicking isn't causing it to jump or shoot to the left.

    Do you have a url for your website to take a peek at?

    Jochem
  • Hello Adam,

    It would be helpful, as Jochem mentioned, to provide us with a link to your website. This will helps us determine why the layout breaks when you hover over an item.

    Kind regards,
    Jen Peleva
    the Telerik team
    Do you want to have your say in the Sitefinity development roadmap? Do you want to know when a feature you requested is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items