Skip to main content

Header Options

Header Options

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

A solid vibrant blue square centered against a dark background.  BEFORE YOU CHOOSE

Essential Layout Tips

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.

Showcase Menus

Available on all sites using the headers shown here, this feature allows you to enhance any top-level dropdown with a title, caption, and/or image. Showcase Menus can be easily enabled and customized within Section Settings. For more details or to view live examples, visit our Showcase Menu page.

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.

Navig­ation Align­ment

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.

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.

Header 1

Header 1 features a standalone navigation bar positioned directly above or below the logo area. Menu text can be left-aligned or centered to match your preferred layout style.

Top Aligned Navigation Bar: See this header on Denali

A website header with a green top navigation bar containing links like Home and About Us.

Bottom Aligned Navigation Bar: See this header on Yosemite

A website header for Sioux City Public Schools with a colorful logo on the left and navigation links below.

Transparent Header 1: See this header on Rainier

A website header with a dark green top navigation bar and a logo on the left.

Header 2

Highlights your school's brand with a centered logo layout, paired with a dedicated navigation bar that can be placed directly above or below the logo.

Top Aligned Navigation Bar: See this header on Congaree

A website header for Smart Sites Public Schools with a colorful abstract logo and a top navigation menu.

 

Bottom Aligned Navigation Bar: Live example coming soon!

A website header for Grant Siltes Public Schools featuring a colorful logo, navigation links, and a search icon.

 

Transparent Header 2: Live example coming soon!

A website header for Smart Sites Public Schools featuring navigation links and a colorful logo.

Header 3

Header 3 places the main navigation menu directly beside the logo and site name, while maintaining a separate utility bar for school selector links. It is the only header layout that lets you feature up to three highlighted popular links in the top bar—making essential, high-traffic family resources instantly accessible.

Solid Header 3: See this header on Acadia

A website header for 'Sherri Mas Public Schools' featuring a logo and navigation menu.

 

Transparent Header 3: See this header on Sequoia

A website header with navigation menus, a school logo, and the text 'SMART SIASI PUBLIC SCHOOL'.

Header 4

Header 4 positions the navigation menu directly to the right of the logo and site name. This sleek, modern layout maximizes vertical screen space by taking up the smallest header footprint.

Solid Header 4: See this header on Saguaro

A website header for Santa Clara Public Schools showing a colorful logo and navigation links.

 

Transparent Header 4: See this header on Badlands

A website header for Smart Etes Public Schools, featuring navigation links and a logo.

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.

A close-up view of a laptop screen displaying a dashboard with various options and text.

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