Header buttons and logo


#1

whiskerslex.com

Hello! 2 quick questions…

  1. I am needing my header buttons (Explore & Contact) to not be blue or have that dotted outline around it after it has been clicked (or visited). It becomes kinda hidden because of my header image and doesn’t go with the color-scheme of my site.

  2. I have created a second logo to show up at scroll (the black one), which is working, but in order to make it large enough in Chrome, I had to adjust the CSS. Now it shows up too big in every other browser - then a few days after that it was all the sudden too big in Chrome as well. Could you tell me the CSS of the original logo so that I can make the two of them match as far as size goes? I want it to look like the same image, just changing from white to black or vice versa.

Any help would be super appreciated!

Thanks!


#2

Dear Amber,

Thank you for getting in touch here.

> 1

Try to apply the following CSS code through the Simple Custom CSS plugin or child theme’s style.css file.

.header-button:visited,
.header-button:focus{
  color: #fff;
  text-decoration: none;
  outline: none;
}

.header-button:hover{
  color: #000 !important;
}  

> 2

I noticed those image logos have different size.

The black logo is 853px x 215px, but the white one is a bit larger 853px x 315px. I thought they should be equal.

Regards,
Kharis


#3

Thank you for a speedy reply, Kharis!

#2 is solved, I thought they were the same size - my apologies!

For the header buttons, I added your suggestions and it unfortunately didn’t work.

So then I tried the CSS below and it also didn’t work.

.header-button:visited,
.header-button:focus{
  color: #fff !important;
  text-decoration: none !important;
  outline: none !important ;
}

.header-button:hover{
  color: #000 !important ;
}

I’m using the plugin WP Add Custom CSS, which has worked for all other custom CSS I’ve applied. Any suggestions?


#4

PS - the reason I’m using WP Add Custom CSS is because this site is a GoDaddy hosted WP, and Simple Custom CSS is apparently not compatible, as it wouldn’t change anything on the site.


#5

EDIT - OK, guess it was a delayed response because now it is shrinking the image in Chrome and it disappears completely in IE and FF.

Original post:
Maybe I spoke too soon about the logo. It works perfectly in Chrome, but not FF or IE. They are still resizing it larger. Do you think maybe it’s a delayed response for FF and IE since I’m editing in Chrome?

Below is my CSS for the scrolled image (got it from another topic you resolved on this forum) and I just double checked to make sure my image sizes are in fact the same size and they are both 853 x 215.

.header-scrolled .site-branding a{
  display: block;
  background-image: url('http://whiskerslex.com/wp-content/uploads/2016/02/Whiskers-Logo-Black-PNG.png');
  background-size: 240px;
  background-repeat: no-repeat;
}

.header-scrolled .site-branding img{
  opacity: 0;
}

#6

Update - fixed the logo with the following. It is now working in Chrome IE and FF.

.header-scrolled .site-logo a{
  background-image: url('http://whiskerslex.com/wp-content/uploads/2016/02/Whiskers-Logo-Black-PNG-1.png');0
  background-size: 346px;
  max-width: 100%;
  max-height: 100%;
  padding-top: 13px;
}