Align navigation with top of "logo"

Community Forums Forums Design Tips and Tricks Align navigation with top of "logo"

This topic is: resolved

This topic contains 22 replies, has 3 voices, and was last updated by  Hard Boiled Greg 1 year, 6 months ago.

Viewing 15 posts - 1 through 15 (of 23 total)
  • Author
    Posts
  • #33364

    krystyn
    Participant
    Post count: 148

    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.”

    #33648

    UT Mod
    Participant
    Post count: 160

    “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.

    #33672

    Hard Boiled Greg
    Participant
    Post count: 88

    Hi 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

    #33761

    krystyn
    Participant
    Post count: 148

    Yes, 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.

     

    #33763

    krystyn
    Participant
    Post count: 148

    Thank 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!

    #33773

    Hard Boiled Greg
    Participant
    Post count: 88

    Doh! 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

    #33777

    krystyn
    Participant
    Post count: 148

    Thank 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!

    #33778

    Hard Boiled Greg
    Participant
    Post count: 88

    Hi 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

    #34184

    krystyn
    Participant
    Post count: 148

    Thanks, 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/

    #34188

    Hard Boiled Greg
    Participant
    Post count: 88

    Hi 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

    #34189

    Hard Boiled Greg
    Participant
    Post count: 88

    (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

    #34194

    Hard Boiled Greg
    Participant
    Post count: 88

    Aaah, 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:
    [css].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;
    }[/css]

    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

    #34333

    krystyn
    Participant
    Post count: 148

    Thank 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?)

    #34336

    krystyn
    Participant
    Post count: 148

    Also, 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.

    #34407

    Hard Boiled Greg
    Participant
    Post count: 88

    Hi 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

Viewing 15 posts - 1 through 15 (of 23 total)

The topic ‘Align navigation with top of "logo"’ is closed to new replies.