How to center the Navagation Bar

[XPSuedoX]

Hi,

I would like to center my Navigation Bar on my forums as my Nav Tabs are on the left and all that I can do is change that to the right, but no center option in the code.

I have looked all over and found nothing and was hoping someone here may have a snippet of code to add in to the css_additional.css section or help explain to me how to fix this problem.

Here is a site that has the navbar centered ---> http://www.empirisoft.com/support/

Thx

[Replicant]

I looked at doing this and anything I tried broke the responsive design, but then again, I'm no expert.

[XPSuedoX]

Originally Posted by Replicant

I looked at doing this and anything I tried broke the responsive design, but then again, I'm no expert.

Yeah, I've spent 3 days on trying things now to no avail.

What I have noticed is that the Navbar is also linked to the top main bar that has all your admincp and messages, edit site etc.. So I don't know if that's one of the reasons for this being so difficult to achieve.

Hopefully some one will come along with some advice sooon

Thx for your input though.

[nerbert]

I don't have vB 5 but I looked at the site posted and it has

.navtabs {
            text-align: center;
}

in additional.css. See what that does.

You may need this too;

.navtabs li {
                display: inline-block;
                float: none;
}

EDIT: I'm at a disadvantage here because I don't use vB 5 so I'm doing a little guessing here. If the above CSS messes up something else try the same css but for navbar and navbar li

--------------- Added [DATE]1421368787[/DATE] at [TIME]1421368787[/TIME] ---------------

That's not a vB 5 site, it's vB 4.2.1!

I found a vB 5 site and I think this works:

#channel-tabbar {
     text-align: center;
}

.h-left {
     float: none;
}

#channel-tabbar ul li {
     display: inline-block;
     float: none;
}

[XPSuedoX]

Thanks Nerbert

I Really appreciate the time you took to post your idea's and also the fact that they worked

the code at the bottom of your post was the correct one to be used. There will be some fine tuning to be done just margin stuff but it worked without messing with any other layout's or widgets - So far any way

Thanks heaps guys ----------- Legends.

[nerbert]

Glad it worked

[Replicant]

That code works until you resize the browser window. After the resize down then up, the menu items are stacked vertically. Same issue I was having when I tried.

[nerbert]

I'm afraid I'm lost on what to do about that. When I set float to "none" I also had to set display to "inline-block" to keep the tabs inline instead of vertical.

If I had vB 5 maybe I could figure this out but I have no plans to upgrade unless vBulletin puts hooks back in the code.

There are enough good coders here that I think someone could figure this out. Sorry I couldn't get it working right.