Centering Header Logo and Menu bar?

Hi MazterRic

Please provide a link to your site.

Hey there.

Here it is:
https://www.smydricky.mauvsa.org/

The way the current logo stands, it’s aligned directly to the left of the menu bar in Firefox. However, it’s aligned to the left but above the menu bar in Chrome. My goal is to insert a header logo big enough so that it’ll stay centered above the menu bar.

I appreciate the help!

thanks – actually can you do a quick mockup of how it is supossed to look?

Here you go:

https://www.dropbox.com/s/50kd9xn6l5no692/mockup.png

Trying to see if I can center both the logo AND the navigation bar (menu bar) so it doesn’t look weird. Yellow would be the slider.

Thank you!

Try this:

#page .container header hgroup {
float: none;
margin: 0 auto;
}

.site-header img, img.size-full {
display: block;
margin: 0 auto;
}

.main-navigation {
float: none !important;
margin: 0 auto;
width: 100%;
height: 40px;
}

.menu-main-menu-container {
margin: 0 auto;
width: 740px;
height: 40px;
}

Hey buddy!

Thanks for the code.. I added another menu option in and all I had to do was expanding the width for the menu container.

I appreciate the help! This is solved =D

You’re welcome.

Sorry.
The code is perfect but I didn’t understood how to center the menu…
Anyone can help me?
Thanks

Hey marco!

How many menu items do you have? Your menu should already be center by the last two custom CSS codes (menu navigation and .menu-main-menu-container). Try changing the width to something bigger (I had to add 100px) so that it goes far enough to wrap in all the menu items.

Ok, thanks
I understand, it’s not dynamic. right?

try this

.main-navigation {
width: 822px;
}

If you change your menu items you might have to alter this

Alternatively display your menu inline-block and then give a parent element
text-align: center,
or
Display your menu table and use margin: 0 auto

https://cssdesk.com/dHGRq

This is awesome!

Somehow, the logo is centered really well, but I still cannot center the menu. If I play with the numbers, as I read here, I get this: https://skepticdog.com/wp-content/uploads/2014/01/skeptic-error-menu.jpg

I don’t know what am I doing wrong.

This is what I inserted in Custom CSS:

/* This is for centering logo and menu*/
#page .container header hgroup {
float: none;
margin: 0 auto;
}

.site-header img, img.size-full {
display: block;
margin: 0 auto;
}

.main-navigation {
float: none !important;
margin: 0 auto;
width: 300px;
height: 40px;
}

.menu-main-menu-container {
margin: 0 auto;
width: 900px;
height: 40px;
}

Thanks!

Dear salsaturation,

where i put the code for the drop down menu ?
thanks ??

You put it in custom css or child theme css. This should help with centering

.menu-main-menu-container {
  text-align: center;
width: 100%;
}

.main-navigation ul {
  display: inline-block;
}

.main-navigation li {
  display: table;
  margin: 0 auto;
}