MyBB Community Forums

Hello!

My website: http://sdw.nn.pe/

I've included an image to help explain the issue; please use that as a reference.
[attachment=33566]

How would I successfully center my navigation bar? I've tried out so many different methods from several different websites yet only one has somewhat worked for me.

I'm using the following CSS to center it:

.topmenu ul {
    display: table;
    float: none;
    margin: 0 auto;
}

Now, it looks nice and centered, but it's more to the right than it is to the left (thus not correctly centered) and on the right side of the navigation bar there is a line at the end of the bar (see circle 4) which is not on the other side (see circle 3).


EDIT:
I've just discovered what I believe is one culprit of the issue. The  <ul id="menu"> (non-visible navigation bar) bar does not reach out to both ends of the site; just the right end, which would make sense as to why the bar was going more to the right. How would I increase the non-visible navigation bar's size (<ul id="menu">) and fix that line on the end of the right visible navigation bar?

I've included another attachment to clear up any confusion.
[attachment=33567]

You need to set the element's width in CSS. For an example, here's mine:

 .menu {
	background: #000;
	float: left;
	text-align: center;
	background-color: rgba(0,0,0,.8);
	position: fixed;
	width: 100%;
	font-size: 13px;
	font-style: normal;
}

http://i.gyazo.com/b61d144e925a4f7669643a3d9f4957da.png

(2015-01-22, 03:42 PM)Nebulon Ranger Wrote: [ -> ]You need to set the element's width in CSS. For an example, here's mine:

 .menu {
 background: #000;
 float: left;
 text-align: center;
 background-color: rgba(0,0,0,.8);
 position: fixed;
 width: 100%;
 font-size: 13px;
 font-style: normal;
}

http://i.gyazo.com/b61d144e925a4f7669643a3d9f4957da.png

That's odd. It just put mine back to the left.

http://gyazo.com/ae09657adbd93754f0948178a95555b7

You're not supposed to copy mine verbatim if that's what you did.

Just set the width of the whole container to match the area you want it to.

looks like ul.topmenu {width: 92%;} is fixing it ..

(2015-01-22, 04:12 PM).m. Wrote: [ -> ]looks like ul.topmenu {width: 92%;} is fixing it ..

So

 ul.topmenu {width: 92%;} {
   display: table;
   float: none;
   margin: 0 auto;
}

?

^ it is just ul.topmenu {width: 92%;}

(2015-01-22, 04:26 PM).m. Wrote: [ -> ]^ it is just ul.topmenu {width: 92%;}

Thank you so much! 94% did just fine!

Also, is there any way to get rid of that little line at the right side of the navigation bar? The tiny line in circle 4 on the first attachment (look at it closely and you'll be able to see what I'm talking about).

Wrong answer, later I saw also a vague vertical line caused by border right color as mentioned by mmadhankumar below.

add this and hard refresh (CTRL+F5) the forums

.topmenu li:last-child a {
border-right: none;
}