[John]

Nicole,

In your style.css look for this code, at approximately line 487:

.site-inner {
clear: both;
padding-top: 80px;
}

and change that padding-top to 20px, or whatever looks good to you.

John

---

John Sundberg | blackhillswebworks.com
A WordPress developer’s toolbox: Firebug | WordPress Codex | Google 😉

[John]

Breaking sites is a great way to learn what works and what doesn't. Nice thing about breaking a website is that it's easy to put back together again! But like Jan said, this is a classic problem with Genesis/StudioPress, and the way to fix it has been written. For example, How to replace the StudioPress background header image with a real image logo.

---

John Sundberg | blackhillswebworks.com
A WordPress developer’s toolbox: Firebug | WordPress Codex | Google 😉

[John]

StudioPress themes, except for Genesis, are rarely updated, and if they are, you can apply the changes manually and avoid overwriting your modifications. And I'm pretty sure that StudioPress doesn't see what you've described as a problem, so I doubt that they're going to be fixing anything related to the logo anytime soon.

---

John Sundberg | blackhillswebworks.com
A WordPress developer’s toolbox: Firebug | WordPress Codex | Google 😉

[John]

Hi Ray,

I just replied to your email, but for the record here in the forums, your best bet is following this tutorial: How to replace the StudioPress background header image with a real image logo

John

---

John Sundberg | blackhillswebworks.com
A WordPress developer’s toolbox: Firebug | WordPress Codex | Google 😉

[John]

You're welcome!

---

John Sundberg | blackhillswebworks.com
A WordPress developer’s toolbox: Firebug | WordPress Codex | Google 😉

[John]

It works. 🙂

---

John Sundberg | blackhillswebworks.com
A WordPress developer’s toolbox: Firebug | WordPress Codex | Google 😉

[John]

JohnsonMktg,

A link to your site would help.

John

---

John Sundberg | blackhillswebworks.com
A WordPress developer’s toolbox: Firebug | WordPress Codex | Google 😉

[John]

You're welcome!

As a last tweak, it looks like I forgot to comment out line 1887,

.site-header {
		padding: 24px;
		padding: 2.4rem;
	}

which will remove the extra padding around the header image on smaller screens/devices.

---

John Sundberg | blackhillswebworks.com
A WordPress developer’s toolbox: Firebug | WordPress Codex | Google 😉

[John]

Elaine, try this modified stylesheet: https://db.tt/RRTYjgTp

I commented out what didn't need to be there related to the header and logo image, added one or two things, but didn't delete anything so you can see what I did.

---

John Sundberg | blackhillswebworks.com
A WordPress developer’s toolbox: Firebug | WordPress Codex | Google 😉

[John]

You're welcome! Ready when you are...

John

---

John Sundberg | blackhillswebworks.com
A WordPress developer’s toolbox: Firebug | WordPress Codex | Google 😉

[John]

Elaine,

I noticed that you had switched the logo/header back. If you want to switch back to the mobile version I'll (try to) take a look at it today still.

John

---

John Sundberg | blackhillswebworks.com
A WordPress developer’s toolbox: Firebug | WordPress Codex | Google 😉

[John]

Brenda,

Adding this to your #header will move it back to center:

margin: 0 auto;
max-width: 940px;

And Harley is right, and I'm somewhat biased here, following that tutorial is a better way to handle an image logo.

John

---

John Sundberg | blackhillswebworks.com
A WordPress developer’s toolbox: Firebug | WordPress Codex | Google 😉

[John]

You're welcome, guys!

---

John Sundberg | blackhillswebworks.com
A WordPress developer’s toolbox: Firebug | WordPress Codex | Google 😉

[John]

YippyMomma,

Without a URL to your site there's no way for us to know what's wrong.

---

John Sundberg | blackhillswebworks.com
A WordPress developer’s toolbox: Firebug | WordPress Codex | Google 😉

[John]

You're welcome!

---

John Sundberg | blackhillswebworks.com
A WordPress developer’s toolbox: Firebug | WordPress Codex | Google 😉

[John]

🙂

---

John Sundberg | blackhillswebworks.com
A WordPress developer’s toolbox: Firebug | WordPress Codex | Google 😉

[John]

Hey Brian, thanks for the mention!

littleleafash,

Your logo image is there, it's just hidden by the StudioPress CSS. If you remove or comment out line 888,

.header-image .site-description, .header-image .site-title a

and line 894,

.header-full-width.header-image .site-title a

you'll see your logo and then you can finish dialing it in with CSS. For example, removing any min-height declarations in the header area elements is a good idea.

You'll probably also want to remove your site description, which I explain how to do in that tutorial that Brian mentioned.

John

---

John Sundberg | blackhillswebworks.com
A WordPress developer’s toolbox: Firebug | WordPress Codex | Google 😉

[John]

wadams92101,

Possibly, but we'd need more information to help you with this, starting with the URL of the website you're working on.

---

John Sundberg | blackhillswebworks.com
A WordPress developer’s toolbox: Firebug | WordPress Codex | Google 😉

[John]

In PHP you can comment out a line by adding // to the beginning of that line. Or you can comment out a block of PHP code by wrapping it in /* and */, much like CSS comments.

When you comment something in the code, your server ignores whatever is in the commented area.

---

John Sundberg | blackhillswebworks.com
A WordPress developer’s toolbox: Firebug | WordPress Codex | Google 😉

[John]

If I were doing this, I would probably handle step 2 differently.

Instead, in home.php I would copy the two sections of code for the home-featured-left and -right widget areas, paste that code below those sections (and above the 'loop' actions, and then modify the code to reflect the 'home-featured' widget area you're wanting to achieve.

Then I would comment out the line that says

add_action( 'genesis_loop', 'child_grid_loop_helper' );

or just remove it and the child_grid_loop_helper function.

Finally, finish with whatever CSS edits are necessary to complete.

---

John Sundberg | blackhillswebworks.com
A WordPress developer’s toolbox: Firebug | WordPress Codex | Google 😉

[Author]

Posts