{"id":79,"date":"2019-11-26T00:51:54","date_gmt":"2019-11-26T00:51:54","guid":{"rendered":"http:\/\/dev.wp.dnngo.net\/doc\/?page_id=79"},"modified":"2022-01-24T13:43:36","modified_gmt":"2022-01-24T13:43:36","slug":"header-layouts","status":"publish","type":"page","link":"https:\/\/doc.dnngo.com\/glend\/theme-plugin-pro\/layout\/header-layouts\/","title":{"rendered":"Header Layouts"},"content":{"rendered":"

[vc_row][vc_column][vc_column_text]This theme includes all the header layouts used in the demo site, you can edit them, and also create your own layouts.<\/p>\n

Reminder<\/span> Since browser cache exists, your page probably won\u2019t display the setting result properly after saving. Therefore, you need to press Ctrl+F5 to refresh your page.[\/vc_column_text]

<\/div>[vc_single_image image=”1127″ img_size=”full” style=”vc_box_shadow”]
<\/div>

9 Grids Area<\/h3>[vc_column_text]We divide the header in 3 rows, every row has 3 columns. You can add controls to every row.[\/vc_column_text]
<\/div>[vc_single_image image=”133″ img_size=”full” style=”vc_box_shadow”]
<\/div>

Header Settings<\/h3>[vc_column_text]Clicking the edit icon can go to the header settings interface.[\/vc_column_text]
<\/div>[vc_single_image image=”135″ img_size=”full” style=”vc_box_shadow”]
<\/div>
Header Position<\/h6>[vc_column_text]Set whether to float the header above banner or page title.[\/vc_column_text]
<\/div>
Sticky Header<\/h6>[vc_column_text]When you scroll down the page, header will remain fixed at the top of the page.[\/vc_column_text]
<\/div>
Sticky Header Type<\/h6>[vc_column_text]Set the display style of Sticky Header.[\/vc_column_text]
<\/div>

Header (Top Middle Bottom) Settings<\/h3>[vc_column_text]By default, header top and header bottom are hidden. You need to click the eye icon to enable these 2 areas, you can also click the edit button to set these areas.[\/vc_column_text]
<\/div>[vc_single_image image=”137″ img_size=”full” style=”vc_box_shadow”]
<\/div>
General<\/h6>[vc_column_text]Row Height (px)<\/strong> – Set the height of the header area.[\/vc_column_text]
<\/div>[vc_column_text]Layout<\/strong> – Set the width of the header content area. It can be set to full width or fixed width.[\/vc_column_text]
<\/div>[vc_column_text]Area Space (px):<\/strong> – Set the spacing between the left, middle and right columns.[\/vc_column_text]
<\/div>[vc_column_text]Distance Between Controls (px):<\/strong> – Set the distance between the controls of column area.[\/vc_column_text]
<\/div>[vc_column_text]Split Line Between Grids<\/strong> – Set whether to display the split line between every grid.[\/vc_column_text]
<\/div>[vc_single_image image=”1053″ img_size=”full” style=”vc_box_shadow”]
<\/div>[vc_column_text]Bottom Line<\/strong> – Set whether to display the split line at the bottom of every area.[\/vc_column_text]
<\/div>[vc_single_image image=”1054″ img_size=”full” style=”vc_box_shadow”]
<\/div>[vc_column_text]Display Shadow<\/strong> – Set whether to display the gray shadow at the bottom of every area.[\/vc_column_text]
<\/div>[vc_single_image image=”1057″ img_size=”full” style=”vc_box_shadow”]
<\/div>[vc_column_text]Accent Color<\/strong> – Set the accent color of every area. In general, it means the color when you hover or click the controls.[\/vc_column_text]
<\/div>[vc_single_image image=”1058″ img_size=”full” style=”vc_box_shadow”]
<\/div>[vc_column_text]Extra class name<\/strong> – Extra CSS can be added to every area.[\/vc_column_text]
<\/div>
Background Settings<\/h6>[vc_column_text]You can set the background color and background image for the header area.[\/vc_column_text]
<\/div>[vc_single_image image=”1059″ img_size=”full” style=”vc_box_shadow”]
<\/div>
Typography<\/h6>[vc_column_text]You can set the text style of the header area. Such as: text size, color, font family and etc.[\/vc_column_text]
<\/div>[vc_single_image image=”145″ img_size=”full” style=”vc_box_shadow”]
<\/div>
Sticky Header<\/h6>[vc_column_text]You can set whether to display the header area in Sticky Header individually, as well as the style of the Sticky Header.[\/vc_column_text]
<\/div>[vc_single_image image=”146″ img_size=”full” style=”vc_box_shadow”]
<\/div>

Header Column Settings<\/h3>

General<\/h6>[vc_column_text]Column width<\/strong> – Set the width of columns.[\/vc_column_text]
<\/div>[vc_column_text]Arrangement<\/strong> – Set the arrangement between the controls, vertical display or horizontal display.[\/vc_column_text]
<\/div>[vc_column_text]Text Align<\/strong> – Set how to align text.[\/vc_column_text]
<\/div>
Background Settings<\/h6>[vc_column_text]You can set the background color and background image for columns.[\/vc_column_text]
<\/div>

Mobile Header Settings<\/h3>[vc_column_text]Click the mobile icon to switch to the setting interface of mobile header layout. The mobile header is divided into left, middle and right 3 areas. You can add controls and panes to the areas separately.[\/vc_column_text]
<\/div>[vc_single_image image=”148″ img_size=”full” style=”vc_box_shadow”]
<\/div>

Controls<\/h3>[vc_column_text]The controls are some modules we customized, you can drag them to wherever you want.[\/vc_column_text]
<\/div>[vc_single_image image=”150″ img_size=”full” style=”vc_box_shadow”]
<\/div>[vc_column_text]You can go to the setting interface of all controls by clicking the edit button beside them.[\/vc_column_text]
<\/div>[vc_single_image image=”151″ img_size=”full” style=”vc_box_shadow”]
<\/div>

Logo<\/h3>[vc_column_text]Use the logo control, you can display the logo image in header.[\/vc_column_text]
<\/div>[vc_single_image image=”1061″ img_size=”full” style=”vc_box_shadow”]
<\/div>[vc_column_text]There are 2 areas included in the setting interface of the logo, one is the settings for the main logo and the other is the settings for the sticky header logo.[\/vc_column_text]
<\/div>[vc_single_image image=”153″ img_size=”full” style=”vc_box_shadow”]
<\/div>
Main Logo<\/h6>[vc_column_text]Source<\/strong> – Set the source of the logo image comes from the DNN site logo or the custom logo. The DNN site logo needs to be set in admin > site settings.[\/vc_column_text]
<\/div>[vc_column_text]Logo URL<\/strong> – Set the custom logo image.[\/vc_column_text]
<\/div>[vc_column_text]High-DPI (retina) Logo URL<\/strong> – Set the logo image on HD screens, there has to be a -2x suffix at the end of the image name. Such as: logo-d-2x.png[\/vc_column_text]
<\/div>[vc_column_text]Max Width<\/strong> – The maximum width of the logo.[\/vc_column_text]
<\/div>[vc_column_text]Max Height<\/strong> – The maximum height of the logo.[\/vc_column_text]
<\/div>
Sticky Header Logo<\/h6>[vc_column_text]Source<\/strong> – Set the source of the logo image.[\/vc_column_text]
<\/div>[\/vc_column][\/vc_row][vc_row][vc_column]

Horizontal Menu<\/h3>[vc_column_text]With the Horizontal Menu control, you can display menu in the header.[\/vc_column_text]
<\/div>[vc_single_image image=”1139″ img_size=”full” style=”vc_box_shadow”]
<\/div>[vc_column_text]There are 3 areas included in the setting interface of the Horizontal menu, one is the settings of the main menu, one is the settings of the flyout menu, and the other is the settings of the mega menu.[\/vc_column_text]
<\/div>[vc_single_image image=”1164″ img_size=”full” style=”vc_box_shadow”]
<\/div>
Main Menu<\/h6>[vc_column_text]Menu Typography<\/strong> – It can set the text style of the 1st level menus. Such as: text size, color, font family and etc.[\/vc_column_text]
<\/div>[vc_column_text]Menu Item Spacing<\/strong> – Set the spacing between items at up, down, left and right.[\/vc_column_text]
<\/div>[vc_single_image image=”1063″ img_size=”full” style=”vc_box_shadow”]
<\/div>[vc_column_text]Menu Hover Style<\/strong> – Set the appearance style of the menu when hovering it, there are 4 styles can be chosen from.[\/vc_column_text]
<\/div>[vc_single_image image=”1166″ img_size=”full” style=”vc_box_shadow”]
<\/div>[vc_column_text]Menu Item Hover Font Color<\/strong> – Set the text color of the menu when hovering it.[\/vc_column_text]
<\/div>[vc_column_text]Menu Item Hover Accent Color<\/strong> – Set the accent color of the menu when hovering it.[\/vc_column_text]
<\/div>[vc_column_text]Menu Item Border-radius<\/strong> – Set the border radius of the menu items.[\/vc_column_text]
<\/div>[vc_column_text]Display Middle Logo<\/strong> – Set whether to display the logo at the middle of menus.[\/vc_column_text]
<\/div>[vc_single_image image=”1067″ img_size=”full” style=”vc_box_shadow”]
<\/div>
Flyout Menu<\/h6>[vc_column_text]Menu Typography<\/strong> – You can set the text style of the pop up menu.[\/vc_column_text]
<\/div>[vc_single_image image=”1069″ img_size=”full” style=”vc_box_shadow”]
<\/div>[vc_column_text]Display Shadow<\/strong> – Set whether to display shadow.[\/vc_column_text]
<\/div>[vc_single_image image=”1071″ img_size=”full” style=”vc_box_shadow”]
<\/div>[vc_column_text]Background<\/strong> – Set the background of sub menus.[\/vc_column_text]
<\/div>
Mega Menu<\/h6>[vc_column_text]Menu Typography<\/strong> – Set the text style of the mega menu.[\/vc_column_text]
<\/div>[vc_single_image image=”1073″ img_size=”full” style=”vc_box_shadow”]
<\/div>[vc_column_text]Menu Title Typography<\/strong> – Set the text style of the title.[\/vc_column_text]
<\/div>[vc_single_image image=”1075″ img_size=”full” style=”vc_box_shadow”]
<\/div>[vc_column_text]Display Shadow<\/strong> – Set whether to display shadow.[\/vc_column_text]
<\/div>[vc_single_image image=”1077″ img_size=”full” style=”vc_box_shadow”]
<\/div>[vc_column_text]Line Color<\/strong> – Set the color of the vertical split line.[\/vc_column_text]
<\/div>[\/vc_column][\/vc_row][vc_row][vc_column]

Login User<\/h3>[vc_column_text]With the Login User control, you can display the login and register links in header.[\/vc_column_text]
<\/div>[vc_single_image image=”1080″ img_size=”full” style=”vc_box_shadow”]
<\/div>[vc_column_text]The text color of the login user can be set in Header Settings > Typography.[\/vc_column_text]
<\/div>[\/vc_column][\/vc_row][vc_row][vc_column]

Language<\/h3>[vc_column_text]With the Language control, you can display the language selector in header.[\/vc_column_text]
<\/div>[vc_single_image image=”1145″ img_size=”full” style=”vc_box_shadow”]
<\/div>[vc_column_text]There are 7 types in total, as follows:[\/vc_column_text]
<\/div>[vc_column_text]Display Name:[\/vc_column_text]
<\/div>[vc_single_image image=”1147″ img_size=”full” style=”vc_box_shadow”]
<\/div>[vc_column_text]English Name:[\/vc_column_text]
<\/div>[vc_single_image image=”1149″ img_size=”full” style=”vc_box_shadow”]
<\/div>[vc_column_text]Name:[\/vc_column_text]
<\/div>[vc_single_image image=”1151″ img_size=”full” style=”vc_box_shadow”]
<\/div>[vc_column_text]Native Name:[\/vc_column_text]
<\/div>[vc_single_image image=”1153″ img_size=”full” style=”vc_box_shadow”]
<\/div>[vc_column_text]Two Letter:[\/vc_column_text]
<\/div>[vc_single_image image=”1155″ img_size=”full” style=”vc_box_shadow”]
<\/div>[vc_column_text]Three Letter:[\/vc_column_text]
<\/div>[vc_single_image image=”1156″ img_size=”full” style=”vc_box_shadow”]
<\/div>[vc_column_text]Flags:[\/vc_column_text]
<\/div>[vc_single_image image=”1157″ img_size=”full” style=”vc_box_shadow”]
<\/div>[\/vc_column][\/vc_row][vc_row][vc_column]

Google Translate<\/h3>[vc_column_text]With the Google Translate control, you can display the language selector in header. Users can translate text in a page with the control.[\/vc_column_text]
<\/div>[vc_single_image image=”1160″ img_size=”full” style=”vc_box_shadow”]
<\/div>[vc_column_text]Default Language Text<\/strong>\u00a0\u2013 Set the default language.[\/vc_column_text]
<\/div>[vc_column_text]Google Translate Language<\/strong>\u00a0\u2013 You can add language options for the control.[\/vc_column_text]
<\/div>[vc_column_text]Reminder<\/span> In the edit mode, the control will not be available.[\/vc_column_text]
<\/div>[\/vc_column][\/vc_row][vc_row][vc_column]

Search<\/h3>[vc_column_text]With the search control, you can display the search input box in header.[\/vc_column_text]
<\/div>[vc_column_text]Placeholder<\/strong> – The default text of the search box.[\/vc_column_text]
<\/div>[vc_column_text]Style<\/strong> – Set the style of the search panel.[\/vc_column_text]
<\/div>[vc_column_text]Accent Color<\/strong> – Accent color.[\/vc_column_text]
<\/div>[\/vc_column][\/vc_row][vc_row][vc_column]

Vertical Separator Line<\/h3>[vc_column_text]With Vertical Separator Line control, you can display the vertical split line in header.[\/vc_column_text]
<\/div>[vc_single_image image=”1161″ img_size=”full” style=”vc_box_shadow”]
<\/div>[vc_column_text]The color of the Vertical separator line control can be set in Header Settings > Typography.[\/vc_column_text]
<\/div>[\/vc_column][\/vc_row][vc_row][vc_column]

Text Box<\/h3>[vc_column_text]With Text Box control, you can input text or HTML code.[\/vc_column_text]
<\/div>[vc_single_image image=”1162″ img_size=”full” style=”vc_box_shadow”]
<\/div>[vc_column_text]Text Box<\/strong> – The area of editing code.[\/vc_column_text]
<\/div>[vc_single_image image=”181″ img_size=”full” style=”vc_box_shadow”]
<\/div>[\/vc_column][\/vc_row][vc_row][vc_column]

Mobile Menu<\/h3>[vc_column_text]The Mobile Menu control belongs to the controls of the mobile header.[\/vc_column_text]
<\/div>[vc_single_image image=”183″ img_size=”full” style=”vc_box_shadow”]
<\/div>[vc_column_text]Clicking the nav icon of the mobile menu can pop up the menu.[\/vc_column_text]
<\/div>[vc_single_image image=”1082″ img_size=”full” style=”vc_box_shadow”]
<\/div>[vc_column_text]Level 1 Menu Typography<\/strong> – Set the text style of level 1 menu.[\/vc_column_text]
<\/div>[vc_column_text]Level 2 Menu Typography<\/strong> – Set the text style of level 2 menu.[\/vc_column_text]
<\/div>[vc_column_text]Level 3 Menu Typography<\/strong> – Set the text style of level 3 menu.[\/vc_column_text]
<\/div>[vc_column_text]Current Color<\/strong> – Set the text color of the current menu item.[\/vc_column_text][\/vc_column][\/vc_row]<\/p>\n","protected":false},"excerpt":{"rendered":"

[vc_row][vc_column][vc_column_text]This theme includes all the header layouts used in the demo site, you can edit them, and also create your own layouts. Reminder Since browser cache exists, your page probably won\u2019t display the setting result properly after saving. Therefore, you need to press Ctrl+F5 to refresh your page.[\/vc_column_text][vc_single_image image=”1127″ img_size=”full” style=”vc_box_shadow”][vc_column_text]We divide the header in […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":65,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":[],"_links":{"self":[{"href":"https:\/\/doc.dnngo.com\/glend\/wp-json\/wp\/v2\/pages\/79"}],"collection":[{"href":"https:\/\/doc.dnngo.com\/glend\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/doc.dnngo.com\/glend\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/doc.dnngo.com\/glend\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/doc.dnngo.com\/glend\/wp-json\/wp\/v2\/comments?post=79"}],"version-history":[{"count":90,"href":"https:\/\/doc.dnngo.com\/glend\/wp-json\/wp\/v2\/pages\/79\/revisions"}],"predecessor-version":[{"id":1257,"href":"https:\/\/doc.dnngo.com\/glend\/wp-json\/wp\/v2\/pages\/79\/revisions\/1257"}],"up":[{"embeddable":true,"href":"https:\/\/doc.dnngo.com\/glend\/wp-json\/wp\/v2\/pages\/65"}],"wp:attachment":[{"href":"https:\/\/doc.dnngo.com\/glend\/wp-json\/wp\/v2\/media?parent=79"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}