Image and text as logo

[wallaceandgromit]

Hello.

I have a ‘logo’ image set for my forum. I also have a ‘title’ set.

Currently, in the header, only the ‘logo’ displays. I would like to make it so that the ‘title’ appears next to it on the right. I’d like it in the same format that topic titles sit next to the logo when you scroll down a page – so it shows logo & site title by default, then when you scroll a thread the thread’s title replaces the site title.

Is this possible? I’ve Googled and can’t find a solution.

Thank you.

[merefield (Robert)]

If you want text too why not design a logo with the text included?

[smrtey]

You can do something like this

d-header .title::after {
    padding-left: 20px;
    font-size: 1.5em;
    color:  #333;
    content: "Here is some text";
}

You’ll still need to hide it where you don’t want it like when the title of a topic is displayed

You can do this by not having it display on pages with the archetype-regular body class (in which case it won’t be on topic pages at all) or with js that makes it disappear like how the Large and Small logos get swapped out once you start scrolling

[wallaceandgromit]

Thank you very much for your response. That’s great!

Do you know what JS I would need to make it disappear like you mention? That’d be excellent.

[smrtey]

Try this

.d-header .title::after {
    padding-left: 20px;
    font-size: 1.5em;
    color:  #333;
    content: "Here is some text";
}
.archetype-regular #main.no-text .d-header .title::after,
.archetype-private_message #main.no-text .d-header .title::after  {
    display:none;
}

<script>
    $(document).ready(function() {
    	$(window).scroll(function(){
    		checkScroll()
        }); 
    
    	function checkScroll() {
    		var y = $(window).scrollTop();		
    		if (y > 55) {
                document.getElementById("main").classList.add('no-text');
            } else {
                document.getElementById("main").classList.remove('no-text');
            }
    	}
    	checkScroll();
    });
</script>

Here it is as a component
https://github.com/oerog/header-text.git

[wallaceandgromit]

Thanks so much! This is perfect.