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.
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…
- site header area
- logo/site title area
- 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.
Typography
»