Header

Index

• Default Height Header - switch to mobile sooner
• Short Height Header - switch to mobile sooner

---

Default Height Header - switch to mobile sooner

Theses styles switch the 'default' height header to its mobile appearance at a higher breakpoint -- the max-width value can be adjusted to whatever makes sense for the site:

/* Default height header */
@media (max-width: 960px) {
  .h-dh .desktop-only {
    display: none;
  }
	
  .h-dh .site-header .mobile-menu-toggle, 
  .h-dh.h-sub .site-header .mobile-menu-toggle, 
  .h-dh .site-header .mb-cta {
    display: inherit;
  }
	
  .h-db .middle-header-contain {
    border-bottom: 1px solid var(--newspack-theme-color-border);
  }
}

Short Height Header - switch to mobile sooner

Theses styles switch the 'short' height header to its mobile appearance at a higher breakpoint -- the max-width value can be adjusted to whatever makes sense for the site:

/* Short height header */
@media (max-width: 1100px) {
  .h-sh .desktop-only,
  .newspack-reader__account-link__mobile .newspack-reader__account-link__label {
    display: none;
  }
	
  .h-sh .site-header .mobile-menu-toggle, 
  .h-sh.h-sub .site-header .mobile-menu-toggle, 
  .h-sh .site-header .mb-cta,
  .newspack-reader__account-link__mobile {
    display: inherit;
  }
	
  .h-db .middle-header-contain {
    border-bottom: 1px solid var(--newspack-theme-color-border);
  }
}