Clickable Logo Centered in Nav

Community Forums Forums General Discussion Clickable Logo Centered in Nav

This topic is: not resolved

This topic contains 2 replies, has 2 voices, and was last updated by  harperandhenry 10 months, 3 weeks ago.

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #77286

    harperandhenry
    Member
    Post count: 4

    I am migrating my website over to WordPress as a custom child theme on Genesis. On my old (non-wordpress) site I created the nav bar as an unordered list and was easily able to just use an image file with a hyperlink so that it clicked back to the home page.

    It seems like with Genesis you have to do a custom header which either floats above or below the nav OR add it in as a menu item with custom CSS that allows you to add a background url, which I did. Except that now the menu item’s text floats over my image file.

    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 that causes the text to be off the screen (duh) so the logo is no longer “clickable”. I tried setting the text to transparent in the custom class CSS and even setting that to be !important and the global CSS for the nav bar (other menu items) still overrides my custom class, so that’s obviously (maybe?) still not the answer.

    I am going on too many hours of googling and experimenting with no success. If anyone can give me some insight as to what bigger picture I am missing, that would be so helpful.

    The site in development is here: http://www.harperandhenry.com if that is useful.

    http://www.harperandhenry.com
    #77290

    nutsandbolts
    Moderator
    Post count: 3172

    Generally, the easiest way to accomplish the same look minus the word “home” would be to remove it from the menu, then set your logo as the background for .site-title a and use CSS to center it and float it where you want it to go. Hopefully that makes sense. You may need to make some adjustments to the site title width and height and possibly the header height.

    You can disable the custom header function by commenting it out in functions.php, then hide the text title/description by choosing “image logo” instead of dynamic text in the Genesis theme settings.


    Andrea Whitmer, Owner, Nuts and Bolts Media
    I provide dev and training services for web designers • Find me on Twitter and Google+

    #77308

    harperandhenry
    Member
    Post count: 4

    Thanks, Andrea. I followed your instructions. Using .site-title/.site-title a did nothing. I went in and inspected the element in Chrome to see what I was missing and it showed .title-area was controlling the logo.

    Putting in the logo in .title-area doesn’t make it clickable and arranging the CSS doesn’t allow the logo to nest inside the menu bar it just forces the whole page to move down (assuming I tinkered with the top margin).

    As for the custom header function, I don’t have one in my functions file. I didn’t write one in, so no need to remove it. I did choose image logo in the theme settings.

    This is the second site I’m working on in WordPress AND Genesis, so I apologize if some of this is beyond basic.

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

You must be logged in to reply to this topic.