Community Forums › Forums › Archived Forums › Design Tips and Tricks › Navigation Alignment Problem in Custom Theme
- This topic has 8 replies, 3 voices, and was last updated 9 years, 7 months ago by Sridhar Katakam.
-
AuthorPosts
-
August 25, 2014 at 9:30 am #120916yardleParticipant
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.comAugust 25, 2014 at 9:38 am #120920Brad DaltonParticipantYou 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.
August 25, 2014 at 10:06 am #120927yardleParticipantThank 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
August 25, 2014 at 10:17 am #120931Brad DaltonParticipantHTML 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
August 26, 2014 at 1:17 pm #121180yardleParticipantThanks 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
August 29, 2014 at 12:58 am #121642Brad DaltonParticipantAugust 29, 2014 at 3:24 am #121653Sridhar KatakamParticipantSeptember 2, 2014 at 2:07 pm #122474yardleParticipantHi 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
September 2, 2014 at 10:52 pm #122522Sridhar KatakamParticipantThat 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.
-
AuthorPosts
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.