Image and text as logo

Product Support

AI-generated summary

The discussion is about displaying both an image and text as a logo. wallaceandgromit wants to show the site title next to the logo in the header, similar to how topic titles are displayed.

merefield suggests designing a logo with the text included, but smrtey provides a code solution using CSS to add the site title next to the logo.

smrtey also explains that to hide the title on certain pages, additional CSS or JavaScript code is needed. wallaceandgromit asks for help with the JavaScript code, which smrtey provides.

The JavaScript code adds a class to the #main element when the page is scrolled, allowing the title to be hidden. smrtey also shares a GitHub link to a component that implements this solution. wallaceandgromit confirms that the solution works perfectly.

1

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.

2

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

3

You can do something like this

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

image
image1004×394 21.3 KB

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

image
image994×402 20.6 KB

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

5

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.

6

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

7

Thanks so much! This is perfect.