This feature is available only in Sydney Pro. To learn more about Sydney Pro, please go here.
The Extended Header module adds a new set of header-related features to your Sydney Pro-powered website. Please note: you have to activate this module in order to get access to its features.
The following features are available in this module (you can click on each link to be taken to the corresponding section):
- two new header layouts;
- one new mobile header layout;
- WPML language switcher component (header and top bar);
- Polylang language switcher component (header and top bar);
- HTML component (header and top bar);
- Shortcode component (header and top bar);
- Login modal component (header and top bar);
- Mobile menu toggle icon size control;
- Mobile menu custom breakpoint option;
- Different logo for mobile devices.
How to activate the Extended Header module
To activate the Extended Header module, please go to your admin area and from there go to Appearance > Theme Dashboard. Once you’re here, locate the Extended Header module and click on Activate.
New header layouts
The two extra header layouts can be found in Customize > Header > Main Header > Layout.
Both of these new layouts display your header on the left-hand side of your website and are sticky (the follow the user as he scrolls down).
This is how the first one looks:
For the second header, it is important that you use a smaller logo, considering this header is thin. This is how it looks:
Extra mobile header layout
The extra mobile header layout can be configured from Customize > Header > Mobile Header. This mobile header layout is useful for people that prefer having their header on two rows on mobile, thus allowing space for a larger logo or a longer site title on the first row, while the mobile menu trigger icon would go on the second row.
WPML language switcher component
If you are a WPML user, Sydney Pro has you covered. You can use our language switcher component for WPML both in the header and the top bar.
To add this language switcher element to your header, go to the corresponding section: Customize > Header > Main Header (or Top Bar) and locate the Elements sortable option.
Click on the Configure language switcher link to be taken to WPML’s options for custom language switcher. Once you’re there, make sure it is enabled, and then click on Customize to configure it the way you want.
Polylang language switcher component
Polylang users will be happy to know there is also a language switcher component available to them, along with some options that let you configure the language switcher. Simply go to Customize > Header > Main Header (or Top Bar, if that’s where you want to add the language switcher) and activate the Polylang language switcher from the Elements sortable option. You can also drag and drop to rearrange the language switcher in the position you want it to be.
Once you enable the Polylang Language Switcher by clicking on the eye icon, you’ll notice a few new options showing up which you can use to configure the language switcher.
HTML component
The HTML component can be enabled from Customize > Header > Main Header (or Top Bar, if that’s where you want it). From the Elements option, click on HTML and you will be presented with an option to add your HTML. Please note: for security reasons, this field allows only basic HTML, so you won’t be able to insert scripts for example.
Shortcode component
The shortcode component can be enabled from Customize > Header > Main Header (or Top Bar, if that’s where you want it). From the Elements option, click on Shortcode and you will be presented with an option to add your shortcode.
Login / register modal component
If you site allows user registration, using the login modal is an elegant way to let users register or log in on your website. You can enable it for your header or top bar by going to Customize > Header > Main Header (or Top Bar, if that’s where you want it). From the Elements option, click on Login / Register Modal and the settings related to this feature will show up automatically. You can configure all text strings, set up a custom redirect URL where you want to take users after they successfully log in, set a custom registration page or you can even add an image next to your login form.
You can set a custom size for the mobile menu’s hamburger icon. Go to Customize > Header > Mobile Header and scroll down until you find the Menu Icon Size option.
By default, the mobile menu shows up in Sydney Pro at the 1024px screen width. You can customize this breakpoint by going to Customize > Header > Mobile Header. The first option is the one you’re looking for, Mobile Menu Breakpoint.
Different logo for mobile devices
In certain situations, you might want to have a different logo that shows up only on mobile devices, maybe a smaller logo or a different logo. The mobile logo option is located right next to your standard logo option so you just need to go to Customize > Header > Site Identity.
