Responsive logo image in header

[di]

I'm using a child theme of Genesis and adjusted the header size for my logo. For the life of me, I cannot create a responsive header. In fact, after recent updates, I cannot even get the logo image to appear in my iPhone.

I've tried a variety of tricks posted online but haven't found success. Any suggestions?

Here's my site

http://www.adunate.com/blog/

[Tim Squires]

Is your header image is set up to be full width of the screen at desktop size?

If you create a range of header images at different sizes to fit smaller screens, you might have more luck.

This article explains the process, I hope it works for you!

http://thepixelista.com/responsive-genesis-child-theme-logo/

---

timsquires.com.au

[di]

Thanks for answering, Tim. My image is 544x120, therefore does not take the full width of the screen.

You'll note that I have a tagline in the header in addition to the logo. Originally my header image included both the logo and the tagline and together they equalled the full width. However, when I tried to make this responsive, the tagline was too small to be legible and the logo was also too small. I changed my plan separating the logo image from the tagline. The tagline is now a widget image and loaded in a sidebar widget along with the social media icons.

Since doing this, I can't get the logo image to appear at all in my iPhone, responsive or not.

I've tried a variety of solutions listed online. No luck thus far. I'll check out your link.

[di]

So I tried http://thepixelista.com/responsive-genesis-child-theme-logo/. I was truly hoping this would work because her detailed explanations and step-by-step are excellent. Sadly, though, it did not.

Pixelista instructs making code changes to .header-image .site-title a. However, this completely eliminated my logo image, even in full size mode. I instead applied the suggested code changes to
.header-image #title,
.header-image #title a,
.header-image #title-area

This works for full size.

I am still unable to get an image to appear at all on my iPhone 5, v.8.1.2

Anyone?

[Tim Squires]

I'm so sorry that didn't work for you.

Could you try an experiment? Are you able to temporarily remove the widget area that contains the tagline and the social media icons and see if that at least preserves your logo at the smaller sizes.

I know that's not a solution, but it might help me to work out what's happening.

Also, sorry for the delayed reply - my email notifications for these forums are not working at the moment, so I have to go in and check manually for any replies to posts that I help with - it's pretty frustrating 🙁 , but I'll make a point of checking this thread to see how you are getting on.

---

timsquires.com.au

[Tim Squires]

Also, can you let me know which Genesis child theme you are using?

---

timsquires.com.au

[Ren Ventura]

You're outputting header CSS on the blog page that includes:

#title, #title a {
	background: none !important;
}

How is this CSS getting there (i.e. plugin or custom template/function)? You need to remove that because it's causing the background image to not display.

---

Web & Software Developer & Blogger | RenVentura.com | Follow Me on Twitter @CLE_Ren

[di]

Ren, this code must be in a plugin because it's not showing up in my style.css. How do I search for this elsewhere?

Tim, mine is a child theme I created. It's a separate theme under my business name with a style.css and function.php file. In these I done a few simple tweaks of the Genesis style.css in order to suit my style. Obviously I over-tweaked something, but can't figure out what.

[di]

Tim, I removed the social media menu and tagline image from the widget area. No luck there. I then blocked out the widget container out of the css, and still no luck.

[Ren Ventura]

I couldn't tell you exactly because it depends on the plugins you're using. Look for something that lets you add CSS. If you can't find it, you can have a developer take a look or you can try overriding it by adding !important to the end of the background property on line 528 of style.css (although, this is not the best option).

---

Web & Software Developer & Blogger | RenVentura.com | Follow Me on Twitter @CLE_Ren

[Tim Squires]

Do you have a local development server set up?

http://premium.wpmudev.org/blog/testing-environment-wordpress/

If so, you might be able to set up a new WordPress/Genesis installation and replicate the modifications that you carried out step by step, paying attention along the way to any changes in the behavior of the logo/header area.

That way you may be able to isolate the specific problem.

---

timsquires.com.au

[Genesis Developer]

@di : Modify the Style.css file

line no 708

header .grey-band {
    background-color: #d5d4cd;
    padding-bottom: 28px;
    padding-top: 2px;
}

line no 769

.menubar {
    background-color: #fff;
    border-bottom: 2px solid #f26522;
    padding-bottom: 10px;
    padding-top: 10px;
}

---

Download Genesis Featured Posts Combo Widget | Simple Grid Layouts Plugin for Posts, CPTs and terms
You can request new tips/help.

[Author]

Posts