Okay
  Public Ticket #2770097
Custom CSS to hide page tile
Closed

Comments

  •  1
    hanna222c started the conversation
    May 6, 2021 at 1:39pm

    Hello,

    I would like to hide the page title and the paragraph below it on this page only. So that the nectar slider ends up flush with the submenu.

    Just so you know: I have made the home page also the woocomerce shopping page. I still need to show the page title on all other pages like: Contact – Locatiewerk and Skyliner – Locatiewerk


    Any suggestions?

  •  1,885
    Judith replied
    May 6, 2021 at 5:23pm

    Hi There,

    Thanks for contacting us.

    Please paste this css in css custom code under Salient > General Settings > CSS/Script Related:

    .single-product div.product h1.product_title, .nectar-shop-header .page-title {
        display: none;
    }

    Thanks.

  •  2
    steenvreter replied
    May 7, 2021 at 7:19am

    Hi Judith,

    Thanks, that works, partially. There is still a white space visible above the nectar slider. Any thoughts where that comes from and ho to get rid of it?

    https://verhuur.locatiewerk.nl

  •  1,885
    Judith replied
    May 7, 2021 at 7:25am

    Hi There,

    Please try this css:

    #header-space {
        height: 89px;
    }

    Thanks.

  •  2
    steenvreter replied
    May 7, 2021 at 7:41am

    perfect! that worked for desktop view. Is there an alternative for mobile device view?


  •  1,885
    Judith replied
    May 7, 2021 at 7:46am

    Hi There,

    Please try this css on mobile:

    @media only screen and (max-width: 999px) and (min-width: 1px){
    #header-space[data-header-mobile-fixed="1"] {
        display: none;
    }
}

    Thanks.

  •  2
    steenvreter replied
    May 7, 2021 at 7:49am

    Hi Judith,

    that works a little too good. It seems the top of the slider is cut off now.

  •  1,885
    Judith replied
    May 7, 2021 at 8:00am

    Hi There,

    Please remove the css i have sent you and replace with this one:

    @media only screen and (max-width: 999px){
    #header-space {
        height: 42px !important;
    }
}

    I noticed the images are actually cut off even without the header space or with the header space.

    4782433731.png

    Thanks.