Knowledgebase

Header Builder

Header Builder

The Header Builder plugin will allow you to tailor any header you desire.

GO TO WP Admin > BeTheme > Install Plugins
QUICK TIP!

Partially disabled theme options

Once you activate the plugin, many of the theme options related with the header will be inactive. You need to set those things in the Header Builder plugin.
 
 

Before we start

  • Where can you install the Muffin Header Builder?

    It's in the same location as all of the bundled plugins, there you can download and install it.

  • Did you create your menu?

    Muffin Header Builder uses the same menu as the basic WordPress, so if you didn't make it yet, or don't know how to create a menu, please head to this topic

  • What happens with the theme options?

    All of the options related to the header and menu will be hidden and disabled - we did it to make it more understandable for customers, that all of the settings depends on the Muffin Header Builder customizations

  • Different menu on certain page

    Sadly, this functionality is not available - that's the only limitation of that tool.
    So, we suggest using that plugin only when your website will have only the same menu between the pages.

Create your first header

Welcome to the world of the Muffin Header Builder!
Whole plugin is made to be the most customer friendly, you got here few buttons, switches, a lot of drag and drop items.

Let's start building!

So, scroll to the container with the items on the bottom of the page and push the item to the center of Muffin Header Builder and hit the save button.
That's it, you just created your first, basic menu!

Menu without logo? No way!

How to insert a logo? Precisely like the menu from the previous step, find the "Logo" item from items list, drag and drop it into the Muffin Header Builder.

How the system know, which image is my logo?

It does not, you have to get into the settings of that item, just hover the item inside the Muffin Header Builder and you will notice the pencil and "X" icon above it, click the pencil icon and there you will be able to add the image for your logo

Header types

Muffin Header Builder gives you opportunity for using another content in Header for each device, including desktop, tablet and mobile!

  • Switch between devices

    Every device can have other header items inside, to change the type of device, please click one of the three buttons above the header container

  • Another items inside per device

    It's easier than you think, all you have to do is switch to "Custom" mode - if you want to keep the content from desktop just leave the "Auto" mode

Sticky Header

Click the "Sticky" button and you will be able to create another (even with other items inside) header.

Action Bar & Second Row

To turn them on/off, click the toggle button.
It will extend your header even to be three-rowed!

Header & Rows settings

Edit the header settings

Click on the pencil icon on the bar of the Muffin Header Builder container, here you will notice a bunch of settings

  • Layout

    Choose between the full width or wrapped into the grid header type

  • Background color

    Select the background color of the header

  • Background Image

    Upload an image as a background.
    You can also select a positions and size of a background.

  • Header layered on top of content

    Decide, if your header have to be layered on the top of the content

Rows

Rows are inside the header, all of the settings of them are the same.
Which rows you can use? Action Bar, Menu bar, and Second Row

  • Height

    Provide the height (in pixels) of the row

  • Background Color

    Select the background color of the row

Items

General

  • Logo

    Upload an image for a logo

  • Retina Logo

    Upload an image (2 times larger than regular logo) for a retina logo

  • Height

    Provide the height (in pixels) of the logo

  • Options

    Here you can turn on/off the "Overflow Logo" - this option allows to cross the height value of row(or header) container and overflow through the row(or header)

Menu

General

  • Menu

    Select the menu which you created in wordpress, if you didn't make it yet, or don't know how to create a menu, please head to this topic

  • Replace with Menu Icon

    Here you can set when your logo will change to a hamburger menu

  • OptionsSeveral options for a menu:
  • Borders between items - as the name says, display border between menu items
  • Arrows for items with submenu - show arrows on the end of the name for menu items which are the submenus
  • Fold submenus for last 2 items to right - if your menu has a lot of submenus, it will bring last two items to the right.
    It's usually used for preventing overlapping the menu outside the screen

Style

All options here will be dedicated to the fonts, or the colors inside the menu and submenu

  • Menu | Font

    Choose between various fonts which should be used in the menu

  • Menu | Link color

    Select the color for a links in the menu

  • Menu | Hover link color

    Select the hover color for a links in the menu

  • Menu | Active link color

    Select the active link color for a link in the menu

  • Submenu | Background color

    Select the background color of the submenu

  • Submenu | Link color

    Select the color of the links in the submenu

  • Submenu | Hover link color

    Select the color of the hover links in the submenu

  • Submenu | Active link color

    Select the color of the active links in the submenu

Extras

General

  • Search | Style

    Choose how the search field style should be displayed

  • Search | Search

    Select if search functionality should work on whole page or for woocommerce only

  • Shop | Icon

    An icon for a shop page

  • WPML | Style

    Select the style of WPML language switcher

  • WPML | Style

    Arrangement of the languages in language switcher

Style

  • Icon/text color

    Select the color which will be used in text and icon

  • Hover color

    Select the hover color for text and icon

Social Icon

General

    • Icons List

      Choose and provide the URL for socials, you can select them as much as you want

    • Open Links In New Window

      Turn ON/OFF the "_blank" attribute on links in social icons

Style

  • Icon color

    Select the color which will be used in the icon

  • Hover color

    Select the hover color for the icon

Text

General

  • Text

    Provide the text for this element

Style

  • Menu | Text color

    Select the color for a text

  • Menu | Link color

    Select the link color for a links

  • Menu | Hover link color

    Select the hover link color for a links

Image

General

  • Image

    You can upload an image here

  • Link

    If image will be linked, provide a URL where it should redirect

  • Link Target

    Select the target for a link, you can set it to lightbox too

  • Link Class

    Provide the additional class for an image

Icon

General

  • Icon

    Select the icon for this item to display

  • Link

    Provide the URL where it should redirect

  • Link Target

    Select the target for a link, you can set it to lightbox too

  • Link Class

    Provide the additional class for an icon

Style

  • Icon color

    Select the color for an icon

  • Hover icon color

    Select the hover color for an icon

Button

General

  • Title

    Insert the text which will be displayed inside the button

  • Link

    Provide the URL where it should redirect

  • Link Target

    Select the target for a link, you can set it to lightbox too

  • Link Class

    Provide the additional class for an icon

Style

  • Text color

    Select the color for the text

  • Button color

    Select the background color for the button

  • Hover text color

    Select the hover color for the button text

  • Hover button color

    Select the hover color for the button

  • Header Builder
  • 0 Users Found This Useful
Was this answer helpful?

Related Articles

Supported Plugins

Supported Plugins BeTheme works without any problems with the following plugins:...

Static CSS

Some changes in Theme Options are saved as CSS and inserted into the head of your website. You...