• Skip to main content
  • Skip to header right navigation
  • Skip to site footer

Mai Reach Theme

A Genesis User Guide

  • Home
  • Tutorials
  • Videos
  • Images
Main hero header image for Mai Reach theme tutorial site.

Site Header

The Mai Reach site header covers the logo and header right area, at the top of your site.

The site header can be transparent or white. Be careful, the site header is easy to confuse with the page header.

  • The page header in Mai Reach theme.

If you go to…

Dashboard > Appearance > Customize > Theme Settings > Site Header

You’ll see the site header settings. There are two options.

  • enable sticky header
  • enable transparent header

Enabling the sticky header means the logo and navbar will stay visible as the reader scrolls down the screen.

If you enable the transparent site header, the logo and header right navbar area will have a transparent background. So you’ll see the page header background image behind the logo and navbar section. As in the screen shot below.

Page header with a background image & a transparent site header

The next screen shot shows a page header with a background image. But the transparent site header is turned off (un-ticked).

If you do not tick the box that says “Enable transparent header” your site header will have a white background.

Navigation bar locations

There are three theme locations where you can place a navigation bar in Mai Reach theme.

  • header left menu (displays left of logo)
  • header right menu (displays right of logo)
  • after header menu (displays beneath logo area)

You position the navbar by going to…

Dashboard > Appearance > Menus > Manage Locations

In the menus, manage locations tab, there are three menu location options.

  • header left menu
  • header right menu
  • after header menu

If you place a menu in header left AND in header right menu locations, your logo will be centered between the two navbars, in the center of the site.

In the image above, this is what the number mean…

  1. site header area
  2. logo/site title area
  3. header left menu and header right menu, placed via the menus > manage locations tab

You find the menu settings that I used in the examples above by going to Dashboard > Appearance > Menus.

The customizer also has a mobile menu breakpoint setting.

The Mobile Menu Breakpoint

Go to…

Dashboard > Appearance > Customize > Theme Settings > Menus: Mobile Menu Breakpoint

Mobile Menu Breakpoint lets you decide at what point the mobile menu will activate. You might want the mobile menu to display on screens smaller than 1000 pixels wide, or smaller than 768 pixels wide etc.

Mai Reach theme mobile menu breakpoint settings.
Mai Reach mobile menu is active.
Category: Mai Reach Theme Tutorials
Previous Post: « Typography for headings and pararaphs. Typography
Next Post: Template Parts in Mai Reach Theme »

Learn more about Mai Reach theme

(It’s one of the new generation from BizBudding)

Mai Reach Theme

Mai Reach Tutorials

Mai Reach is one of the new generation of themes by BizBudding. They’re the people behind Mai Lifestyle, one of the most popular themes on StudioPress.

Mai Reach Tutorials

Template Parts

Template parts replace many of the widget areas in this block based theme.

Find out more about…

Template Parts

Genesis Framework

Mai Reach is built on the Genesis framework. Genesis is a good solid foundation for your website.

If you’d like to know more about Genesis read this.

This website is independently owned by an affiliate marketer of StudioPress. It is not sponsored by BizBudding, StudioPress, WP Engine, Copyblogger Media LLC, WordPress, or Automattic Inc. WordPress, Genesis, StudioPress, WP Engine and BizBudding are registered trademarks of their respective owners.