Header Builder

You are here:
In this article

Header Builder

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

GO TO > WP Admin > CodibuTheme > Install Plugins

Quick Tip!

Partially disabled theme options

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

i class=”fas fa-info”>

Before we start

  • Where can you install the Codibu 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? Codibu 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 depend on the Codibu Header Builder customizations
  • The different menus on a 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 Codibu Header Builder!
The whole plugin is made to be the most customer friendly; you got here a few buttons, switches, and 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 Codibu Header Builder and hit the save button.
That’s it, you just created your first basic menu!

Menu without a logo? No way!

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

How does 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 Codibu 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

Codibu Header Builder gives you the opportunity to use other content in the 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 item 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 the 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 Codibu Header Builder container here you will notice a bunch of settings

  • LayoutChoose between the full width or wrapped into the grid header type
  • Background colorSelect the background color of the header
  • Background ImageUpload an image as a background.
    You can also select a position and size of a background.
  • Header layered on top of contentDecide if your header has to be layered on top of the content

Rows

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

  • HeightProvide the height (in pixels) of the row
  • Background ColorSelect the background color of the row

Items

General

  • LogoUpload an image for a logo
  • Retina LogoUpload an image (2 times larger than a regular logo) for a retina logo
  • HeightProvide the height (in pixels) of the logo
  • OptionsHere you can turn on/off the “Overflow Logo” – this option allows you to cross the height value of the row(or header) container and overflow through the row(or header)

Menu

General

  • MenuSelect 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 IconHere you can set when your logo changes to a hamburger menu
  • Options
    Several 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 the last two items to the right – if your menu has a lot of submenus, it will bring the last two items to the right.
    It’s usually used to prevent 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 | FontChoose between various fonts which should be used in the menu
  • Menu | Link colorSelect the color for links in the menu
  • Menu | Hover link colorSelect the hover color for links in the menu
  • Menu | Active link colorSelect the active link color for a link in the menu
  • Submenu | Background colorSelect the background color of the submenu
  • Submenu | Link colorSelect the color of the links in the submenu
  • Submenu | Hover link colorSelect the color of the hover links in the submenu
  • Submenu | Active link colorSelect the color of the active links in the submenu

Extras

General

  • Search | StyleChoose how the search field style should be displayed
  • Search | SearchSelect if search functionality should work on the whole page or for Woocommerce only
  • Shop | IconAn icon for a shop page
  • WPML | StyleSelect the style of WPML language switcher
  • WPML | StyleArrangement of the languages in the language switcher

Style

  • Icon/text colorSelect the color which will be used in the text and icon
  • Hover colorSelect the hover color for text and icon

Social Icon

General

    • Icons ListChoose and provide the URL for socials; you can select them as much as you want
    • Open Links In New WindowTurn ON/OFF the “_blank” attribute on links in social icons

Style

  • Icon colorSelect the color which will be used in the icon
  • Hover colorSelect the hover color for the icon

Text

General

  • TextProvide the text for this element

Style

  • Menu | Text colorSelect the color for a text
  • Menu | Link colorSelect the link color for a links
  • Menu | Hover link colorSelect the hover link color for a links

Image

General

  • image you can upload an image here
  • LinkIf image will be linked, provide a URL where it should redirect
  • Link TargetSelect the target for a link; you can set it to lightbox too
  • Link ClassProvide, the additional class for an image

Icon

General

  • IconSelect the icon for this item to display
  • LinkProvide the URL where it should redirect
  • Link TargetSelect the target for a link; you can set it to lightbox too
  • Link ClassProvide the additional class for an icon

Style

  • Icon colorSelect the color for an icon
  • Hover icon colorSelect the hover color for an icon

Button

General

  • TitleInsert the text which will be displayed inside the button
  • LinkProvide the URL where it should redirect
  • Link TargetSelect the target for a link; you can set it to lightbox too
  • Link ClassProvide the additional class for an icon

Style

  • Text colorSelect the color for the text
  • Button colorSelect the background color for the button
  • Hover text colorSelect the hover color for the button text
  • Hover button colorSelect the hover color for the button
 
 

 

Was this article helpful?
Dislike 0
Views: 40