Proper Way To Center Navigation

Community Forums Forums Design Tips and Tricks Proper Way To Center Navigation

This topic is: not resolved

This topic contains 3 replies, has 2 voices, and was last updated by  Porter 2 months, 2 weeks ago.

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #117233

    Porter
    Member
    Post count: 192

    I altered the sample theme navigation to be a fixed size of 1200px, rather than the full width spanning the entire page design it has by default. It’s the right size, and centered on a desktop, but on mobile, the page scrolls to the left a ton, and the navigation text is centered according to that width.

    My current code:

    .nav-primary {
    	background-color: #202020;
    	width: 1200px;
    	margin: 0px auto;
    }

    Those are the only changes I made, as it’s fine on desktop. How do I go about properly changing the menu to the same width as the rest of the site (in my case 1200), and keep the navigation responsive?


    iNeedHelp ? helping = false : helping = true;

    http://anightinburlington.com/
    #117235

    David Browne
    Participant
    Post count: 167

    Delete the line

    width: 1200px

    replace withmax-width: 1200px;

    Or.. if you need it to never go to the edges.. you would have to add the same css to .nav-primary which is already on .site-inner .wrap, so find..

    .site-inner, .wrap {
        max-width: 960px;
    }

    in the media queries and replace with..

    .site-inner, .wrap,
    .nav-primary  {
        max-width: 960px;
    }

    and do the same anywhere else in the media queries that targets the wrap.


    We are Dave & Erin. Full time travellers and designers. Currently in Sydney. Follow us on Google +. I’m new to twitter so be the first to say hey Twitter

    Note: Known to give only give negative critique on design. I don’t mean to offend anybody, it is just more efficient pointing out mistakes than saying “yes, its beautiful” every time. :)

    #117236

    David Browne
    Participant
    Post count: 167

    First way is easier, if you’re not sure. Just use your code, but replace that one line.


    We are Dave & Erin. Full time travellers and designers. Currently in Sydney. Follow us on Google +. I’m new to twitter so be the first to say hey Twitter

    Note: Known to give only give negative critique on design. I don’t mean to offend anybody, it is just more efficient pointing out mistakes than saying “yes, its beautiful” every time. :)

    #117334

    Porter
    Member
    Post count: 192

    So if I understand, I’m just adding .nav-primary to the already existing .site-inner and wrap media queries? I went ahead and did that, and it appears to be working great on a Kindle Fire HD. I’ll test it on the nook color and apply it to the other media queries to see the effects.


    iNeedHelp ? helping = false : helping = true;

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.