Header

Change how your header looks like

Online Docs Available Looks like you are looking at the offline docs. You can find possibly more up to date docs online here

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.

header

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.

header

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.

header

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.

header

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.

header

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.

header header header

Fixed Left Menu Sidebar

header

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.

header

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

header

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. header

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.

header

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.

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.