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

Viewing 8 posts - 16 through 23 (of 23 total)
  • Author
    Posts
  • #34418

    krystyn
    Participant
    Post count: 129

    Thanks!

    #34422

    Hard Boiled Greg
    Participant
    Post count: 88

    Hi 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:

    <a href="http://www.studiopress.com/forums/users/media/" rel="nofollow">@media</a> 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

    #34511

    krystyn
    Participant
    Post count: 129

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

    #34553

    Hard Boiled Greg
    Participant
    Post count: 88

    Hi 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

    #34558

    krystyn
    Participant
    Post count: 129

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

    #34563

    Hard Boiled Greg
    Participant
    Post count: 88

    To fix the nav menu change:

    #header {
            min-height: 318px;
        }

    to

    #header {
            height: auto;
        }

    where we added it in the (max-width: 960px) area.

    HBG


    Website: Hard Boiled Greg Twitter: @hbgreg

    #34565

    krystyn
    Participant
    Post count: 129

    Thank you! I was messing with the menus instead of the header (doh…because the menus are in the header for this one). Thank you SO much!

    #34566

    Hard Boiled Greg
    Participant
    Post count: 88

    You’re welcome!


    Website: Hard Boiled Greg Twitter: @hbgreg

Viewing 8 posts - 16 through 23 (of 23 total)

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