Navigation Alignment Problem in Custom Theme

[yardle]

Hi all,

I'm working on a custom theme (started from the standard Genesis framework theme) and am having trouble positioning my primary navigation div.

URL: http://development3.jamesyardley.com

I'd like it to be floated to the left but it seems like another element is in the way, pushing it too far right. I've inspected with developer tools and can't seem to figure out what's going on.

Your help is greatly appreciated! Thanks!!!

James

http://development3.jamesyardley.com

[Brad Dalton]

You may want to consider using a new HTML 5 theme

This is the correct way to center the header image

The way its been done in your theme effects other header elements plus its not mobile responsive.

Generally, all you need to do is align: left or right the nav menu.

---

Tutorials for StudioPress Themes.

[yardle]

Thank you so much for the helpful response, Brad!

I implemented the 2nd solution from your post and am happy to see that it's already more mobile responsive than what I had (I was going to tackle that problem later).

When you suggest using a new HTML 5 theme, will that accomplish something different than adding this to my functions.php?

//* Add HTML5 markup structure
add_theme_support( 'html5', array( 'search-form', 'comment-form', 'comment-list' ) );

Also, I'm still in need of some help getting my navigation where it needs to be. I'm trying to duplicate this: http://adirondackcreamery.com

If there's a way to position the Site Description using CSS like it is on the live site, that would help me out a lot too.

Thanks again for the help! I can't even begin to describe how awesome this forum is.

James

[Brad Dalton]

HTML 5 validates better than XHTML so if that's what you're using then great, if not convert or use a Pro theme as they're the best coded.

The problem i see is in the existing CSS

---

Tutorials for StudioPress Themes.

[yardle]

Thanks again, Brad, for the helpful response.

I have no doubt that the problem is in the existing CSS. I just don't know CSS as well as I would like to and have basically learned most of what I know from helpful folks like yourself and troubleshooting my way through problems like this one.

I'm trying to duplicate the current live site: http://adirondackcreamery.com

The development site is: http://development3.jamesyardley.com

The nav.nav-primary div is outside the div.title-area at the moment. I'm not sure if I need to hook it inside that div somehow or if all my markup in place to accomplish the task with CSS?

James

[Brad Dalton]

Not far off.

---

Tutorials for StudioPress Themes.

[Sridhar Katakam]

http://sridharkatakam.com/split-navigation-menu-genesis-using-wp-nav-plus/

---

Genesis Tutorials | Follow me on Twitter

[yardle]

Hi Sridhar,

Your tutorial was immensely helpful. Thank you so much!

Is there something I can do to get my logo perfectly centered? It's close but not quite, and my background image dictates that it be right on.

If there's something I can do for the background image to be centered on mobile that would be very helpful as well.

URL: http://development3.jamesyardley.com

Thanks!

James

[Sridhar Katakam]

That is not easy/possible afaik.

You could make the background fit the available width using

@media only screen and (max-width: 568px) {

	.site-container {
		background-size: contain;
	}

}

but that won't do what you are asking.

You might want to consider replacing the background shell.png with a solid light blue color at lower widths.

---

Genesis Tutorials | Follow me on Twitter

[Author]

Posts