How To Center The Primary Navigation Horizontal Menus

Community Forums Forums General Discussion How To Center The Primary Navigation Horizontal Menus

This topic is: not resolved

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

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #18425

    RobCubbon
    Participant
    Post count: 103

    Hi,
    This is a general issue with Genesis that I’ve been struggling with for a long time.
    I’ve used this tutorial: http://journalxtra.com/easyguides/howto-center-wordpress-genesis-theme-horizontal-menus-4729/ with some success in the past but I just can’t get it to work on this site: http://genuinehypnosis.com/ which is based on the Streamline theme but this question applies to most Genesis themes.
    I want the menu to be centered on all the mobile and tablet responsive views and / or the “normal” version.
    I can’t believe that such a simple thing is so difficult in Genesis.


    #18472

    Tony @ AlphaBlossom
    Participant
    Post count: 507

    Hello,

    The menu is already centered, so I’m assuming you want the specific menu items centered. Try this:


    #nav li {
    float: none;
    display: inline-block;
    }

    You might also have to add:

    #nav ul {
    text-align: center;
    }

    Also, if you’re using submenus or more than one, you will have to be more specific in your css targeting, but the above code worked with the menu you linked to above.

    And if you want it centered only on certain devices or screen resolutions, you can add this code to your media queries to target those (you can see examples of this in the new genesis style.css files).

    Take care,

    Tony
    AlphaBlossom


    #18787

    RobCubbon
    Participant
    Post count: 103

    Hello Tony, thank you so much for that.

    This wasn’t necessary:


    #nav ul {
    text-align: center;
    }

    However, with just 4 items in the menu I think they look too spaced out at the wide view but if you put it in @media only screen and (max-width: 960px) it looks really good on the smaller devices this way :)


    #18790

    Tony @ AlphaBlossom
    Participant
    Post count: 507

    Hey Rob,

    Glad it helped!

    This is unsolicited advice :), but it would look better at smaller resolutions if you removed the background image and replaced it with a color, or created a background image that is taller.

    When the menu doubles into a 2nd row, the image is too short so you have a line in the middle of the menu.

    Have a great day.

    Tony


    #18791

    RobCubbon
    Participant
    Post count: 103

    Totally agree, Tony, that is my next job! I’m gonna remove the background image – but only on the narrower versions!


    #18792

    Tony @ AlphaBlossom
    Participant
    Post count: 507

    Yep, that will look great!


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

You must be logged in to reply to this topic.