- This topic has 6 replies, 2 voices, and was last updated 5 years, 4 months ago by
.
-
Posts
-
Here is the site I am working on. http://www.twostoriesmedia.com/site/
When the homepage first pulls up, there is a black navigation bar with logo that has red in it. But they have requested a red navigation bar upon scroll and the red from their logo doesn't show on top of the red. I would like to add a different logo for the red scroll navigation bar. How can I do that as simply as possible?
DAWN
http://www.twostoriesmedia.com/site/Hi Dawn,
The way we usually handle this is to add some additional CSS to the stylesheet to use a different logo when the user has scrolled down.
The Altitude Pro theme has a class (.dark) applied to the .site-header element when scrolled that makes this possible.
This is the CSS that you would need to add:
.site-header.dark .site-title a {
background-image: url(URL TO THE LOGO YOU WANT TO USE);
}Hope that helps!
Liz
Liz or Eddy @SangFroid Web — Customizing StudioPress themes at http://www.wpstudioworks.com and building custom Genesis Child themes for businesses at http://www.sangfroidwebdesign.com 🙂
Thankyou Liz! I went ahead and added this code under the Customize / Additional CSS area but I am still not seeing the updated logo on the red menu bar when scrolled.
.site-header.dark .site-title a { background-image: url(http://www.twostoriesmedia.com/site/wp-content/uploads/2017/10/Two_Stories_Media_Logo_HorizontalF_white_smallest3.png); }Do I need to adjust any other code? Thanks ahead of time!
Hi!
Yes, it looks like you need to add an !important b/c the original CSS specification has an !important...sorry, missed that the first time. So just edit the CSS you just added to include an !important so that it overrides the other like this:.site-header.dark .site-title a {
background-image: url(http://www.twostoriesmedia.com/site/wp-content/uploads/2017/10/Two_Stories_Media_Logo_HorizontalF_white_smallest3.png) !important;
}That should do it, but let me know!
Liz
Liz or Eddy @SangFroid Web — Customizing StudioPress themes at http://www.wpstudioworks.com and building custom Genesis Child themes for businesses at http://www.sangfroidwebdesign.com 🙂
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.