Centering Horizontal Navigation

Posted by Community Admin on 05-Aug-2018 04:21

Centering Horizontal Navigation

All Replies

Posted by Community Admin on 26-Mar-2013 00:00

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;

Posted by Community Admin on 26-Mar-2013 00:00

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.

Posted by Community Admin on 26-Mar-2013 00:00

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.

Posted by Community Admin on 26-Mar-2013 00:00

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. :)

Posted by Community Admin on 27-Mar-2013 00:00

@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

Posted by Community Admin on 01-Apr-2013 00:00

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;

Posted by Community Admin on 01-Apr-2013 00:00

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

Posted by Community Admin on 01-Apr-2013 00:00

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

This thread is closed