Centering Horizontal Navigation
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
;
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. :)
@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
;
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,