center menu buttons

[katie]

I want to center my menu buttons on my nav bar.  How do I do that with keeping the nav bar where it is?  I'm using the Enterprise theme if that makes a difference.

http://www.integrityvasolutions.com

[rfmeier]

Hello,

Are you talking about centering the navigation links like this?

https://www.diigo.com/item/image/40chg/8smi

---

Ryan Meier – Twitter

[katie]

Yes!

[rfmeier]

Okay,

You will have to edit your style.css file like below;

/* line ~301 */
#nav ul {
    width: 950px;
    float: left;
    list-style: none;
    margin: 0;
    padding: 0 0 0 10px;
    text-align: center; /* set text-align to center */
}

/* line ~310 */
#nav li {
    float: none; /* set float to none */
    list-style: none;
    margin: 0;
    padding: 0;
    display: inline-block; /* set display to inline-block */
}

Let me know how it turns out.

---

Ryan Meier – Twitter

[rfmeier]

One other thing. If you want to remove the dark bar (navline.png) on navigation link to the far right, add this style rule to your style.css file;

/*  line ~329 */
#nav li:last-child a {
    background-image: none;
}

As a warning, it will still show on older versions of Internet Explorer 7 or less... maybe 8.

---

Ryan Meier – Twitter

[katie]

Great!  Thanks!

[rfmeier]

You are welcome. I am glad I could help.

---

Ryan Meier – Twitter

[katie]

Oh, one more thing...  how do I get rid of the dark lines in between each menu button?

[rfmeier]

You can remove all dark line separators by removing the background image for all anchor tags in your style.css file like below;

/* line ~316 */
#nav li a {
	color: #ffffff;
	display: block;
	font-size: 16px;
    margin: 0;
	padding: 13px 17px 12px 15px;
	text-decoration: none;
	text-shadow: # 1px 1px;
	position: relative;
	background: none; /* set background to none */
}

I hope this helped.

---

Ryan Meier – Twitter

[katie]

Thanks!!

[rfmeier]

You are welcome. Glad I could help.

---

Ryan Meier – Twitter

[amazinglives]

Hello,

I'm working on something similar.  I'm using Executive theme, placed the navigation menu under the header, and I want that menu centered under the header.  It is to the left now.

Based on above, I did:

.menu-primary ul,
.menu-secondary ul,
#header .menu ul {
float: left;
width: 100%;
list-style: none;
margin: 0;
padding: 0 0 0 10px;
text-align: center;
}

.menu-primary li,
.menu-secondary li,
#header .menu li {
float: none;
list-style: none;
margin: 0;
padding: 0;
display: inline-block
}

But it doesn't look any different.  I added text-align center; to the last section.  It centered, but the menu titles were in a column instead of across.  Any ideas?

Thanks.

[rfmeier]

Hello,

Is a link available by chance?

---

Ryan Meier – Twitter

[amazinglives]

Unfortunately, I can't show it yet.  I can pull any part of the stylesheet or send you a pic of the screen.  Would either help?

Thanks again.

[rfmeier]

I will take a look at the Executive demo and see what I can come up with.

---

Ryan Meier – Twitter

[rfmeier]

Hello,

The demo did not have a submenu present, but I was able to play around with the widget/header menu.

The menu ul element will have to lose it's float value and set to display: inline-block. One of the parent div elements (I am not sure which) should have it's text-align set to center.

In short, the menu li elements are already centered. The ul menu itself needs to be centered since it is floated.

I hope this helps some.

---

Ryan Meier – Twitter

[amazinglives]

Thank you Ryan! Sorry I didn't post sooner. I went on vacation and thought I would have access to a computer there, but didn't. I just tried your suggestion and voila. Thanks again!!!

[Author]

Posts