Menu above built with this plugin including Mega Menu.

Header Bar

Header Bar

Menu Customization - Header Bar

Menu Customization – Header Bar

Header Bar is the fourth Menu Customization option that you will find while customizing your Responsive Menu. It further consists of four header bar items and three sub menu options

A header bar is a significant part of a website and without it, a website looks incomplete. It is a common horizontal element which is placed at the top of windows.

Its Customization consists of header bar items like Title, Search, HTML Content, and Logo. And the other three sub menu items let you enable the header bar and manage its appearance and set breakpoints.

 

1. Header Bar Items

Header Bar Items

Header Bar Items

Header Bar – Title

Header Bar Title

Header Bar Title

  • Title – This input field lets you set the title text to be used in the header bar

 

Header Bar – Search

Header Bar Search

Header Bar Search

  • Search – If enabled it lets you display a search bar on the header bar

 

Header Bar – HTML Content 

Header Bar - HTML Content

Header Bar – HTML Content

  • Additional Contents – If enabled, this option lets you add any custom HTML code, shortcodes, text, social media information, shopping cart information on the header bar

 

Header Bar – Logo

Header Bar - Logo

Header Bar – Logo

  • Image – This option lets you add your custom logo image using this field. It is always a best practice to add logo images with png extensions on the header bar
  • Target Link – This option lets you set a targeted link on the logo image. The URL you put in this field will take the user to that specific page whenever he clicks on the logo image. Generally, homepage hyperlink is put in this field
  • Image Width – Lets you set width of the logo image in pixels(px), percentage(%), emphasize(em), root em(rem), viewport width(vw), viewport height(vh) units
  • Image Height – Lets you set height of the logo image in pixels(px), percentage(%), emphasize(em), root em(rem), viewport width(vw), viewport height(vh) units

 

2. Enable Header Bar

Enable Header Bar

Enable Header Bar

  • Enabled – Enabling this option will show a header bar on the website. All the styling options you apply to the header bar will not show unless this option is enabled.

 

3. Appearance

Header Bar - Appearence

Header Bar – Appearance

  • Height – Lets you set height of the header bar in pixels(px), percentage(%), emphasize(em), root em(rem), viewport width(vw), viewport height(vh) units
  • Font Family -Lets you set the font for the header bar text. The specified font must be installed in your WordPress theme.
  • Font Size – Lets you set the font size of the text on the header bar in pixels(px), percentage(%), emphasize(em), root em(rem), viewport width(vw), viewport height(vh) units
  • Text Color – Lets you set the text color of the header bar text to any color of your choice using the color picker
  • Background Color – Lets you set the text background color of the header bar text to any color of your choice using the color picker

 

4. Advance Settings

Header Bar - Advance Settings

Header Bar – Advance Settings

  • Breakpoint –  Lets you specify the width of the screen in pixels at which you would like the header bar to start showing up.
  • Positioning – This option lets you set the positioning of the header bar. The dropdown offers you 3 different options on how you want to display the header bar when the user scrolls down the page. With Fixed positioning, the header bar will stay in place as you scroll down the page. With Absolute positioning, the header bar will disappear as you scroll down the page. With Relative positioning, the header bar will stay in a specific position on the page. Relative Positioning is useful when used with the shortcode.
  • Adjust Page – Enabling this option will bring down the webpage’s content and align it with the header bar. By default, the option is turned off. So, You might experience that your header bar is covering the website’s content with this option disabled.