Using a custom logo with Modern Portfolio

[Connor3193]

Howdy all,

I'm hoping someone can help me out with a technical issue I'm experiencing with the Modern Portfolio theme...

I'm designing a website for a client and therefore require the use of a custom image logo. I've designed the logo that I want to use and have added it to the theme via Appearance > Header in the WordPress Dashboard. I've also disabled the Header Text and set the logo dimensions to exactly 1152 x 120 pixels so that it's displayed as-is.

Unfortunately, however, there seems to be a conflict with placing a Custom Menu in the Header Right widget area. When I add my custom logo the menu options no longer align in the center of the header area, but more towards the top. It's probably best taking a look to see what I mean: http://pbjltd.com

Can anyone help me?

I'd also be interested in increasing the height of the header to around 130-140 pixels if anyone can provide some advice or custom CSS to enable me to do that too.

Any help would be much appreciated, and I'd be happy to endorse anyone on Facebook/LinkedIn or send you a few bucks via PayPal if you manage to solve my problem.

Thanks in advance!

Connor 🙂

http://pbjltd.com

[Robin]

This reply has been marked as private.

[John]

Hey Connor,

This will go smoother if you follow this tutorial for the logo image: http://blackhillswebworks.com/2013/05/10/how-to-replace-the-studiopress-background-header-image-with-a-real-image-logo/

Then increase the header height and add some top margin to your menu widget area with this CSS, which you might need to tweak just a bit:

#header {min-height: 130px;}
.widget-area.header-widget-area {margin-top: 20px;}

John

---

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

[Connor3193]

Hey guys,

Thanks for your help Robin, but I don't think that's quite what I'm looking for as the menu still doesn't align properly. I do like the way the logo is mobile responsive though - so if John's solution doesn't solve the problem I'd be interested to learn a bit more about how you configured that. So thank you once again!

John - I'll try your tutorial today and let you know how I get on. Your solution goes into real depth - so thanks a lot for putting together such a detailed article!

Connor

[Connor3193]

Hi John,

I really can't work out how to apply your tutorial to the Modern Portfolio theme. I think the default logo that comes with the Modern Portfolio theme is set up slightly differently and is therefore difficult to edit - unless you know exactly what you're doing. I'm fairly new to Genesis and CSS so I'm not 100% sure what I need to be doing.

I gave it a try and tried tweaking the CSS but can't get it to work so I had to reverse the changes I made. If I provided you with login details to my site would you be kind enough to take a quick look? No worries if not - it's just that I really can't see myself being able to work this one out!

Thanks again,

Connor 🙂

[John]

Hi Connor,

Yeah, I can give that a shot. I'm curious if there's something different going on with Modern Portfolio that would skew the results of the tutorial.

You can send the info to me using my contact form, and if you have the FTP info also that would make it much easier.

John

---

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

[Connor3193]

Hi John,

Thanks for your help - my issue is resolved now.

Send me your LinkedIn details and I'll be happy to endorse you as a way of saying thanks! 😉

Connor

[brazeau]

Hi John.

I messed something up trying to follow the tutorial. My site is modernfirefighter.com, and I'm using the Outreach theme. Per the instructions I skipped step 1.

I did step 2. I added */ at the end of code in the "add support for custom header" code in functions.php.

I did step 3 by uploading my logo to my media library. I did have it titled logo.png.

I did step 4, but I think I did something wrong. I copied all the code you show in that section of the tutorial and pasted it at the end of code in the functions.php.

Then I updated the page. I did not get a chance to do the CSS edits or any of the other steps because my site would not load. I keep getting an error: "The website encountered an error while retrieving http://www.modernfirefighter.com/. It may be down for maintenance or configured incorrectly."

I tried to click back and change it back, but it would not update the page and now I can't get into my WP dashboard. I simply get the error page.

What did I do wrong, and more importantly, how do I fix it?

Thanks.

Brad

[John]

Hi Brad,

If you only added the */ at the end of the code, and didn't add the /* at the beginning of the code, then you're probably getting a PHP error. If that's the case then you won't be able to log in to your WordPress admin to do the fix in the Theme Editor. Instead you'll need to do it via FTP.

If you need help with that you can send the FTP login details to me using the contact form on my website.

John

---

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

[brazeau]

Hi John,

Thanks for the reply and offer of assistance. I got tied up and this is the first chance I've had to reply back. I was able to restore a backup from my host.

I will try the process again to load my logo and will make sure I add the */ at the beginning of the code too. Thank you for letting me know I missed that.

Brad

[John]

Good thing for backups! When you do try it, just make sure it's a /* at the beginning and not a */ ... the order does make a difference.

---

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

[Author]

Posts