Problem with Slogan Button Color & Click Area

[greenpeaklabs]

Hello,

When changing the color of the Slogan button, there remains a lighter horizontal line at the bottom of the button. However this only happens on the pages other than the Home page. Also, the clickable area for the button is small and positioned at the bottom of the button. Please advise on solving this problem, thank you!

Here’s the page:
http://greenpeaklabs.com/avr1/services/

Topic

[Jason Bobich]

Hello,

The issue is because of the combination of trying to put header tags (i.e. h1, h2, h3, etc) into the slogan text. This is designed to be just a block of text.

You could always hide the header gradients in the slogan element on header tags something like this:

.element-slogan .header-shade { display: none; }

http://support.themeblvd.com/forums/topic/css-customizations-how-to-remove-the-gradient-on-header-tags/

=========

For CSS changes, it’s a good idea to use a tool like firebug or Google Chrome’s built-in developer tools to locate them and then put the edits either in your child theme or in the “Custom CSS” option on your theme options page.

Also, here’s a helpful tutorial on how to use Firebug – http://vimeo.com/20917974. The only thing I’d suggest not doing is actually making edits to the theme’s CSS files, as it shows at the end of that video. However, the video serves as a good introduction to Firebug and how it can be used to find what CSS is effecting certain areas of your site without ever digging around in any files.

[greenpeaklabs]

Thank you for that Jason! Unfortunately, it did not solve the problem of the entire button not being clickable. Only the lower part of the button was clickable still after I removed the gradient. So I just removed the header tags, removed the CSS you gave me and separated my text into a Headline and a Slogan.

But now the Slogan button sits really low. Do you have any CSS to center the button vertically with both the Headline and the Slogan? Or at least with the Slogan text?

Thank you!

[Jason Bobich]

Can you please put it back the way you had it and let me see what it looks like with my CSS fix in there?

[greenpeaklabs]

I have updated and added your CSS change and it didn’t help. Actually, I like the header shade to be there …

Any other thoughts as to what may be causing the clickable area to get so small when I include an H1 tag?

[Jason Bobich]

I have updated and added your CSS change and it didn’t help.

It’s just missing a piece.

.element-slogan .header-shade { display: none; }
.element-slogan h1 { position: static; }

Here’s another approach, as well, without hiding the header-shade.

.element-slogan .tb-button { position: relative; z-index: 2; }

[greenpeaklabs]

second one worked well for me. thanks!

[Author]

Replies