Community Forums › Forums › Archived Forums › Design Tips and Tricks › Making full header image clickable
Tagged: Executive theme
- This topic has 6 replies, 4 voices, and was last updated 10 years ago by
stevewindsor.
-
AuthorPosts
-
December 2, 2012 at 2:21 pm #2903
Jeni
MemberHi 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 #2920SoZo
MemberYou 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 #3002Jeni
MemberThe 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 #3110SoZo
MemberThen 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 #3121Jeni
MemberThank 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 #17959arizonax3
ParticipantSorry 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!!
June 3, 2013 at 12:31 pm #43886stevewindsor
MemberArizona,
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.
-
AuthorPosts
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.