Hide blog title at top of page

Deanna3
Excursionist
43 0 10

I want to hide the word 'News' at the top of my blog page. How do I do that? I tried removing the blog title (Blog Details > Edit Blog), but couldn't save it with a blank title.

 

Replies 7 (7)
tim
Shopify Expert
3040 170 1094

Deanna,

you can not do it Customize Theme, so yo have to edit the code. The easiest is to hide this line with CSS, by adding the following code to the theme.scss.liquid Asset:

/* --tim: hide the blog name on the blog page */
.template-blog .section-header {
    display: none;
}

 

My post solved your problem? Like it!
Deanna3
Excursionist
43 0 10

Perfect! Thank you!  🙂

Rucha
New Member
2 0 0

Hello Im facing the same problem as mentioned above I tired doing showed solution but Im working on canopy theme and in my assets there is no theme.scss.liquid Asset file. 

Thank you in Advance

Rowby
Shopify Expert
93 0 18

Hello from 2021

Apparently you have to check the HTML code because some themes handle this differently.  (I use Firebug, for example to examine HTML on a page

Here's how I was able to use CSS to hide the Title in OutoftheSandbox's Blog pages for their Flex Theme

div.container.hide-when-banner-enabled {
display: none;
}

Rowby

Shopify Partner and Expert

https://www.Rowby.com

www.Rowby.com
Specializing in Shopify Solutions including CBD
ThomasBeckman
Tourist
5 0 1

I have this issue in 2021 on the 3.0 Flex theme and I have tried using CSS with about 5 different sets of selectors, including the above, to set the display property to none and it's just not working? I even used the !important tag. Not sure what is going on. 

diego_ezfy
Shopify Partner
2726 511 690

@ThomasBeckman and everyone coming across this thread:

On each theme it is likely going to be a different selector, that is why copying some code from this thread into your theme may not yield any results.

The !important will simply overwrite previous CSS rules which were on top of the hierarchy due to its specificity. (detailed explanation here).

If the selector is not correct, the !important won't take any effects whatsoever.

Kind regards,
Diego

ThomasBeckman
Tourist
5 0 1

@diego_ezfy I'm sure that is helpful to point out for some, but I am using the same theme @Rowby mentioned, Flex by Out of the Sandbox which I stated previously.

My blog header has the same class (.hide-when-banner-enabled) attributed to it. 

I have tried with that selector, and a few other variations of selectors to directly reference my theme-specific blog header, but even going as explicitly as possible to apply the display: none; property, it's not hiding it. Very strange. Nothing I have seen before.

 

I have tried adding the code in the customize editor AND directly to the styles.css.liquid file with the same result.