Creating a Header Bar

With Responsive Menu Pro, you can not only style menu container or a menu button but also a header bar. A header bar is the significant part of a website and without it, a website looks incomplete.

Initial Setup

Enabled: Turning this on will show a header bar on the website. All the styling options you apply on the header bar will not show unless this option is enabled. Positioning: 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. Breakpoint: This is the width of the screen in pixels at which you would like the header bar to start showing. Set it to ‘80000 px’ if you want to display it on all the screens.

Ordering

Order of Header Bar Items: This section allows you to drag the header bar items left and right to re-order so that you can decide how they appear on the front end. You can also click to turn them on or off. You can add/remove a Logo, Title, Search Bar and HTML content as per your choice.

Logo

Image: You can add your logo image using this field. It is always a best practice to add logo images with png extensions. Height: Sets height of the logo image in pixels(px), emphasize(em), root em(rem), viewport width(VW), viewport height(VH). Width: Sets width of the logo image in pixels(px), emphasize(em), root em(rem), viewport width(VW), viewport height(VH). Alt Text: Set the alt text for the logo image using this input field. Link: 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.

Title

Text: The input field sets the title text to be used in the header bar.

Content

HTML Content: You can add any custom HTML content, shortcodes, text, social media information, shopping cart information using this section.

Text

Font: Sets the font for the header bar text. The specified font must be installed in your WordPress theme. Font Size: Sets the font size of the text in the header bar in the pixels(px), emphasize(em), root em(rem), viewport width(VW), viewport height(VH) units.

Sizing

Height: Sets height of the header bar in pixels(px), emphasize(em), root em(rem), viewport width(VW), viewport height(VH). 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.

Colours

Background: Sets the background colour of the header bar. Takes a hex code or rgba() value to specify the colour. Text: Sets the colour of the header bar text. Also takes a hex code or rgba() value to specify the colour.