Header Customization

Home > All Categories > Navigation Menu

Header Customization

Documentation and example of how and what are the full header customization options.

Customizations can change the colors and fonts and adjust the fill and margin of the navigation header, giving it the required modern look.


To customize the header.

Go to "Panel" > "Layout" > "Theme Designer" > "Advanced" > and select "◑ Header":

For advanced setting

Go to "Panel" > "Layout" > "Theme Designer" > "Advanced" > and select "┗ Header Setting":

Header

The "Background Color", assign the navigation header a colored background.

The "Bottom border color" assigns the color to the "Bottom Border", provided, to the navigation header.

The "Box Shadow Color", assigns a shadow color to the main navigation header.

The "Icon Color", assign a color to the header icons ( subscribe icon, search, back button ).

The "Sticky Background Color", assign a "background color", to the header, when pasted on top.

The "Sticky Box Shadows Color", when the header is pasted on top, the color is applied to the shadow on the bottom of the header.

The "Title Font", you can change the "font", "The font size", etc. of the title that comes out, when no logo is applied.

The "Title Color", changes the color of the title.

The "Text Font", you can change the "font", "size", etc. From the text that appears below the title, when there is no logo applied.

The "Text Color", can change the color of the text.

Header Setting

With "vertical padding", "top and bottom" spacing is applied, expanding the menu vertically and centering the content of the navigation header

With "Bottom border", assign a "thickness value" at the bottom of the navigation header.

Asigne los "valores", deseados para aplicar la "sombra", del encabezado de navegación.

Box Shadows - The Horizontal

Box Shadows - Vertical

Box Shadows - Blur Radius

Box Shadows - Spread Radius

As shown in the image, it is not activated, it does not have the values ​​set to show the shadow, you can configure it whenever you want.

Asigne los "valores" deseados para aplicar la "sombra pegajoso", al encabezado de navegación.

Sticky - Box Shadows - Horizontal

Sticky - Box Shadows - Vertical

Sticky - Box Shadows - Blur Radius

Sticky - Box Shadows - Spread Radius



Header - Navigation Menu

The "List - Font" changes the "Font", "Size", "Bold", "Italic", of the list menu navigation.

The "List - Color", assign the color of the menu navigation list.

The "List folded - Font" changes the "Font", "Size", "Bold", "Italic", of the "collapsible submenu", of the menu.

The "List folded - color", assign the color to the "foldable submenu" of the menu navigation list.

The "List folded - background color", assign the background color of the "collapsible submenu", from the menu navigation list.

The "List folded - border Color", assign a border color to the "collapsible submenu", of the menu.

In the "List folded - Box Shadows Color", assign the shadow color that appears in the "collapsible submenu", of the menu navigation list.


New: Movil Version

New: The "(Movil) Background Color", Assign a color to the menu navigation collapsible body.

New: The "(Movil) List - color", Assign a color to the menu navigation list.

New: The "(Movil) List folded - color", Assign a color to the menu navigation list folded.

New: The "(Movil) List folded - background color", Assign a background color to body menu navigation list folded.

New: The "(Movil) Icon color", Assign a color to the navigation menu icon.

New: The "(Movil) Icon close Color", Assign a color to the close icon of the navigation menu.

New: The "List folded - Border Radius", Assign an 'Border Radius' to the body of the folded navigation menu.

Header Setting - Navigation Menu

The "List folded - border color" assigns a value to the size of the border.

Assign the desired "values" to apply the "shadow" to the "collapsible menu" in the navigation header.

List folded - Box Shadows - The Horizontal

List folded - Box Shadows - Vertical

List folded - Box Shadows - Blur Radius

List folded - Box Shadows - Spread Radius



Header - Header Bar Right

The "Social Icons - Color", assign a color to the "social icon". they are placed with the "HTML/JavaScript" gadget/widget.

The "Social Icons - background color", assign a background color to the "social icons". they are placed with the "HTML / JavaScript" gadget / widget.

In the "Social - Border Color", assign the border color to the social icon. You can choose to swap the background for the border or invert it, if you wish.

The option "Button Font" In the header options you will find this option which consists of changing the font size of the button that is displayed in the "Header Bar Right".

Header Setting - Header Bar Right

These two options are found in the header settings to change the width and height of the buttons on the right bar of the header "Header Bar Right".

Button - Vertical Padding

Button - Horizontal Padding



Header - TopBar

The "TopBar - Background Color", give the top bar a colored background.

The "TopBar - Title Font", you can change the "font", "The font size", of the title.

The "TopBar - Title Color", changes the color of the title.

The "TopBar - Text Font", you can change the "font", the "size" of the text you want to display.

The "TopBar - Text Color", can change the color of the text.

The "TopBar - List Font", change the "font" of the menu navigation list. which is placed with the "Link List" gadget/widget.

The "TopBar - List Color", change the "color" of the menu navigation list. which is placed with the "Link List" gadget / widget.

The "TopBar Social Icons - Color", assign a color to the "social icon". they are placed with the "HTML/JavaScript" gadget/widget.

The "TopBar Social Icons - background color", assign a background color to the "social icons". they are placed with the "HTML / JavaScript" gadget / widget.

In the "TopBar Social - Border Color", assign the border color to the social icon. You can choose to swap the background for the border or invert it, if you wish.