PPM site
Just another New Help App Staging Sites site
Header layout options for GP can be found in “Settings > Customize > Layout > Header”. In starting in GeneratePress 2.2, the Header Presets options are added in the Customizer control to serve as a shortcut for specific header layouts.
Header layout options for GP can be found in “Settings > Customize > Layout > Header”.
The “Header Width” option is the outer container of your header. This outer container is what your header background color or image is applied to.
Setting this to “Full” will make your background color/image span the entire width of your screen.
Setting it to “Contained” will contain it to the width of your container, set in “Settings > Customize > Container”.
The “Inner Header Width” option refers to the inner container which holds the content of your header (site title, logo, widget etc..).
Setting this to “Full” will make your header content span the entire width of your screen.
Setting it to “Contained” will contain your header content to the width of your container.
You can choose to align your header content to the left, center or right.
Using navigation has a header as seen above is one of the most popular and requested layouts currently. Starting in GP Premium 1.8, you can find this option under Layout > Header:
To create transition effect above, first you need to complete the Basic steps above, then follow the additional steps below:
We also have the option to merge the header navigation with a page hero in our Header Element as seen above. Follow the Basic steps first, then the Height Transition steps if it’s desired, then we are ready to merge with the options detailed in the Transparent Header and Navigation article.
If you want to use a different logo and navigation colors to match a specific page hero, you can do so by uploading the logo in Navigation Logo and change the Navigation Colors under the Site Header tab for that specific page hero.
You can adjust the padding inside your header container in Settings > Customize > Layout > Header.
The value you see is in pixels, and controls the amount of space between the edge of your header container and content inside of it:
Note that this can be adjusted separately for desktop and mobile by using the toggle buttons.
The mobile header option is found in Settings > Customize > Layout > Header.
This option disables the default website header on mobile devices:
and replaces it with a streamlined version:
The mobile header inherits your navigation colors set in Customize > Colors > Primary Navigation.
Customize the px number when the mobile header kicks in. The default value is 768px.
Add the site title or a logo in the mobile header. It is recommended that the logo should be quite small – kind of like an icon for your website.
The height of the logo is determined by the menu item height option with mobile toggle activated.
There are also 10px of default top and bottom padding which can be removed with this CSS:
.site-logo.mobile-header-logo img { padding: 0; }
Activate sticky mode for the mobile header.
Checking this option will hide the sticky mobile header unless you’re scrolling up towards the top of the site. This can save you valuable screen space.
You may want to add more elements inside your mobile header like social icons, a phone number etc..
You can do so using the inside_mobile_header in the Hooks Element module.
Powered by BetterDocs