centering the menu under the header

Hi, Jackandg, put this style.css line into your child theme:

.main-navigation ul.nav-menu {
    text-align: center;
}

Your site looks good, I can imagine later it will be even better ??

Thank you Thomas! – I created my child theme, and added the line. works perfectly!

Hi Thomas, i’m sorry – one more question.

before i created the child theme, I had removed a line of php in order to center the Logo “jack + g”. In content-page.php (i think), I removed a line that looked like this:

<h1 class=”entry-title”><?php the_title(); ?></h1>

When I removed the line it centered the logo. Next I created a child theme, added your line of code, and everything was centered. I then noticed that when I make the window smaller the jack and g logo was not reducing in size while everything else was. So I created a logo that is 400 pixels in with as opposed to the previous 960 width logo. Now my logo is no longer centered.

Can you help? Thank you.

You don’t need to remove those lines from header.php. You can disable site title and descr. from WP admin Appearance/Header and unselect “Show header text with your image”

To center logo add CSS rule to your style.css:

#site-logo {
    float: none;
}

And I think bigger logo (initial version) looked better ??

I suggest you to use FireFox Inspector to see what styles are affecting the elements:

You can activate it with: CTRL+SHIFT+I

and select with the mouse element you need.

Hi Thomas,

Thanks for the tip on the firefox inspector! I had a chance to spend some time working with it – I think this will be very helpful!

– Just to make sure i’m doing this right, is it ok to copy and paste lines that I want to edit into my child theme?

If you edit CSS, then yes, you would copy just the things you want to change. If it’s a file, then you would copy whole file, eg. header.php and then edit it.

Just remember about media queries (see readme.txt), because this theme is mobile-first.

I will include sample CSS file with the next version.

You also might want to play with z-index css property of gallery elements, because they cover menu drop-down at: https://jackandg.com/earrings

Otherwise site progress is nice ??

Looks like you have already fixed that!

Thank you!
Just found the css line on the forum for the meta slider plugin (:

.main-navigation li a, .main-navigation li {
z-index: 9999;
}

You mentioned the theme is mobile first, so I looked at the site on my phone. The menu and “Jack + G” logo is a completely different format. Could you help me fix that? -Sorry, i’m pretty new at this.

The mobile menu is designed to be like this. You can change the browser window and you will see how media queries are changing the web site look depending on the size.

I plan to revise mobile menu and make it more like in Underscores theme.

If you want to display logo in certain browser sizes, play with CSS ??

You can add:

footer#colophon {
    min-height: 120px;
}

Or some other size in px, to make the radial background color not to be cut-off.

Also if you don’t want the menu item Collections to be a link, but just the container for sub-menu items, create a Link menu item (put anything like aaa in link address box) then when it is created, edit it and remove the link address. Hope you will understand what I’m trying to tell :)))