Site Logo Not Displaying

Hi @pawsacrosspittsburgh

That link loaded a Coming Soon page for me – let me know when the site is live and I’m happy to take a peek ??

You mentioned adding some CSS – if you remove that temporarily, does the logo appear?

Also, just to be positive, you have Jetpack installed and activated, correct? ??

Hi!

After removing the CSS, the logo does not appear. I’ve pasted the CSS I’m using below. And I do have Jetpack installed and activated.

/*Prevent menu wrapping*/
.main-navigation {
width: 100%;
}
.site-branding {
display: none;
}

/*Make page entire width of screen*/
@media screen and (min-width: 1230px) {
.site {
width: 100%;
}}

#masthead, .content-wrapper, .grid-area, footer {
width: 100%;
display: block;
margin-left: auto;
margin-right: auto;
}

/*remove padding between header and body*/
.content-area{
padding-top: 10px;
}

Thanks for pasting the CSS.

.site-branding {
display: none;
}

from your code will indeed hide the logo.

If you remove that, and click Save and Publish, the logo should appear. If it doesn’t, try going into the Customizer and resetting your logo (remove the logo, put it back, then save and publish).

Thank you, that worked.

I’m now battling the menu height as it is now way too tall with the logo.

https://www.pawsacrosspittsburgh.com/

Two things for that, one will be the margins on the logo, which you can try this to fix:

.site-logo {
    margin: 0;
}

The second is the image itself. Your logo has some empty space above and below it it, which makes that area taller.

Try cropping your image so there isn’t any dead vertical space ??

Thanks! I didn’t realize that version of the image had all that space. Any suggestions on how to further shrink the size of the menu so that the logo and menu items are aligned? Nothing I try seems to work (noob).

I promise I’m taking notes!!

Hey @pawsacrosspitts!

Wasn’t at my computer for a bit, but I’ve just taken another look at your navigation

This CSS from your previous post is causing the issue:

.main-navigation {
width: 100%;
}

If the navigation is set to 100% width, it takes up the full horizontal space, meaning it can’t align beside anything else like the logo.

Try removing that, and you should be good to go. The theme does limit the width of the menu a bit, but you can increase the width without going to 100% if needed.

Try these, if the theme’s defaults are too narrow:

@media screen and (min-width: 1020px) {
    .main-navigation {
        width: 665px;
    }
}

@media screen and (min-width: 1230px) {
    .main-navigation {
        width: 800px;
    }
}

• This reply was modified 8 years, 2 months ago by Chad Chadbourne.

Made a couple other tweaks and it looks perfect! Marking as resolved! Thanks!

Yay!