PDA

View Full Version : How to center the Navagation Bar


XPSuedoX
01-15-2015, 01:29 AM
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
01-15-2015, 12:52 PM
I looked at doing this and anything I tried broke the responsive design, but then again, I'm no expert.

XPSuedoX
01-15-2015, 07:52 PM
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
01-15-2015, 09:54 PM
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 1421368787 at 1421368787 ---------------

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
01-16-2015, 02:38 AM
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
01-16-2015, 02:49 AM
Glad it worked

Replicant
01-16-2015, 12:45 PM
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
01-16-2015, 01:28 PM
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.