+1-888-365-2779
Try Now
More in this section

Forums / Designing & Styling / Centering Horizontal Navigation

Centering Horizontal Navigation

8 posts, 0 answered
  1. Adam
    Adam avatar
    15 posts
    Registered:
    14 Mar 2013
    26 Mar 2013
    Link to this post
    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;
    }
  2. Tim
    Tim avatar
    258 posts
    Registered:
    22 Jun 2011
    26 Mar 2013
    Link to this post
    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.
  3. Adam
    Adam avatar
    15 posts
    Registered:
    14 Mar 2013
    26 Mar 2013 in reply to Tim
    Link to this post
    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.
  4. Tim
    Tim avatar
    258 posts
    Registered:
    22 Jun 2011
    26 Mar 2013 in reply to Adam
    Link to this post
    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. :)
  5. Jochem Bökkers
    Jochem Bökkers avatar
    787 posts
    Registered:
    13 Aug 2007
    27 Mar 2013 in reply to Tim
    Link to this post
    @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
  6. Adam
    Adam avatar
    15 posts
    Registered:
    14 Mar 2013
    01 Apr 2013 in reply to Jochem Bökkers
    Link to this post
    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;
    }
  7. Jochem Bökkers
    Jochem Bökkers avatar
    787 posts
    Registered:
    13 Aug 2007
    01 Apr 2013 in reply to Adam
    Link to this post
    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
  8. Jen Peleva
    Jen Peleva avatar
    568 posts
    Registered:
    10 Nov 2016
    01 Apr 2013
    Link to this post
    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
8 posts, 0 answered