That requires a little bit of CSS to achieve that. Please follow these steps:
1. Upload your sticky nav logo image in the Media tab and copy the image URL (Please make sure the sticky logo nav has about the proportions of the default logo) 2. Navigate to Appearance > Customize > Theme Options > Custom 3. Add the following CSS in to the CSS textarea:
Landscaper Theme
My site is sitting on WAMP at the moment so I can't give you a related URL
I've used this CSS to hide the logo on scroll when using sticky menu option
.is-sticky-nav .navbar-brand img {
display: none !important;
}
and that appears to be working but now I'd like to have a small logo appear in its place upon scroll.
Please can you give me the CSS to do that!
Cheers, jeni
Hi there,
That requires a little bit of CSS to achieve that. Please follow these steps:
1. Upload your sticky nav logo image in the Media tab and copy the image URL (Please make sure the sticky logo nav has about the proportions of the default logo)
2. Navigate to Appearance > Customize > Theme Options > Custom
3. Add the following CSS in to the CSS textarea:
@media (min-width: 992px) {
.navbar-brand img { display: none; }
.navigation.is-sticky .navbar-brand {
width: 250px;
height: 90px;
background-repeat: no-repeat;
background-position-x: 25px;
background: url(PATH-TO-LOGO);
}
}
And change the PATH-TO-LOGO with the sticky nav logo URL
That should do the trick.
If you have any questions, feel free to ask
Best regards,
Barry
QreativeThemes.com | WordPress Themes