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)
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.
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' );
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.
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
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 :)