Navigation centering and image question

[Elaine Griffin]

Hello,

I have looked around the forums, and I'm still having a hard time centering the navigation on this site: http://retro-food.com/The top line is centered, but the bottom isn't, and I do want the nav on two lines.

Here is the other issue. I tried using the stars as background images floated to the right of the words, but they either 1. didn't show up, or 2. were the only things to show up, depending on how I coded it. So, I decided to use images for the words and the stars, which I would prefer not to do.

Any thoughts? I appreciate the help! 🙂

 

[David Chu]

Hi,
I've done a lot of menu centering in my time. Menu centering is a CSS nightmare. 🙂 So I've collected a lot of tricks. However, if I'm following you, your scenario, to center within a single menu, is unprecedented. I have something quick and dirty that makes it look a little more centered.

#nav li.menu-item-2714 a {
  margin-left: 0;
}

But it's far from bullet-proof - my CSS hack will not look good at responsive size. So you'd need to undo my margin setting at smaller size. To make this completely kosher, I'd probably use a primary and secondary menu one on top of the other, and center them. See what I mean? Lots of fun work! I never center menus for myself, only for clients. 🙂

Retro style and food! Two of my fave subjects! Nice.

Dave

---

Dave Chu · Custom WordPress Developer – likes collaborating with Designers

[Elaine Griffin]

Thanks for the input!

These nav bars make me feel like such a newbie!

I ended up fixing this - there was some rogue code that I neglected to remove that was causing the errors.

Thanks again!

[David Chu]

Very cool. And let me tell you - centering navigation is no newbie topic, so you're not alone!

Here is a web article about centering the Genesis menu. It's a nice method for centering 1-level navigation. I'm down there in the comments - I contributed some code to make his method work with dropdowns.

There are various ways to center navigation with CSS, but not all of them work with the stock Genesis CSS.

All that said, I often campaign against menu centering. 🙂

Dave

---

Dave Chu · Custom WordPress Developer – likes collaborating with Designers

[Author]

Posts