• Skip to main content
  • Skip to forum navigation

StudioPress

  • Shop for Themes
  • My StudioPress

Forum navigation

  • Home
  • General Genesis Discussions
  • StudioPress Themes
  • Genesis Blocks
    • Genesis Blocks
    • Genesis Custom Blocks
  • Retired Themes
  • FAQs
  • Forum Rules
  • Internationalization and Translations
  • Forum Bugs and Suggestions
  • Forum Log In

Are You Using The WordPress Block Editor?

Genesis now offers plugins that help you build better sites faster with the WordPress block editor (Gutenberg). Try the feature-rich free versions of each plugin for yourself!

Genesis Blocks Genesis Custom Blocks

Navigation centering and image question

Welcome!

These forums are for general discussion on WordPress and Genesis. Official support for StudioPress themes is offered exclusively at My StudioPress. Responses in this forum are not guaranteed. Please note that this forum will require a new username, separate from the one used for My.StudioPress.

Log In
Register Lost Password

Community Forums › Forums › Archived Forums › Design Tips and Tricks › Navigation centering and image question

This topic is: not resolved

Tagged: centering, images, navigation

  • This topic has 3 replies, 2 voices, and was last updated 9 years, 12 months ago by David Chu.
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • March 29, 2013 at 8:38 am #31920
    Elaine Griffin
    Member

    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! ๐Ÿ™‚

     

    March 29, 2013 at 8:48 am #31923
    David Chu
    Participant

    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

    March 29, 2013 at 9:05 am #31928
    Elaine Griffin
    Member

    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!

    March 29, 2013 at 9:12 am #31929
    David Chu
    Participant

    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
Viewing 4 posts - 1 through 4 (of 4 total)
  • The forum ‘Design Tips and Tricks’ is closed to new topics and replies.

CTA

Ready to get started? Create a site or shop for themes.

Create a site with WP EngineShop for Themes

Footer

StudioPress

© 2023 WPEngine, Inc.

Products
  • Create a Site with WP Engine
  • Shop for Themes
  • Theme Features
  • Get Started
  • Showcase
Company
  • Brand Assets
  • Terms of Service
  • Accptable Usse Policy
  • Privacy Policy
  • Refund Policy
  • Contact Us
Community
  • Find Developers
  • Forums
  • Facebook Group
  • #GenesisWP
  • Showcase
Resources
  • StudioPress Blog
  • Help & Documentation
  • FAQs
  • Code Snippets
  • Affiliates
Connect
  • StudioPress Live
  • StudioPress FM
  • Facebook
  • Twitter
  • Dribbble