Skip to main content

Trying to hide the page title wrapper on a certain page but can’t seem to get the below to take:

 

#doc-page-575 #page-title__wrapper {
    display: none !important;
}

Only able to get the below to work on all pages:

#page-title__wrapper {
    display: none !important;
}

Any ideas? Thanks!

Have tried a bunch including 

/* Hiding Page Title on Homepage */
#doc-page-575 doc-layout-title-bar {
    display: none !important;
}

 

@JZenker - give this a shot and see if it works.

Be sure to test thoroughly to verify it does not adversely affect other areas of your platform.

/** Begin Remove Title Bar on specified page **/
/** Change Page ID number as needed **/

main:has(#doc-page-575) #doc-layout-title-bar {
    display: none;
}

/** End Remove Title Bar on specified page **/

 

@JZenker - give this a shot and see if it works.

Be sure to test thoroughly to verify it does not adversely affect other areas of your platform.

/** Begin Remove Title Bar on specified page **/
/** Change Page ID number as needed **/

main:has(#doc-page-575) #doc-layout-title-bar {
    display: none;
}

/** End Remove Title Bar on specified page **/

 

Once again Greg you’ve done it - you’re a gentleman and a scholar, thanks!

I’ll have to research what I was doing wrong and what main:has does

I will try to give my explanation of it. In a nutshell - something like this

/* Hiding Page Title on Homepage */

#doc-page-575 doc-layout-title-bar {

display: none !important;

}

does not work because the ID #doc-page-575 appears in the CSS after doc-layout-title-bar - it isn’t a child of the page number ID in terms of how it is written and loaded to the page and so the code “doesn’t find it”.

The :has selector allows us to sort of back up to something that does have the page ID as a child and then also has the target as a separate child. So in other words we find a parent that our page ID and the target have in common and build the selector with that.

That would be my understanding of it.

I will try to give my explanation of it. In a nutshell - something like this

/* Hiding Page Title on Homepage */

#doc-page-575 doc-layout-title-bar {

display: none !important;

}

does not work because the ID #doc-page-575 appears in the CSS after doc-layout-title-bar - it isn’t a child of the page number ID in terms of how it is written and loaded to the page and so the code “doesn’t find it”.

The :has selector allows us to sort of back up to something that does have the page ID as a child and then also has the target as a separate child. So in other words we find a parent that our page ID and the target have in common and build the selector with that.

That would be my understanding of it.

That’s excellent Greg and makes complete sense - I could see that the parent element wasn’t quite right while inspecting/testing in dev mode. Thanks again!

Reply


Terms & ConditionsCookie settings