- Overlay Header (Header Style 4)
- Fixed/Sticky Header on Scroll
- How To Add A “Simple” Button To The Main Menu
- Header Styles
- Reduce Header Top & Bottom Padding
- How To Alter The Mobile Menu Breakpoint
- Header “Aside” Content (Adding extra content to the header)
- Header Builder – Create Your Own Site Header
- Manually Toggle/Show Header Search
- Header “Aside” Content (Adding extra content to the header)
The “Overlay Header” function in Diamond allows you to locate whatever is at the top of your page under the main header (which will be transparent) so you can create some cool unique layouts. This is something that would be done on a per page or per post basis (there are problems with allowing it globally so it’s not possible to do that). For this reason it’s not technically a “header style” (header styles can be defined globally), however this was noted as “Header Style 4” in one of the demos in the past which may have confused some users.
Creating The Overlay Header
Simply use the Page Settings on any page or post to enable the Overlay Header. This will alter the default design of the navigation menu as well as position the header so it’s fixed and on-top of any content that is on the current page/post.
Diamond includes the built-in ability to have fixed header on-scroll (it’s actually enabled by default) and it can be adjusted and disabled via the Customizer. Simply go to Appearance > Customize > Header > Sticky Header to tweak your settings:
Add Menu Class
- menu-button – Adds a simple slightly rounded button with the theme accent color as the background
- menu-button menu-button-rounded – Adds the menu button but also gives it greater rounded corners for a “pill-shape” button
Diamond includes different Header styles to better fit the needs of your website(s). Simply browser to Appearance -> Customize -> Header to select your header style under the “General” tab.
Header Style One
The default header style has the logo on the left and the navigation on the right.
Header Style Two
Header style two has the logo on the left, an “aside content” area on the right and the navigation below.
Header Style Three
Header style three has the logo centered and the navigation below (also centered).
Header Style Four
Header style four has the logo centered and the navigation above (also centered).
Header Style Five
This is a centered logo header style where you have items on the left/right of the logo.
Header Style Six
This is a vertical style header that’s on the left side of the screen and can be positioned fixed if wanted so you always see the logo/menu on scroll.
You can easily decrease the height of your header by altering the top and bottom padding of the header. Simply go to Appearance > Customize > Header > General to alter the default settings. See below:
By default the Diamond theme will display your desktop menu up until 960px and it will then switch to the mobile menu. However, you can easily alter this (useful if you have a lot of menu items or want the mobile menu on all devices) via the Customizer under the Header > Mobile menu tab.
If you are using header styles two, three or four then you will notice an option in the Customizer called “Aside Content” which you can use to add additional content to the header. This field allows you to enter simple text, shortcodes, html or you can even enter the ID for any page to display content added to that page (for example if you want to display Visual Composer content you can create a new page, add your stuff then enter that page ID into this field and it will display in the header).
The Diamond WordPress theme also includes “Header Builder” functionality which allows you to create a standard page and add any content you want on it via the Visual Composer page builder then display this as a replacement of your main header. This gives you 100% control over the header and how it looks. Perfect if all you want is a simple logo and some text or if you want something more complex using 3rd party menu plugins, parallax images or more!
Step 1 – Create A Templatera Template (or page)
You can create a new standard page but for organization it’s best to create a new Templatera template which would be done by going to Visual Composer > Templates > Add New (assuming you installed and enabled the plugin as recommended by the theme). Templatera templates only allow you to edit in back-end mode, so if you want to be able to edit the header using the front-end builder then you would instead create a standard page template.
Step 2 – Select Your Template or Page to Replace The Header
Next go to Theme Panel > Header Builder and select your newly created page.
Step 3 – Edit The Template/Page
Now you can go and edit the page and add all the content you want for your header. If you are using a standard page then you can use the front-end builder and it will only display the header content making it easier to see what you are doing. If you are using templatera then you will only have access to the backend builder due to how the Visual Composer plugin works.
The Diamond theme includes the ability to display a search link in the header menu that will “toggle” (display) the search when clicked. However, sometimes you may want to disable the search link and use a different method for opening the search function. We’ll don’t worry it’s possible with Diamond via unique classnames.
Each style of header search uses a different class to display it. Below are examples of adding a link that will open that specific search style:
<a href="#" class="search-overlay-toggle"><span class="fa fa-search" /></a>
<a href="#" class="search-header-replace-toggle"><span class="fa fa-search" /></a>
<a href="#" class="search-dropdown-toggle"><span class="fa fa-search" /></a>
By default the theme header in the Diamond theme is enabled (of course), however, in some cases you may want to completely disable the theme’s default Header globally. Especially if you are working with a single page website and you want to “design” the header area using the Visual Composer or using a slider via the Slider Revolution Plugin. In order to disable the header you simply need go to Appearance > Customize > Header > General and uncheck the option labeled “Enable”.