I like the option to make the logo smaller when scrolling, but is there a way to change the image used instead of just making the main logo image smaller? Example: When first loading the page, the logo is a circle. Once you start to scroll the image becomes a square.
I understand there isn’t an easy way to do this within the options on the WordPress control panel. But I’d be fine with trying to code it if you could give me a hint as to where I would add that in.
You’re right, at the moment there is no option on backend to change image for top navigation when it’s smaller. But, you can override image with CSS, please try this CSS:
Thanks so much for responding and so sorry for my delayed reply- I’ve been playing with this.
I’ve tried your code suggestion a bunch of ways, in the CSS of my child theme and by putting it into additional styles (even tried putting it directly into main.css), but for some reason it’s not working. In fact (semi-related), I’ve tried putting a lot of custom CSS in my style.css for my child theme, but none of it seemed to change anything. I had to go into main.css to see any changes. but I used the template style.css from the given child theme to start my own style.css, so I’m not sure why none of my code is working (at first I thought I was poorly selecting attributes, but I added extra classes with visual composer). Also, I tried my code in Addtional styles too, but it didn’t seem to change anything.
If you have any suggestions on what I could be doing wrong for changing the image when navigation goes small or on my style.css in general, or how to better use the Additional Styling, I’d super appreciate it!
Thanks again for your help! I really like the theme!
Jenn
Ah, I think it is because those CSS is missing, It because the crayon plugin translate URL into anchor link. Please use this: http://pastebin.com/fQ8HkjdP
