- This topic has 5 replies, 2 voices, and was last updated 12 years, 10 months ago by
.
-
Posts
-
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.
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
Tony Eppright | http://www.AlphaBlossom.com | Follow me on twitter @_alphablossom
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 🙂
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
Tony Eppright | http://www.AlphaBlossom.com | Follow me on twitter @_alphablossom
Totally agree, Tony, that is my next job! I'm gonna remove the background image – but only on the narrower versions!
Yep, that will look great!
Tony Eppright | http://www.AlphaBlossom.com | Follow me on twitter @_alphablossom
- The forum ‘General Discussion’ is closed to new topics and replies.