Trying to center menu

[Silveroo]

In regards to http://wisecanadianmoney.com/testwp/

1. I want to center ALL elements of the menu horizontaly. (test, exam, hello, apple)
2. Make these elements have: bold and font-size:18px

How is this accomplished? Tried all sorts of things, pulling my hair out…

.html_header_top.html_logo_center .logo {
left: 50%;
-webkit-transform: translate(-50%, 0);
-moz-transform: translate(-50%, 0);
-ms-transform: translate(-50%, 0);
transform: translate(-50%, 0); }

thank you!!
Silveroo

[shaneisme]

Have you taken a look at devtools in your browser?

You’ll find out all sorts of information there. (including that this is a messy theme!)

I’m not sure what the CSS is that you put in your post, it doesn’t seem to have anything to do with your menu.

First of all, the actual menu is ul#avia-menu.menu.av-main-nav. The menu items that you listed [test, exam, hello, apple] are actually siblings of the search button as well. Those are all set to float: left, while the search button is set to float: right. That’s the first part of your problem… if you follow so far, you should be able to dig in and fix it up.

If not… for this theme, did it come with this menu, or is this menu a widget? Are there options inside the WP admin to modify it?

[Silveroo]

thanks shaneisme,
I follow you, but I couldn’t find a float:middle in devtools? how should I go about this?

[Paulie_D]

There is no such property as float:middle.

[Paulie_D]

You can do this

.html_header_top.html_bottom_nav_header .main_menu>div, .html_header_top.html_bottom_nav_header .main_menu ul:first-child {
width: 100%;
height: 35px;
text-align: center; /* will center INLINE-BLOCK list items */
}

INLINE-BLOCK THE li

.av-main-nav li {
/* float: left; <em>/ /</em> remove this <em>/
position: relative;
z-index: 20;
display: inline-block; /</em> here */
}

Note this will cause your search icon/box to displace because it has float:right.

If you remove that it will center with the rest.

[Silveroo]

thank you Paulie,
I tried your code and unfortunately it didn’t work. I couldn’t tell you why though :)
I left the code as is on my page, if you could kindly see how it behaves at http://wisecanadianmoney.com/testwp/

I’m fine with the search field being on the right, actually I might take it out alltogether.
What’s most important is the center alignment of the links in the main menu.

best regards
Silveroo

[Paulie_D]

I tried your code and unfortunately it didn’t work. I couldn’t tell you why though

Me neither unless it’s a caching issue….I adjusted those properties on the page, in browser, using the usual developer tools and it worked fine.

[Author]

Posts