Replace Logo Image on Scroll (and a few other small issues)

Viewing 3 posts - 1 through 3 (of 3 total)
  • #22978
    GovindaDickman
    Participant

    Hi,

    I’m using a child of the enlightnment theme, and I have 3 issues I need to sort out:

    1) I need to change the logo image in the sticky header so that when the user scrolls down, rather than simply shrinking the default logo image, it will be replaced by a simplified version that looks much better in the reduced size. I’ve tried to use both jquery and classie.js to solve this problem, without success.

    2) I managed to over-ride the default starting size for the logo with a small css snippet aimed at .navbar-brand .site-logo, but suddenly that stopped working and the logo is now loading at your default size even though I still have the exact same over-ride in the custom css panel???

    3) Finally, I tried to copy EXACTLY the multicolumn media component that you describe in your documentation, but the images are coming in as tiny. I mean really tiny (20px), smaller even than standard sized icons. In fact, when I followed the instructions exactly, the images were not displayed at all. It was only when I set the image to left-align that they appeared on the page. But tiny.

    Please help? I love the theme for the potential your own demo versions display, but even just to copy that basic funcionality has proven very tricky because your documentation doesn’t quite match reality…

    #22980
    GovindaDickman
    Participant

    I think that the issue is this: bootstrap.css over-rides any changes made in custom style.css file; I need to enqueue the changes so they’ll come in after bootstrap… How do I do this in a way that won’t be erased every time you update the theme?

    #22983
    Daniel Tara
    Keymaster

    The simplest way to achieve this is to use a custom CSS hack. Go to Appearance → Design → Custom CSS and enter the following:

    @media (min-width: 992px) {
    	.navbar-brand {
    		background-image: url(/path/to/image.png);
    		background-position: 15px 14px;
    		background-repeat: no-repeat;
    		background-size: auto 32px;
    	}
    
    	.navbar-large .navbar-brand {
    		background: none;
    	}
    
    	.navbar-brand > .site-logo {
    		opacity: 0;
    	}
    
    	.navbar-large .site-logo {
    		opacity: 1;
    	}
    }

    The only thing you need to change in the code above is replace the /path/to/image.png with the real path to your logo. Because of the previous changes you made to your theme you may run into issues which unfortunately cannot be debugged unless you share a link to your website.

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.