Community Forums › Forums › Archived Forums › Design Tips and Tricks › Align navigation with top of "logo"
- This topic has 22 replies, 3 voices, and was last updated 10 years, 11 months ago by Hard Boiled Greg.
-
AuthorPosts
-
April 5, 2013 at 2:16 pm #33364krystynParticipant
On this site, I'd like the navigation in line with the top of the "logo." Every time I add margins to the navigation or the widget where the "logo" is, it just changes the size of that box (the "logo") but doesn't actually move the navigation bar, or the logo.
Does anybody have suggestions how to achieve this? Even if it means using a different spot for the logo. The logo is in the before sidebar widgets hook because I couldn't use the header right and kill the space for the "header/title."
April 6, 2013 at 10:51 pm #33648vajrasarMember"because I couldn’t use the header right and kill the space for the “header/title.”
I don't understand this, that could be the perfect spot for your logo as you want.
I make WordPress websites using Genesis Framework.
April 7, 2013 at 4:29 am #33672Hard Boiled GregMemberHi Krystyn,
There are a couple of ways you could do this. One would be to re-position the main nav to be within the #inner div.
Another would be to apply "position:relative" and a negative "top" value to the #sidebar rule. If you do this, be sure to remove the "overflow:hidden" rule from the #inner.
Please let me know if you need more specific help with this.
Hard Boiled Greg
Website: Hard Boiled Greg Twitter: @hbgreg
April 7, 2013 at 1:03 pm #33761krystynParticipantYes, it's the perfect spot, but it displays at the bottom of the page on all mobile units because the sidebar is forced underneath all of the posts.
April 7, 2013 at 1:10 pm #33763krystynParticipantThank you, Greg, I went the second route because I always seem to goof moving the "divs"
I commented out
overflow: hidden (in the #inner) section,
And, since I didn't have a #sidebar, I applied the following to .sidebar
position: relative;
top: -50px;
Thank you!
April 7, 2013 at 2:04 pm #33773Hard Boiled GregMemberDoh! Didn't think about the sidebar dropping below the content.
OK, put the the logo in your header (top, left) and put your menu in the header widget area. I'll help you with the css to move everything around so it is positioned the way it looks now, but with the logo not in your sidebar.
Just got home and have to unpack. I'll be back to this thread later.
HBG
Website: Hard Boiled Greg Twitter: @hbgreg
April 7, 2013 at 2:10 pm #33777krystynParticipantThank you! That would be awesome. I didn't think of putting the navigation menu on a widget as an option, too.
I'll also move those around tonight, too as I'm headed out!
April 7, 2013 at 2:19 pm #33778Hard Boiled GregMemberHi Krystyn,
The title area has left float and the header widget has a right float. The first step will be flipping those around and then fiddling with positions and margins to get everything where you want it.
I'll leave you to it for now. If you can't get it how you want it, just post in this thread (I'm subscribed) and I'll help you out.
Take care,
HBG
Website: Hard Boiled Greg Twitter: @hbgreg
April 8, 2013 at 7:56 pm #34184krystynParticipantThanks, Greg. I've got the title area right and the navigation left, but I can't get the "logo" or the actual header image to go right. I've uploaded it in the "header" section of genesis and maybe that's not the right way...but do you have a suggest for that part? Do I need to upload the header as an image and make it the background of the title area?
Scratch that. I did add the header image as the background to the title area...now I've just got to figure out how to get rid of the space under the new "navigation" and how to force it to the left aligned with the post area.
Also, I moved the test site here...that should help: http://www.krizzydesigns-test.com/test2/
April 8, 2013 at 8:05 pm #34188Hard Boiled GregMemberHi Krystyn,
I started to look at it and then refreshed and it changed. I think you are still making adjustments. Just make another post when you need a hand. 🙂
Greg
Website: Hard Boiled Greg Twitter: @hbgreg
April 8, 2013 at 8:06 pm #34189Hard Boiled GregMember(P.S. Put the menu back in the header widget. We can make the space below it go away)
Website: Hard Boiled Greg Twitter: @hbgreg
April 8, 2013 at 8:34 pm #34194Hard Boiled GregMemberAaah, you edited your post; I didn't see that.
Change #header 'min-height: 318px' to 'height: 50px' and remove 'overflow: hidden'
To .wrap add 'position: relative'
Change your CSS to this:
.header-image #title-area, .header-image #title, .header-image #title a { display: block; height: 318px; overflow: hidden; padding: 0; position: absolute; right: 0; text-indent: -9999px; width: 300px; }
To .sidebar add 'margin-top: 290px'
Now you should be all setup for desktop screens. As the browser width decreases the above changes are going to need to be "undone" and new rules applied to their respective @media screen sizes depending on how you want it too look on those devices.
Please leave a post here if you need help with that.
HBG
Website: Hard Boiled Greg Twitter: @hbgreg
April 9, 2013 at 1:44 pm #34333krystynParticipantThank you! Yes, I did a little post editing. Next time, I'll just add a new post.
That definitely did the trick for the navigation bar (I just have to fiddle with it as I think I want it aligned left). But, I have no idea about the screen sizing for the logo part. When I increase my browser width, it's like the logo is pinned to the right side of the screen. Would it be better to position it next to the "navigation" in some way? (Which yes, the navigation is in the header widget...that's good, right?)
April 9, 2013 at 1:46 pm #34336krystynParticipantAlso, just took a look at the iphone and the "logo" is layered underneath the navigation and the first post text is on top of the logo as well.
April 9, 2013 at 5:09 pm #34407Hard Boiled GregMemberHi Krystyn,
Just wanted to let you know I've seen your post. I have to run a few errands and I'll be back later to help you finish this off.
HBG
Website: Hard Boiled Greg Twitter: @hbgreg
April 9, 2013 at 6:37 pm #34418krystynParticipantThanks!
April 9, 2013 at 7:24 pm #34422Hard Boiled GregMemberHi Krystyn,
When I increase my browser width, it’s like the logo is pinned to the right side of the screen.
This is not supposed to be like this. I think you missed adding 'position: relative' to your .wrap rule. Adding this will fix it.
Now lets look at narrow screen sizes. Your "desktop design" is two columns (content and sidebar) and we've set up the CSS to position your logo in the "right column". When viewing the site on a tablet or mobile phone, your theme reduces to one column. You as the designer/developer need to determine how you want your layout to be on these devices.
One option would be to position the logo top center, with the menu below it, and then the main content. Your theme does this out of the box, but we made some changes last time to get the full-width view the way you want, so we need to add CSS rules to "put things back" at narrower screen sizes.
The StudioPress style sheets group the mobile responsive CSS rules at the bottom. If you open your style sheet and scroll to the bottom you will see settings for various max-widths ie:
@media only screen and (max-width: 960px) { /* Various CSS Rules */ }
The code inside the above rule is only "used" when the screen has a width of 960px or less.
If you place the following code:
.header-image #title-area, .header-image #title, .header-image #title a { position: relative; } #header { min-height: 318px; }
inside that area, it will display your logo top center, followed by nav and content when the screen is 960px or less.
If you want a different layout than that on those screen sizes, then you will need to apply different rules. This is just one solution.
Additionally, you may need to specify an alternate logo image for really small screens if your existing logo is too wide.
You can try applying those changes and let me know what you think.
If you have any questions or need better clarification, please do not hesitate to let me know.
HBG
Website: Hard Boiled Greg Twitter: @hbgreg
April 10, 2013 at 8:44 am #34511krystynParticipantThank you, Greg! You are right, I missed the .wrap rule.
And of course, that worked perfectly for the mobile part.
The logo works on the iPhone screen just fine...I wonder if there is anything smaller than 300px wide?
April 10, 2013 at 10:12 am #34553Hard Boiled GregMemberHi Krystyn,
Your logo is left aligned at 960px and less. If you add 'margin: 0 auto' to your #title rule it will be centered.
Up to your preference of course.
Greg
Website: Hard Boiled Greg Twitter: @hbgreg
April 10, 2013 at 10:20 am #34558krystynParticipantGood catch, thank you!
For the "navigation" menu" when it drops to two lines (mobile, narrow screen), I'll need to add more space underneath it so that it doesn't go into the posting area. I'm assuming it's another 'margin:0 auto' but not sure where to place it.
-
AuthorPosts
- The topic ‘Align navigation with top of "logo"’ is closed to new replies.