Outreach – Centering navigation

Community Forums Forums General Discussion Outreach – Centering navigation

This topic is: not resolved

This topic contains 14 replies, has 3 voices, and was last updated by  Tony @ AlphaBlossom 1 year, 6 months ago.

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

    nicolemgr
    Participant
    Post count: 8

    Hello. I can’t figure out how to properly center my navigation. I’ve searched the old forums and this new one but none of the methods work for me.

    tried this: http://journalxtra.com/easyguides/howto-center-wordpress-genesis-theme-horizontal-menus-4729/

    and it didn’t work. Already made some changes to my stylesheet, now i’m afraid I will have to start all over if the nav can’t be centered:

    Thank you.

    • This topic was modified 1 year, 8 months ago by  nickthegeek.
    • This topic was modified 1 year, 8 months ago by  nickthegeek.
    #6153

    nickthegeek
    Keymaster
    Post count: 751

    Please dont’ paste your entire style sheet. It is adding a tone of stuff that makes it really hard to go through.

    Instead, please do share a link to your site. This lets us use development tools to inspect the HTML/CSS to actually see what is happening.

    Thanks.

    • This reply was modified 1 year, 8 months ago by  nickthegeek.
    • This reply was modified 1 year, 8 months ago by  nickthegeek.
    #6209

    nicolemgr
    Participant
    Post count: 8

    Ok, sorry about that.

    This is the site: http://template.gageis.com/

    #6213

    nickthegeek
    Keymaster
    Post count: 751

    Add #nav .wrap { } to your style sheet and set a width like 700px, adjust that till it is centered.

    Now add #nav .wrap {  width: 100%; } to the responsive section.

    #6258

    nicolemgr
    Participant
    Post count: 8

    Thanks, that fixed the centering issue.

    The navigation is no longer responsive, does ” #nav .wrap {  width: 100%; } ” need to go into a specific area in the responsive section?

    #6321

    nickthegeek
    Keymaster
    Post count: 751

    as long as it isn’t in another code block it should be fine anywhere in the responsive section, though you will probably want to go with the second media query.

    #20585

    nicolemgr
    Participant
    Post count: 8
    This reply has been marked as private.
    #20690

    nicolemgr
    Participant
    Post count: 8

    Haven’t been able to resolve this problem, I added #nav .wrap {  width: 100%; } to the second media query but it still won’t act responsive.

    http://template.gageis.com/

    #20701

    Tony @ AlphaBlossom
    Participant
    Post count: 499

    Hello,

    At the very end of your style.css you have:


    #nav .wrap {
    width: 700px;
    }

    Remove that and it should take care of your issue and allow your #nav .wrap to be at 100%.


    #20706

    nicolemgr
    Participant
    Post count: 8

    Thanks, that solved the responsive issue! Only challenge now is how can I center the navigation without using this piece of code?

    #20708

    Tony @ AlphaBlossom
    Participant
    Post count: 499

    Sorry, I don’t understand what you mean?


    #20710

    nicolemgr
    Participant
    Post count: 8

    This code was used to center the menu options but now that it was removed everything went back to the left. How can I get “GLOSSARY, JANUS PILOT PROGRAM, TIMELINE, TESTIMONIAL, CONCLUSION” to be centered on the page?

    #20711

    Tony @ AlphaBlossom
    Participant
    Post count: 499

    for .menu-primary, .menu-secondary, #header .menu – add:

    text-align: center;

    Then

    .menu-primary li,
    .menu-secondary li,
    #header .menu li {
    display: inline-block;
    float: none;
    }


    #20713

    nicolemgr
    Participant
    Post count: 8

    That worked great. Thank you!

    #20714

    Tony @ AlphaBlossom
    Participant
    Post count: 499

    You’re welcome…glad it worked. Have a great weekend!


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

You must be logged in to reply to this topic.