Community Forums › Forums › Archived Forums › Design Tips and Tricks › center menu buttons
- This topic has 16 replies, 3 voices, and was last updated 11 years, 7 months ago by
amazinglives.
-
AuthorPosts
-
June 7, 2013 at 12:16 pm #44582
katie
MemberI 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.comJune 7, 2013 at 12:26 pm #44585rfmeier
MemberHello,
Are you talking about centering the navigation links like this?
https://www.diigo.com/item/image/40chg/8smi
June 7, 2013 at 12:34 pm #44587katie
MemberYes!
June 7, 2013 at 12:40 pm #44590rfmeier
MemberOkay,
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.
June 7, 2013 at 12:44 pm #44595rfmeier
MemberOne 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.
June 7, 2013 at 12:50 pm #44600katie
MemberGreat! Thanks!
June 7, 2013 at 12:51 pm #44601rfmeier
MemberJune 7, 2013 at 12:54 pm #44604katie
MemberOh, one more thing... how do I get rid of the dark lines in between each menu button?
June 7, 2013 at 1:07 pm #44611rfmeier
MemberYou 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.
June 7, 2013 at 1:09 pm #44613katie
MemberThanks!!
June 7, 2013 at 3:36 pm #44647rfmeier
MemberJune 14, 2013 at 5:35 pm #46000amazinglives
MemberHello,
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.
June 14, 2013 at 5:36 pm #46001rfmeier
MemberJune 14, 2013 at 11:14 pm #46021amazinglives
MemberUnfortunately, 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.
June 15, 2013 at 9:10 am #46093rfmeier
MemberJune 15, 2013 at 9:23 am #46094rfmeier
MemberHello,
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.
July 5, 2013 at 1:58 pm #49390amazinglives
MemberThank 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!!!
-
AuthorPosts
- The topic ‘center menu buttons’ is closed to new replies.