Making full header image clickable

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

This topic is: not resolved

This topic contains 6 replies, has 4 voices, and was last updated by  stevewindsor 1 year, 4 months ago.

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #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.

    #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

    #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.

    #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

    #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.

    #17959

    arizonax3
    Participant
    Post count: 6

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

    #43886

    stevewindsor
    Participant
    Post count: 1

    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.

Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.