Lava

Header

Header Style

Header Style 1
Header Style 2
Header Style 3
Header Style 4

Lava currently offer 4 header styles, follow the steps below to change your header style.

  1. Go to Appearance > Customize > Header section
  2. Select your header style under Header Style
  3. Click Save button

Logo & Favicon

To be retina friendly, 2 versions of logo is needed. First the normal size and the second exactly double the height and width of the normal one.

Small Logo – an alternative logo used on mobile screen or when the header is in sticky state. If small logo is not set, main logo will be used instead.

How to Upload A Logo

  1. Go to Appearance > Customize > Site Identity section
  2. Upload your logo under Logo
  3. Upload your Retina logo (2x size) under Retina Logo
  4. Upload your Nav/Mobile logo under Small Logo
  5. Upload your Nav/Mobile Retina logo (2x size) under Small Retina Logo
  6. Click Save button

How to Upload A Favicon

  1. Go to Appearance > Customize > Site Identity section
  2. Upload your favicon under Site Icon
  3. Click Save button

Navigation / Menu Setup

Lava theme uses standard WordPress menu system for navigation. To setup your menu, go to Appearance > Menus page.

There are 4 theme locations to assign your menus:

  • Main Menu – navigation menu for header style 1
  • Fullscreen Menu – navigation menu for header style 2 and header style 1 on small screen

How To Setup A New Menu

  1. Go to Appearance > Menus page.
  2. Click the Create A New Menu link to make a new menu. Enter the name then click the Create Menu button.
  3. To add a menu item, select one of your created pages on the left hand side and click the Add to Menu button. You can also add all kinds of different posts from the left side.
  4. To add a custom menu item, enter a custom name and link into the Links.
  5. Manage your menus by using the drag and drop functionality. To create a dropdown menu, simply drag a menu item below and slightly to the right of another menu item, and it will lock into place and create a dropdown section.
  6. After setting up your menu, scroll down to the bottom of the page to assign the menu to one of the 2 locations in the Theme Locations box.
  7. Once its all done, make sure you click the Save button.

How To Setup A Mega Menu

  1. Add your menu items to the menu and arrange them in 3 levels. See the screenshot below.
  2. On the first level menu item, check Enable Mega Menu option.
  3. Set Mega Menu Width in columns, each columns equals 220px in width. For full width menu simply select 8 columns.
  4. On the second level, set Column Width relative to the menu width. e.g. 1/2 is the same as 50% of menu width.
  5. Second level menu items also act as the column titles, hide the title by checking the Hide Text option.
  6. Third level is where you put most of your mega menu items.
  7. Alternatively you could also assign a Widget Area to a menu item, so it can display widget content as drop down.
  8. Once its all done, make sure you click the Save button.

Enable Mega Menu

Add Menu Icon to Menu Item

You could either use icon font or an image as menu icon.

  • To use an icon font, simply enter the icon name in the Menu Icon field. Here’s a list of icons available for use: Material Icons
  • To use an image icon, click on the Set Image Icon button to upload your image.

Enable Call To Action (CTA) button & Search button on Navbar

CTA button only show on Header Style 2 and Header Style 4. Both of the buttons can be edited in Appearance > Customize > Header section.