Header
Change how your header looks like
Header Styles
Lambda offers 6 different layouts for your header. From the Customizer, click on the
Headeroption and all the options of the header will show. Pick a style from the
Styleselect box. The available options are:
Logo Left Menu Right
When using this style the Logo Image and Logo Text are positioned on the left side of the header, and the Navbar on the right. On the right side of the Navbar is the widget position.
Logo Right Menu Left
When using this style the Logo Image and Logo Text are positioned on the right side of the header, and the Navbar on the left. On the right side of the Navbar there is the widget position.
Logo Right Menu Below
When using this style the Logo Image and Logo Text are positioned on the right side of the header, and the Navbar below. On the right side of the Navbar there is the widget position.
Logo Left Menu Below
When using this style the Logo Image and Logo Text are positioned on the left side of the header, and the Navbar below. On the right side of the Navbar there is the widget position.
Logo Center Menu Below
When using this style the Logo Image and Logo Text are positioned on the center of the header, and the Navbar below. On the right side of the Navbar there is the widget position.
Logo Left Menu Sidebar
When using this style the Logo Image and Logo Text are positioned on the left side of the header. The Menu pops up inside a sidebar that expands when you click on the expand button on the right side of the navbar. Bellow the menu is the widget position.
Fixed Left Menu Sidebar
When using this style the Logo Image and Logo Text are positioned inside the sidebar menu. The menu stays on a fixed position always open on the left of the screen, sharing the viewport with the content to the right.
On mobile devices, the sidebar overlaps with the content and opens when the user clicks on the icon bar button on the top header. Similarly, it closes when the user clicks on the closing icon. Note that the top header is only shown on mobile devices and should remain sticky for better user experience. Bellow the menu is the widget position.
To make the top header sticky, you need to go to Appearance->Customize, expand the Header panel and set the Sticky on Mobile to On.
It is strongly advised to not use a top bar with the fixed sidebar menu, as this would cause rendering issues
Fixed Right Menu Sidebar
When using this style the Logo Image and Logo Text are positioned inside the sidebar menu. The menu stays on a fixed position always open on the right of the screen, sharing the viewport with the content to the left. On mobile devices, the sidebar overlaps with the content and opens when the user clicks on the icon bar button on the top header. Similarly, it closes when the user clicks on the closing icon. Note that the top header is only shown on mobile devices and should remain sticky for better user experience. Bellow the menu is the widget position.
To make the top header sticky, you need to go to Appearance->Customize, expand the Header panel and set the Sticky on Mobile to On.
It is strongly advised to not use a top bar with the fixed sidebar menu, as this would cause rendering issues
Skicky Header
A sticky header scrolls along with the page.
Turning on sticky header
After expanding the Headeroption from the customizer, set the sticky menu on/off from the Stickyradio buttons.
Setting sticky header scroll point
After expanding the Headeroption from the customizer, set the Navbar Scroll Change Point to the number of pixels that you want the page to scroll, before the navbar changes height(see Skin Options for this option).
Extra header options
Setting menu to use full width
After expanding the Headeroption from the customizer, set the Width to Full Widthto make the Navbar capture the full width of the screen.
Setting up hover menu
After expanding the Headeroption from the customizer, set the Hover Menu to Hoverto make the Navbar open on hover.
Setting header text case
After expanding the Headeroption from the customizer, set the Text Capitalization to Force Uppercaseto make the Navbar text uppercase, to Force Lowercaseto make it lowercase or Offto use the default text.
Logo
Setting the site logo
After expanding the Logooption from the customizer, click on the Logo Image option to open an upload tab. This is similar to the upload procedure from the Media->Library menu. Upload a logo image and type a logo text in the Logo Text field.
Setting the transparent logo
After expanding the Logooption from the customizer, click on the Logo Transparent Image option to open an upload tab. Follows the same procedure as when setting a logo. This image will replace the logo when the header is transparent.
It is strongly suggested that you use logos of the same size, so that the header adjusts smoothly from normal to transparent and vice-versa.
Top bar
Turning on the top bar
After expanding the Headeroption from the customizer, set the Top Bar to Onto enable the Top bar.
Adding widgets to the top bar
Once the Top bar is enabled, two extra widget positions will be added, Top Bar Leftand Top Bar Right. See Widgets section for more info on how to setup your widgets.