Failure to hide page title without hiding the header alongside

  • Resolved cindytse

    (@cindytse)


    3 years, 3 months ago

    Hi everyone. Thanks for reading this.

    I realised that the pages I created on our website have ugly page titles below the header if I view them with a mobile view (while it looks fine on a desktop view and tablet view). I attempted to hide the page titles with different means but all failed.

    1. I tried to Turn On the “Hide Title” Option by editing a page with Elementor and clicking on Elementor Settings Icon.
    Result: My header is gone with the page title

    2. Go to any page >> Edit with Elementor (hover) >> Site Settings >> Layouts >> Page Title Selector >> typed h1.entry-title
    Nothing.
    So I tried to inspect the page and found that there is no <h1 class> in the codes. Just <Title>.
    Result: Cannot find the page title selector

    3. Go to Appearance >> Customize >> Additional CSS and added the following CSS:
    .page .entry-title {
    display: none;
    }
    Result: The page title is gone BUT the header disappears as well unless I scroll down the page. So if I do not scroll down, my logo and menu bar is hidden.

    4. Go to Appearance >> Customize >> Additional CSS and added the following CSS:
    .nv-page-title-wrap.nv-big-title .nv-page-title {
    display: none;
    }
    Result: Nothing changed on the frontend

    Our team had an outsource development team who customised a website template for us and set up the website. However, the development team is disappeared after the payment is made. So there is no one here who knows my website I can consult.

    What should I do?

    Thank you so much for your help!

    The page I need help with: [log in to see the link]

Viewing 2 replies - 1 through 2 (of 2 total)
  • Moderator bcworkz

    (@bcworkz)

    3 years, 3 months ago

    The header gets hidden below another element once you hide the title. It needs a z-index rule raising it up. For example:

    .elementor-7856 .elementor-element.elementor-element-e2d7f8a:not(.elementor-motion-effects-element-type-background) { z-index: 999; }

h1.entry-title { display: none; }

    (add to Additional CSS section)

    Thread Starter cindytse

    (@cindytse)

    3 years, 3 months ago

    It works perfectly! Thank you so much @bcworkz !

Viewing 2 replies - 1 through 2 (of 2 total)

The topic ‘Failure to hide page title without hiding the header alongside’ is closed to new replies.

Tags