Hide Site Title


#1

I’m curious if there’s a way to hide the site title from the full-size/desktop view of the website. I am using the slider as a large welcome area which presents the site title so having both is redundant.

Also, I don’t want to get rid of the site title entirely since the slider text doesn’t appear on mobile (which I really like). Is there a way to change the size of the site title text for mobile?


#2

Hi cstout,

you can add this code below using custom css plugin:

.text-slider {
	visibility: hidden;
}

@media only screen and (max-width: 767px) {
  	.text-slider {
		display: block;
    	visibility: visible;
	}
}

#3

Hi Awan, thank you for the post, but that’s not quite what I was looking for. The site title that I’m trying to hide is the one you set in “Site Title/tagline/logo” which appears at the top left. On desktops (and higher resolution tablets that still display the site as a desktop would) I would like that site title to hide.

Since the slider text hides on mobile (which I want to keep), I’d like the hidden site title to show when the theme is sized down to mobile.

The slider text how it is by default is working great for me right now. I’m just trying to customize when the site title appears.


#4

Figured it out!

I used the following to achieve my goal:

.site-title {
	visibility: hidden;
}

.site-description {
	visibility: hidden;
}

@media only screen and (max-width: 767px) {
  	.site-title {
        font-size: 23px !important;
    	visibility: visible;
	}
}

@media only screen and (max-width: 767px) {
  	.site-description {
        font-size: 14px !important;
    	visibility: visible;
	}
}

#5

This creates a new problem though and now I’m stumped. Due to the .site-title and .site-description only being hidden they still take up space on the theme and make the background for the menu area massive. Is there a way to hide the those elements without them taking up space?


#6

Yeap. display: none; instead of visibility: hidden;.


#7

That definitely solved the large black empty space issue but it then centered the top menu on desktop and threw the menu icon way over to the left on mobile. What ended up working was keeping visibility:hidden and adding a font-size line and making the font size 0px. The code below is the final working product. Thanks so much for your help!

.site-title {
	visibility: hidden;
	font-size: 0px !important;
}

.site-description {
	visibility: hidden;
	font-size: 0px !important;
}

@media only screen and (max-width: 767px) {
  	.site-title {
        font-size: 23px !important;
    	visibility: visible;
	}
}

@media only screen and (max-width: 767px) {
  	.site-description {
        font-size: 14px !important;
    	visibility: visible;
	}
}