Centering Logo With Navigation On Either Side

Community Forums Forums Design Tips and Tricks Centering Logo With Navigation On Either Side

This topic is: not resolved

This topic contains 5 replies, has 4 voices, and was last updated by  harperandhenry 9 months ago.

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

    ISeemToBeAVerb
    Participant
    Post count: 11

    Anyone have some tips on how to do this in Genesis?

    I’ve gotten to a point where I can center the main navigation, but I’m at a loss for how to center a logo between the list items.

    I’m using Genesis v.2.0-RC1 & the v.2.0-beta2 Child Theme as a starting point.

    Any assistance would be greatly appreciated.

    Thanks,
    - Michael

    #51111

    Susan Nelson
    Participant
    Post count: 207

    I’m working on something like this now and the way I’ve made it work is to add a Home link to the menu, place it in the middle of the list of links, and then give it a background (the logo). Does that make sense?


    Susan Nelson | Oh, Hello Designs | Twitter | Facebook

    #51131

    Doak Heggeness
    Participant
    Post count: 140

    You should be able to use the ‘Links’ metabox under the ‘Menu’ tab. Add a ‘CSS class’ and add a background: url(...);


    Doak Heggeness, WordPress Development | Website

    #51142

    Susan Nelson
    Participant
    Post count: 207

    Oh yes, I forgot to mention that! That’s what I did. I added a CSS class to the home link so I could add the background and adjust the positioning easily.


    Susan Nelson | Oh, Hello Designs | Twitter | Facebook

    #51167

    ISeemToBeAVerb
    Participant
    Post count: 11

    Brilliant! I’ll give that a try. I don’t know why using the menu never occurred to me.

    #76805

    harperandhenry
    Member
    Post count: 4

    I am super new to WordPress and coding in general, so I am going to add some instructions that were helpful for me, just in case others are as new to this as I am. Hopefully it saves someone a half hour of googling.

    To enable custom CSS you have to go to Dashboard >> Appearance >> Menu and click on Screen Options which is located in top right corner of the page. In the expanded menu check the box besides CSS Classes. Now if you expand the individual link in your navigation menu, you can find an additional field called “CSS Classes (optional)“. Enter your custom CSS class name in the provided field. Once that is done you can add your custom CSS class to style.css.

    Also, I have a question. Now that I’ve added the custom menu class and the url to show the logo, my menu text is still visible over the logo. I tried hiding the visibility and changing the display to none, and both options hid the menu text AND my logo image. The solution I found was to change the text indent to -9999, however now I can’t figure out how to make my logo “clickable” so it links back to the homepage. I am sure this is much simpler than I am making it, so I apologize in advance.

    If it is helpful to see the site in progress: http://www.harperandhenry.com/

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

You must be logged in to reply to this topic.