{"id":181,"date":"2021-03-12T00:00:39","date_gmt":"2021-03-12T00:00:39","guid":{"rendered":"https:\/\/nexgen.codings.dev\/docs\/?p=181"},"modified":"2021-03-15T20:23:14","modified_gmt":"2021-03-15T20:23:14","slug":"building-the-header-with-navbar-and-top-bar","status":"publish","type":"post","link":"https:\/\/nexgen.codings.dev\/docs\/building-the-header-with-navbar-and-top-bar\/","title":{"rendered":"Building the header with navbar and top bar"},"content":{"rendered":"\t\t
\n\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t

Overview<\/h4>

Add multi-logo (Desktop and Mobile), any icon, custom links and buttons, conditional menus, and ordering as desired. Adjust spacing between items, colors and typography for absolutely everything on both the navbar and the top bar.<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t

\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\r\n\t\t
\r\n\t\t\t\"Image\"\r\n\t\t<\/div>\r\n\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t

Overview<\/h4>\n

Add multi-logo (Desktop and Mobile), any icon, custom links and buttons, conditional menus, and ordering as desired. Adjust spacing between items, colors and typography for absolutely everything on both the navbar and the top bar.<\/p>\n

Header builder<\/h4>\n

From the dashboard go to Theme Settings \u00bb Header.<\/p>\n

\"\u26a1\"Top Bar<\/h5>\n

Builder<\/b><\/p>\n

Click on the \u201cAdd New\u201d button to add new elements to Top Bar.<\/p>\n

\u00bb Link
\u00bb Link with icon<\/p>\n

Section \u00bb Layout<\/b><\/p>\n

You can adjust the layout of the Top Bar. The set layout will be applied to the section container.<\/p>\n

\u00bb Max Width<\/p>\n

Section \u00bb Color<\/b><\/p>\n

The selected background color will be applied to Top Bar.<\/p>\n

\u00bb Background Color<\/p>\n

Link \u00bb Layout<\/b><\/p>\n

You can adjust the layout of the Top Bar items. The set layout will be applied to links.<\/p>\n

\u00bb Space Between<\/p>\n

Link \u00bb Color<\/b><\/p>\n

You can set the color and hover color for the all links of the Top Bar.<\/p>\n

\u00bb Text Color
\u00bb Text Hover Color<\/p>\n

Link \u00bb Typography<\/b><\/p>\n

You can set the color and hover color for the all links of the Top Bar.<\/p>\n

\u00bb Font Type (Google Font or Custom Font)
\n\u00bb Font Family
\n\u00bb Font Style
\n\u00bb Font Size
\n\u00bb Font Weight
\n\u00bb Line Height<\/p>\n

\"\u26a1\"Navbar<\/h5>\n

Builder<\/b><\/p>\n

Click on the \u201cAdd New\u201d button to add new elements to Navbar.<\/p>\n

\u00bb Brand (Logo and Responsive Logo)
\n\u00bb Menu
\n\u00bb Search Icon
\n\u00bb Cart Icon
\n\u00bb Button (Multiple Styles)
\n\u00bb Link
\n\u00bb Link with icon<\/p>\n

Section \u00bb Layout<\/b><\/p>\n

You can adjust the layout of the Navbar. The set layout will be applied to the section container.<\/p>\n

\u00bb Max Width<\/p>\n

Section \u00bb Color<\/b><\/p>\n

The selected background color will be applied to Navbar.<\/p>\n

\u00bb Background Color (Holder)
\n\u00bb Background Color (Sticky)
\n\u00bb Background Color (Dropdown)<\/p>\n

Logo Image \u00bb Layout<\/b><\/p>\n

Set the logo layout for desktop and mobile.<\/p>\n

\u00bb Width Type (Auto or Custom)
\n\u00bb Width
\n\u00bb Height<\/p>\n

Link \u00bb Layout<\/b><\/p>\n

You can adjust the layout of the Navbar items. The set layout will be applied to links.<\/p>\n

\u00bb Space Between<\/p>\n

Link \u00bb Color<\/b><\/p>\n

You can set the color and hover color for the all links of the Navbar.<\/p>\n

\u00bb Text Color
\u00bb Text Hover Color<\/p>\n

Link \u00bb Typography<\/b><\/p>\n

You can set the color and hover color for the all links of the Navbar.<\/p>\n

\u00bb Font Type (Google Font or Custom Font)
\n\u00bb Font Family
\n\u00bb Font Style
\n\u00bb Font Size
\n\u00bb Font Weight
\n\u00bb Line Height<\/p>\n

Button \u00bb Color<\/b><\/p>\n

You can set the color and hover color for the all buttons of the Navbar.<\/p>\n

\u00bb Bckground Color
\u00bb Bckground Hover Color
\u00bb Text Color<\/p>\n

Button \u00bb Typography<\/b><\/p>\n

You can set the background color, text color and text hover color for all buttons on the Navbar.<\/p>\n

\u00bb Font Type (Google Font or Custom Font)
\n\u00bb Font Family
\n\u00bb Font Style
\n\u00bb Font Size
\n\u00bb Font Weight
\n\u00bb Line Height<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"

Overview Add multi-logo (Desktop and Mobile), any icon, custom links and buttons, conditional menus, and ordering as desired. Adjust spacing…<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[14,8],"tags":[],"class_list":["post-181","post","type-post","status-publish","format-standard","hentry","category-header-builder","category-theme-settings"],"acf":[],"_links":{"self":[{"href":"https:\/\/nexgen.codings.dev\/docs\/wp-json\/wp\/v2\/posts\/181","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/nexgen.codings.dev\/docs\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/nexgen.codings.dev\/docs\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/nexgen.codings.dev\/docs\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/nexgen.codings.dev\/docs\/wp-json\/wp\/v2\/comments?post=181"}],"version-history":[{"count":16,"href":"https:\/\/nexgen.codings.dev\/docs\/wp-json\/wp\/v2\/posts\/181\/revisions"}],"predecessor-version":[{"id":297,"href":"https:\/\/nexgen.codings.dev\/docs\/wp-json\/wp\/v2\/posts\/181\/revisions\/297"}],"wp:attachment":[{"href":"https:\/\/nexgen.codings.dev\/docs\/wp-json\/wp\/v2\/media?parent=181"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/nexgen.codings.dev\/docs\/wp-json\/wp\/v2\/categories?post=181"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/nexgen.codings.dev\/docs\/wp-json\/wp\/v2\/tags?post=181"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}