Get rid of header on Landing Page

Site URL: https://www.madebyrach.net/

I am trying to get rid of the nav bar on my landing page. I want remove only the About, Portfolio, Gallery, and Contact headers, but keep the name (RACHEL KIM) and the social icon buttons on the left hand side. I want the navbar headers on every other page on my website though.  I also want to remove the hamburger menu on the landing page in mobile view as well.

Thank you!

Add the following to Design > Custom CSS.

#collection-5f3187598c520c609927f6bc .header-nav {

  visibility : hidden;
  
  }

@media only screen and ( max-width: 1024px ) and ( pointer: coarse ), screen and ( max-width: 799px ) {

  .header-burger {
  
    visibility : hidden;
    
    }
  }

Let us know how it goes.

@creedon, I tried it but it got rid of my header entirely. I was wondering if there's a way to only get rid of the links, but keep the "RACHEL KIM" and social icons on the right side. Also, on mobile. it still shows the hamburger menu; I would like to get rid of that, but keep the name in the top left.

Thank you!

Add to Home > Design > Custom CSS

body#collection-5f3187598c520c609927f6bc .header-nav {
    visibility: hidden;
}

14 hours ago, madebyrach_ said:

I tried it but it got rid of my header entirely.

I updated the CSS in my previous post.

@Langulin

Please post the URL to the page where you want to achieve this effect.

If your site is not public please set up a site-wide password, if you've not already done so. Post the password here.

We can then take a look at your issue.

On 1/15/2021 at 10:32 AM, Langulin said:

Hello @creedon - do you know if there a way to entirely remove the header and footer on 7.1 templates, so you can create a cover/landing page. I would like just a single image or video on a landing page, where I'll add a button and then connect to the rest of the site. Any help would be great, please.

Thanks 🙂

 

Add to Page Header

<style>
  header#header, footer.sections {
  	display: none;
  }
</style>

Hey Guys,

I'm using SS 7.1, on a business account, and I'm also trying to remove the hamburger/menu bar from mobile for a landing page.  @creedon Your CSS from 11/18 worked, but when it removed the menu  bar, the logo became off center (because it moved closer to where the menu bar was).  Is there a way to remove just the menu bar, without affecting any other elements on the page (especially on mobile), to keep everything centered?

@tuanphan I'm not sure why, but none of the code entries you shared worked on my end.

Thanks for your help!

D

@DCNY

Please post the URL for your site. If I had to guess I'd say that instead of display : none we'd need to use visibility : hidden. But we won't know until we can see what we are dealing with.

If your site is not public please set up a site-wide password, if you've not already done so.

Post the password here.

Adding a site-wide password is not a security breach. Please read the documentation at the link provided to understand how it works.

We can then take a look at your issue.

Thanks @creedon. The website is public - www.kanisse.org. Let me know if you need any other information.  Thanks!

@DCNY

I have updated my code post. It appears you don't need the following rule-set so you don't have to copy that part.

#collection-5f3187598c520c609927f6bc .header-nav {

  visibility : hidden;
  
  }

Let us know how it goes.

It worked like a charm! Thank you!!