Making full header image clickable

[Jeni]

Hi all,

I am setting up a website for a friend using Executive theme.  The header image for some reason is only half clickable, and when I try to make the whole logo clickable then the header menu drops down the page.  Can you help me please?

Thank you!

---

Loves shoes. Hates peas. Born down south. Lives up north.
Powered by tea and bad temper.

[SoZo]

You can't make the whole header image clickable and have a widget in the Header Right sidebar

---

John “Nicolas Flamel” Wright | SoZo’s design| John Wright Photography

[Jeni]

The header image is only 500px wide - some of it is clickable (about a quarter), I just want to extend the clickable bit!

---

Loves shoes. Hates peas. Born down south. Lives up north.
Powered by tea and bad temper.

[SoZo]

Then you need to edit the width of that element, #title-area a as well as #header .widget-area. I recommend installing the Firebug add on for Firefox or using Chrome's Firebug Lite which will enable you to right click on any element to inspect it and determine the associated style rules or the selectors required to create new style rules.

---

John “Nicolas Flamel” Wright | SoZo’s design| John Wright Photography

[Jeni]

Thank you - I added Firebug and managed to fix the issue - thanks so much for your help!

---

Loves shoes. Hates peas. Born down south. Lives up north.
Powered by tea and bad temper.

[arizonax3]

Sorry for bringing this thread live again!

I am having the exact same issue as Jeni and was able to resolve it by following SoZo's advice. When I edit the width of the #title-area a element, it pushes the nav/header down as expected. However, when I attempt to nudge the #header .widget-area up using a negative margin it works great on a browser but the mobile/iPad version ends up displaying the navigation bar over the logo.

Maybe there is another way to accomplish this that I haven't thought about?

I REALLY want the logo clickable, but I really don't want to serve up or maintain separate stylesheets. I wouldn't even know where to start with that nor is it an area that I even want to explore in WP. Just brings me back to IE nightmares!

Can anyone help? Thanks in advance!!

[stevewindsor]

Arizona,

I hammered on this for hours. You actually need to make the  #title-area a as well as #header .widget-area. width: 50%. (they need to add up to one hundred) No need to negative margin the items. I did this fix and my widgetized header area with the nav menu inside it went right back up where I wanted it - to the right of my logo ... inline.

 

As for clickable logo. I am still hammering on that as I created a custom landing page with the logo aligned center and then the title (where the hyperlink actually is located) is still left floated. arg.

[Author]

Posts