Ask your WordPress questions! Pay money and get answers fast! (more info)

Make the full logo area clickable WordPress

  • SOLVED

Hi there!

Launching this site later today: sunshinelavenderfarm.com

The clickable logo area is weird - you can only click on the very top of the logo, near the sun. I'd like the whole logo to be clickable.

I assume this is a CSS issue? Thanks in advance!
Linda

Answers (5)

2015-05-27

Francisco Javier Carazo Gil answers:

There is a coming soon screen, can you show us the site?


Linda M comments:

Sure can! Sorry 'bout that... All good now :)


Francisco Javier Carazo Gil comments:

You have to change z-index of two elements:

.nav-primary {
margin-top: 60px;
margin-bottom: 45px;
z-index: 1; /* change this one */
position: relative;
}

.site-header > .wrap {
padding: 0;
position: relative;
top: 0;
width: 250px;
z-index: 999; /* add this */
}


Francisco Javier Carazo Gil comments:

You have both rules in style.css.


Francisco Javier Carazo Gil comments:

You have it in http://sunshinelavenderfarm.com/wp-content/themes/minimum-pro/style.css?ver=3.0.1

If you need lines, tell me and I tell you.


Linda M comments:

Okay - that makes the logo fully clickable, but it also disables the navigation - check it out!


Francisco Javier Carazo Gil comments:

Ok, delete the z-index in .site-header > .wrap to:

.site-header > .wrap > .title-area{
z-index:999;
}


Linda M comments:

Links in nav still not clickable.

2015-05-27

Arnav Joy answers:

coming soon mode is enabled , please provide me access to check the site.


Linda M comments:

Should be good now.


Arnav Joy comments:

can you share header.php file?


Linda M comments:

Hmm.. can I just paste that here? Why might you need it?


Arnav Joy comments:

yes paste it here


Linda M comments:

<?php
/**
* Genesis Framework.
*
* WARNING: This file is part of the core Genesis Framework. DO NOT edit this file under any circumstances.
* Please do all modifications in the form of a child theme.
*
* @package Genesis\Templates
* @author StudioPress
* @license GPL-2.0+
* @link http://my.studiopress.com/themes/genesis/
*/

do_action( 'genesis_doctype' );
do_action( 'genesis_title' );
do_action( 'genesis_meta' );

wp_head(); //* we need this for plugins
?>
</head>
<?php
genesis_markup( array(
'html5' => '<body %s>',
'xhtml' => sprintf( '<body class="%s">', implode( ' ', get_body_class() ) ),
'context' => 'body',
) );
do_action( 'genesis_before' );

genesis_markup( array(
'html5' => '<div %s>',
'xhtml' => '<div id="wrap">',
'context' => 'site-container',
) );

do_action( 'genesis_before_header' );
do_action( 'genesis_header' );
do_action( 'genesis_after_header' );

genesis_markup( array(
'html5' => '<div %s>',
'xhtml' => '<div id="inner">',
'context' => 'site-inner',
) );
genesis_structural_wrap( 'site-inner' );

2015-05-27

Dbranes answers:

Try to change the z-index:

.nav-primary {
z-index: 1;
}

.title-area {
z-index: 0;
}


Linda M comments:

This also makes the nav bar unclickable.


Dbranes comments:

ahh, didn't notice ;-)

Then you have to change the .site-header from being 100% to a fixed width,

just like @Jayaram and @Reigel are suggesting.

2015-05-27

Jayaram Y answers:

Hi Linda,

There is some issue witht he site-header css.

Please replace the css below or past it in your customcss

.site-header {
border-bottom: none;
left: 0;
letter-spacing: 1px;
top: 32px;
position: absolute;
width: 250px;
z-index: 100;
bottom: 25px;
left: 50%;
transform: translate(-50%, 0%);
-webkit-transform: translate(-50%, 0%);
-moz-transform: translate(-50%, 0%);
-ms-transform: translate(-50%, 0%);
right: 0;
}


This will solve your issue.


Linda M comments:

Hi there! Wish that worked, but no - the logo is still only clickable on the top area.


Jayaram Y comments:

Linda,

You need to remove the previous edits you made.. Make sure the css the old one when you posted this post.. and make the given changes


Jayaram Y comments:

I dont see my code in the website.. Please check and update again

2015-05-27

Reigel Gallarde answers:

with your current css, add this...


.site-header {
width: 225px;
left: 0;
right: 0;
margin: auto;
z-index: 201;
}


Reigel Gallarde comments:

this is the simplest solution...


Reigel Gallarde comments:

I see you made changes, revert to the old one and use this css...


Reigel Gallarde comments:

I see, even with the changes made, if you apply this css, the sun will be clickable..


Linda M comments:

Hi Reigel!

This works!

Thank you.


Reigel Gallarde comments:

You're welcome... :)

call me when it's css and javascript problem :)