Skip to main content

Popular Links

  1. Design
  2. Design Resources
  3. Header Options

Header Options

Header Options

Smart Sites offers seven distinct header layouts, giving you the flexibility to choose between a classic navigation bar or a more streamlined design—whichever suits your needs best!

Layout Choices

 

Solid Header 1, Top Aligned Navigation Bar: See this header on Denali
Website header for Smart Sites Public Schools, featuring a navigation bar with links to Home, About Us, Families, Students, Community, Academics, Programs & Services, and Calendar.

 

Solid Header 1, Bottom Aligned Navigation Bar: See this header on Yosemite
Website homepage for Smart Sites Public Schools, featuring a computer icon and navigation menu.

 

Transparent Header 1: See this header on Rainier
Website header for Smart Sites Public Schools, featuring a computer icon and a blurred image of a graduation cap.

 

Solid Header 3: See this header on SequoiaThe website homepage for Smart Sites Public Schools, featuring a navigation bar with links to information about the district, schools, families, students, academics, and programs & services.

 

Transparent Header 3: Examples coming soontransparent header 3

 

Solid Header 4: See this header on Saguaro
The website for Smart Sites Public Schools, featuring a computer icon and navigation links for information about the district, schools, families, students, academics, programs, and services.

 

Transparent Header 4: See this header on Badlands
Website banner for Smart Sites Public Schools, featuring a computer icon and a blurred image of graduation caps.

Good to Know...
 

Choose a Design with the Header You Want

While components can be added or modified at any time, changing the header style on your website requires a support ticket. For this reason, it’s important to consider the header style when choosing your design. 

Color Flexibility

Colors on headers are completely configurable, so each style of header (with the exception of ‘transparent’) can be made white, a dark color or a light color.

Transparent Header Considerations

You will want to consider your district and school branding if choosing a design with a transparent header. Logos must work on a dark background since the homepage gradient and subpage header color are both dark. If needed, your designer will add a white background or stroke to your logo to ensure it is legible.

Navigation Alignment

Header 1 includes navigation text alignment options for ‘left’ and ‘center.’ If you have an alignment preference, you can make note of that when you submit your design form.

Links Outside of Popular Links (Header 3)

Header 3 allows you to add up to three customizable links in the top utility bar, separate from the Popular Links menu. Easily managed through Administration Options, you can update your links at any time and even display different links for each site if needed.

Header Features and Functionality

Have we thought of everything? Why yes, we have. Check out the incredible features included with every Smart Sites header.

  • Mobile First Design

    The Smart Sites mobile menu features a sleek, collapsible design, allowing users to expand sections as needed for easy navigation. It also includes direct links to Search, District Home, and the full school list. To enhance accessibility, Popular Links and Google Translate remain outside the menu for quick, seamless access.
     

    A hand uses a finger to scroll through a mobile phone menu with options for students, academics, programs, schools, and district.

  • Popular Links Menu

    An optional “Popular Links” menu, available with every header style, ensures quick and easy access to your most frequently visited information. It remains accessible on both the homepage and subpages, staying outside the mobile menu on smaller devices to keep your key links prominently displayed at all times. Want to add a touch of style? Easily enhance each link with a FontAwesome icon for a pop of color and personality. Prefer a custom touch? You can rename the dropdown and tailor its content to specific needs, such as Staff Resources or Enrollment Forms.
     

    A website for Redwood School District, featuring a statement about equity and a list of popular links.

  • Categorized School Menu

    The Smart Sites school menu features a clean, user-friendly design, making it effortless for parents and community members to navigate between school sites. For smaller districts, schools are displayed in a simple, three-column list, while larger districts can categorize schools by level, such as Elementary, Middle, and High. With a sleek lightbox-style pop-up and expandable accordion bars, this menu offers a seamless and scalable solution for districts of all sizes.
     

    A person uses a laptop to browse a school website, with a list of elementary schools displayed.

  • Google Translate

    Every Smart Site header offers the option to include a Google Translate button, providing seamless translation in 249 languages to meet your district and school’s diverse language needs. Looking for an even more advanced solution? Smart Sites also supports Weglot, a premier translation service for enhanced accuracy and customization.
     

    A website header with navigation links, a language selection dropdown, and a search icon.

  • Brand Management

    At ParentSquare, we know that brands evolve, and updates to logos, site names, and taglines are sometimes necessary—especially for larger districts with hundreds of schools. That’s why Smart Sites offers a simple, intuitive interface for effortlessly managing your brand assets. Easily access recommended logo dimensions right below the upload area and make updates as needed—no customer support required.
     

    A laptop displaying an administration options page with a logo upload section and a preview of the Rainier Schools logo.

  • Alphabetized Directories

    To keep navigation clean and user-friendly, every Smart Sites header limits dropdown menus in the main navigation bar to 15 pages. This prevents dropdowns from becoming overwhelming, especially on smaller desktop screens where space is limited. If a section contains more than 15 nested pages or subsections, an alphabetized directory page is automatically generated. Instead of sifting through a lengthy dropdown, users are directed to a well-organized, easy-to-navigate landing page—requiring zero effort from the website admin. For sections with 15 or fewer pages, a standard dropdown appears on hover, while clicking the main navigation link leads to a non-alphabetized section landing page.
     

    A webpage titled 'Parents' with a list of resources for parents of students in the Nettleton School District.

Upgrade From an Old Header

Are you a Smart Sites early adopter with a header that looks a little different from the ones shown here? We'd love to upgrade your site to one of our new headers so you can take advantage of the latest features and improvements. Take a moment to review the changes you can expect when transitioning from an older header to a new one. When you're ready to make the switch, simply contact our support team—we're here to help!
 

Header Upgrades - What to Expect