Having trouble centering the logo with infinity pro

[shango]

Hi Group. I'm trying to center the logo with infinity pro theme. Can seem to get it to work. Tried moving site-title to after_header and couldn't get it to work there either. I'm doing something wrong. Any help is appreciated.

[Brad Dalton]

Look in the Genesis Sample child themes CSS under the Site Header section because the CSS rule centres the logo.

---

Tutorials for StudioPress Themes.

[shango]

Hi Brad, thanks for the reply. After looking into this further, I think I need to add custom menu widgets to either side of the logo so that it works with my design.

[Brad Dalton]

You can do that using several methods.

One would be to remove genesis_header and then add it back in columns with a widget, title area and widget. You could use column classes included in Genesis.

---

Tutorials for StudioPress Themes.

[shango]

Did it with CSS. Grabbed header image for the bg of the "home" link and placed home menu item in the center of the list in Appearance > menu

[shango]

Turns out the logo as bg image to home link is not the best plan either. Using a secondary menu on one side of the logo presents issues with some mobile responsive menus. After loads of research and trying each method, the most elegant way to do this seems to be purely with css.
Remove the header right widget. Add a class to the menu element that you want just to the right of your logo, ie. .split-right. Add margin-left to the split right element, enough to fit your logo. Add the logo to the bg of your site-container a element and then something like this css:

site-title a {
text-indent: -9999px;
display: block;
height: 71px; /* this works cause my logo is 71px high. Leaving no width rule worked out for me. */
}

Center the logo like this:

.site-title {
position: absolute;
left: 0;
right: 0;
top: 20px;
margin: 0 auto;
	}

Then adjust it all horizontally with this css:

ul.genesis-nav-menu > li:first-child {
margin-left: 95px; /* adjust nav to center around logo */
	}
.nav-primary .split-right {
margin-left: 100px; /* Also needs adjusting to center things */
	}

There was an article out there that uses this method. Can't find link now. Works perfectly for me. It's fairly responsive. I break to mobile before things get too screwy.

[Author]

Posts