Twenty Seventeen: only show the image on the landing page

• 

  lucavdb · Member · Aug 21, 2024 at 9:24 am

  • Copy link
  • Add topic to favorites

  Hello. In Twenty Seventeen is on the landing page a media header and below that a blog post or page. Is there a way to only have the media hearder there with the nav bar and not the things below it? Pictures for reference:

  how i want it:

  

  but now you can scroll down, and thats something i don’t want:

  

• 

  lucavdb · Member · Aug 21, 2024 at 9:54 am

  • Copy link

  already made the css, thought i could share it for everyone else:

  /* Keep the nav bar fixed at the bottom of the viewport */
  .home .site-header {
      position: fixed;
      bottom: 0;
      left: 0;
      width: 100%;
      z-index: 10;
      background-color: rgba(255, 255, 255, 0.8); /* Slightly transparent background */
  }
  
  /* Remove any extra padding/margin from the header */
  .home .custom-header {
      margin: 0;
      padding: 0;
  }
  
  /* Ensure the custom header fills the viewport above the nav bar */
  .home .custom-header-media {
      height: calc(100vh - 70px); /* Subtract the height of the navbar from 100vh */
      max-height: calc(100vh - 70px);
      width: 100%;
      overflow: hidden;
  }
  
  /* Fix scroll issue by removing unnecessary margins and padding */
  body.home {
      overflow: hidden; /* Prevent scrolling */
      margin: 0;
      padding: 0;
      height: 100vh; /* Ensure the body fits the viewport */
  }
  
  /* Hide the arrow in the navbar */
  .home .menu-scroll-down {
      display: none; /* Completely remove the arrow */
  }
  
  /* Ensure the content area below the header is hidden */
  .home .site-content {
      display: none; /* Hide content area below the media header */
  }