Making full header image clickable

Community Forums › Forums › Design Tips and Tricks › Making full header image clickable

This topic is: not resolved

Tagged: 

This topic contains 5 replies, has 3 voices, and was last updated by  arizonax3 3 months, 2 weeks ago.

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • December 2, 2012 at 2:21 pm #2903

    Jeni
    Participant

    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.

    December 2, 2012 at 5:36 pm #2920

    SoZo
    Moderator
    Post count: 1573

    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

    December 3, 2012 at 9:52 am #3002

    Jeni
    Participant

    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.

    December 3, 2012 at 2:16 pm #3110

    SoZo
    Moderator
    Post count: 1573

    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

    December 3, 2012 at 2:46 pm #3121

    Jeni
    Participant

    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.

    February 4, 2013 at 1:51 pm #17959

    arizonax3
    Participant
    Post count: 3

    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!!

  • Author
    Posts
Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.