Logo formating – Appetite

• 

  decoproducts · Member · Jan 6, 2016 at 8:44 pm

  • Copy link
  • Add topic to favorites

  Hi, I am using the Appetite theme. With this theme as you scroll down the page the top menu changes to having a white background while it starts with the banner picture as its background. Being as I want my logo to change to black (when white background) I used this coding:

  .header-loaded.scroll-header .site-branding.pull-left::after {
  content: url(‘https://decoproducks.files.wordpress.com/2015/12/deco-symbol-black.png’);
  position: absolute;
  top: 10px;
  left: 30px;
  z-index: -1;
  }

  While I can see that this is working, the ‘new’ logo is still behind the old one and therefore is not showing up. Is there a way to bring the new logo to the front?
  Thanks!

  The blog I need help with is: (visible only to logged in users)

• 

  thesacredpath · Member · Jan 8, 2016 at 1:50 am

  • Copy link

  Wow, this is a challenge, and not one that I’m seeing an immediate solution for. Give me some time to see what I can come up with on this for you. Given the way the CSS and HTML are done in Appetite this may not be possible.

• 

  decoproducts · Member · Jan 8, 2016 at 12:57 pm

  • Copy link

  It appears that they did it on this website if it helps at all.
  http://thebicycleescape.com/

• 

  thesacredpath · Member · Jan 8, 2016 at 8:31 pm

  • Copy link

  Oh, @decoproducts, thanks for that link, it does help. Here is their CSS. Remove your existing rule and add this and see what you think.

  .header-loaded.scroll-header .site-branding.pull-left::after {
      content: url("https://decoproducks.files.wordpress.com/2015/12/deco-symbol-black.png");
      left: 30px;
      position: absolute;
      top: 10px;
      z-index: -1;
  }
  #masthead.scroll-header .site-logo-link img {
      opacity: 0;
  }