{"id":41,"date":"2022-07-03T02:52:47","date_gmt":"2022-07-03T02:52:47","guid":{"rendered":"http:\/\/docs.eriktailor.hu\/flatbook\/docs-2\/theme-options\/navbar\/"},"modified":"2022-07-10T18:36:40","modified_gmt":"2022-07-10T18:36:40","slug":"navbar","status":"publish","type":"docs","link":"https:\/\/docs.eriktailor.hu\/flatbook\/docs\/theme-options\/navbar\/","title":{"rendered":"Navbar"},"content":{"rendered":"\n<p>In this <a href=\"http:\/\/docs.eriktailor.hu\/flatbook\/docs-2\/theme-options\/\">Customizer<\/a> panel, you can customize everything related to the top navigation bar.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h3 class=\"wp-block-heading\">Layout<\/h3>\n\n\n\n<p>Customize the layout of the navigation bar.<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><strong>Enable navbar:<\/strong>\u00a0show or hide the top navigation bar<\/li><li><strong>Navbar layout:<\/strong>\u00a0choose which layout should be used for the top navigation<\/li><\/ul>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"68\" src=\"http:\/\/docs.eriktailor.hu\/flatbook\/wp-content\/uploads\/2022\/07\/Screenshot-2022-07-10-at-20.33.49-1024x68.png\" alt=\"\" class=\"wp-image-181\" srcset=\"https:\/\/docs.eriktailor.hu\/flatbook\/wp-content\/uploads\/2022\/07\/Screenshot-2022-07-10-at-20.33.49-1024x68.png 1024w, https:\/\/docs.eriktailor.hu\/flatbook\/wp-content\/uploads\/2022\/07\/Screenshot-2022-07-10-at-20.33.49-300x20.png 300w, https:\/\/docs.eriktailor.hu\/flatbook\/wp-content\/uploads\/2022\/07\/Screenshot-2022-07-10-at-20.33.49-768x51.png 768w, https:\/\/docs.eriktailor.hu\/flatbook\/wp-content\/uploads\/2022\/07\/Screenshot-2022-07-10-at-20.33.49.png 1197w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"67\" src=\"http:\/\/docs.eriktailor.hu\/flatbook\/wp-content\/uploads\/2022\/07\/Screenshot-2022-07-10-at-20.34.29-1024x67.png\" alt=\"\" class=\"wp-image-179\" srcset=\"https:\/\/docs.eriktailor.hu\/flatbook\/wp-content\/uploads\/2022\/07\/Screenshot-2022-07-10-at-20.34.29-1024x67.png 1024w, https:\/\/docs.eriktailor.hu\/flatbook\/wp-content\/uploads\/2022\/07\/Screenshot-2022-07-10-at-20.34.29-300x20.png 300w, https:\/\/docs.eriktailor.hu\/flatbook\/wp-content\/uploads\/2022\/07\/Screenshot-2022-07-10-at-20.34.29-768x50.png 768w, https:\/\/docs.eriktailor.hu\/flatbook\/wp-content\/uploads\/2022\/07\/Screenshot-2022-07-10-at-20.34.29.png 1197w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"67\" src=\"http:\/\/docs.eriktailor.hu\/flatbook\/wp-content\/uploads\/2022\/07\/Screenshot-2022-07-10-at-20.34.47-1024x67.png\" alt=\"\" class=\"wp-image-178\" srcset=\"https:\/\/docs.eriktailor.hu\/flatbook\/wp-content\/uploads\/2022\/07\/Screenshot-2022-07-10-at-20.34.47-1024x67.png 1024w, https:\/\/docs.eriktailor.hu\/flatbook\/wp-content\/uploads\/2022\/07\/Screenshot-2022-07-10-at-20.34.47-300x20.png 300w, https:\/\/docs.eriktailor.hu\/flatbook\/wp-content\/uploads\/2022\/07\/Screenshot-2022-07-10-at-20.34.47-768x50.png 768w, https:\/\/docs.eriktailor.hu\/flatbook\/wp-content\/uploads\/2022\/07\/Screenshot-2022-07-10-at-20.34.47.png 1195w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"84\" src=\"http:\/\/docs.eriktailor.hu\/flatbook\/wp-content\/uploads\/2022\/07\/Screenshot-2022-07-10-at-20.35.30-1024x84.png\" alt=\"\" class=\"wp-image-177\" srcset=\"https:\/\/docs.eriktailor.hu\/flatbook\/wp-content\/uploads\/2022\/07\/Screenshot-2022-07-10-at-20.35.30-1024x84.png 1024w, https:\/\/docs.eriktailor.hu\/flatbook\/wp-content\/uploads\/2022\/07\/Screenshot-2022-07-10-at-20.35.30-300x25.png 300w, https:\/\/docs.eriktailor.hu\/flatbook\/wp-content\/uploads\/2022\/07\/Screenshot-2022-07-10-at-20.35.30-768x63.png 768w, https:\/\/docs.eriktailor.hu\/flatbook\/wp-content\/uploads\/2022\/07\/Screenshot-2022-07-10-at-20.35.30.png 1196w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<ul class=\"wp-block-list\"><li><strong>Navbar width:<\/strong>\u00a0sets the wrapper width of the navigation bar<\/li><li><strong>Navbar position:<\/strong>\u00a0choose Fixed if you want the navbar to be sticked to top when scrolling<\/li><li><strong>Navbar height:<\/strong>\u00a0sets the height of the navigation bar<\/li><li><strong>Mobile navbar height:<\/strong>\u00a0sets the height of the navigation bar on mobile sizes<\/li><li><strong>Menu font size:<\/strong>\u00a0sets the font size of the nav menu items<\/li><li><strong>Menu item spacing:<\/strong>\u00a0sets the spacing between the nav menu items <em>(for desktop view only)<\/em><\/li><\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h3 class=\"wp-block-heading\">Logo<\/h3>\n\n\n\n<p>Settings related to the logos in the navbar.<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><strong>Logo type:<\/strong>\u00a0choose which logo type you want, text or image based<\/li><li><strong>Logo text:<\/strong>\u00a0enter the text to be shown as the logo<\/li><li><strong>Typography:<\/strong>\u00a0set the typography of the logo text<\/li><li><strong>Logo top spacing:<\/strong>\u00a0set the top padding of the logo <em>(only when navbar layout is centered)<\/em><\/li><li><strong>Logo image:<\/strong>\u00a0upload the image you want to use as the logo<\/li><li><strong>Logo width:<\/strong>\u00a0sets the size of the uploaded logo image<\/li><li><strong>Mobile logo:<\/strong>\u00a0if you upload an image here, it will replace the original logo on mobile size<\/li><\/ul>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"482\" src=\"http:\/\/docs.eriktailor.hu\/flatbook\/wp-content\/uploads\/2022\/07\/Screenshot-2022-07-06-at-9.50.18-1024x482.png\" alt=\"\" class=\"wp-image-138\" srcset=\"https:\/\/docs.eriktailor.hu\/flatbook\/wp-content\/uploads\/2022\/07\/Screenshot-2022-07-06-at-9.50.18-1024x482.png 1024w, https:\/\/docs.eriktailor.hu\/flatbook\/wp-content\/uploads\/2022\/07\/Screenshot-2022-07-06-at-9.50.18-300x141.png 300w, https:\/\/docs.eriktailor.hu\/flatbook\/wp-content\/uploads\/2022\/07\/Screenshot-2022-07-06-at-9.50.18-768x361.png 768w, https:\/\/docs.eriktailor.hu\/flatbook\/wp-content\/uploads\/2022\/07\/Screenshot-2022-07-06-at-9.50.18-1536x722.png 1536w, https:\/\/docs.eriktailor.hu\/flatbook\/wp-content\/uploads\/2022\/07\/Screenshot-2022-07-06-at-9.50.18-2048x963.png 2048w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<ul class=\"wp-block-list\"><li><strong>Login logo:<\/strong>&nbsp;upload logo to show up on the WordPress admin login page<\/li><\/ul>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"553\" src=\"http:\/\/docs.eriktailor.hu\/flatbook\/wp-content\/uploads\/2022\/07\/login_logo-1024x553.png\" alt=\"\" class=\"wp-image-136\" srcset=\"https:\/\/docs.eriktailor.hu\/flatbook\/wp-content\/uploads\/2022\/07\/login_logo-1024x553.png 1024w, https:\/\/docs.eriktailor.hu\/flatbook\/wp-content\/uploads\/2022\/07\/login_logo-300x162.png 300w, https:\/\/docs.eriktailor.hu\/flatbook\/wp-content\/uploads\/2022\/07\/login_logo-768x415.png 768w, https:\/\/docs.eriktailor.hu\/flatbook\/wp-content\/uploads\/2022\/07\/login_logo-1536x830.png 1536w, https:\/\/docs.eriktailor.hu\/flatbook\/wp-content\/uploads\/2022\/07\/login_logo.png 1540w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h3 class=\"wp-block-heading\">Tagline<\/h3>\n\n\n\n<p>Settings related to the tagline in the navigation bar.<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><strong>Show tagline:<\/strong>&nbsp;display the site tagline near the logo<\/li><li><strong>Tagline text:<\/strong>&nbsp;enter the text for the tagline, if it&#8217;s enabled<\/li><\/ul>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"66\" src=\"http:\/\/docs.eriktailor.hu\/flatbook\/wp-content\/uploads\/2022\/07\/navbar_tagline-1024x66.png\" alt=\"\" class=\"wp-image-141\" srcset=\"https:\/\/docs.eriktailor.hu\/flatbook\/wp-content\/uploads\/2022\/07\/navbar_tagline-1024x66.png 1024w, https:\/\/docs.eriktailor.hu\/flatbook\/wp-content\/uploads\/2022\/07\/navbar_tagline-300x19.png 300w, https:\/\/docs.eriktailor.hu\/flatbook\/wp-content\/uploads\/2022\/07\/navbar_tagline-768x50.png 768w, https:\/\/docs.eriktailor.hu\/flatbook\/wp-content\/uploads\/2022\/07\/navbar_tagline.png 1194w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h3 class=\"wp-block-heading\">Button<\/h3>\n\n\n\n<p>Settings related to the menu button in the navigation bar.<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><strong>Enable button:<\/strong>\u00a0show \/ hide a button at the end of the navigation menu. It will turn your last menu item to a button.<\/li><li><strong>Border radius:<\/strong>\u00a0set border radius attribute of the navbar button<\/li><\/ul>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"66\" src=\"http:\/\/docs.eriktailor.hu\/flatbook\/wp-content\/uploads\/2022\/07\/navbar_btn-1024x66.png\" alt=\"\" class=\"wp-image-145\" srcset=\"https:\/\/docs.eriktailor.hu\/flatbook\/wp-content\/uploads\/2022\/07\/navbar_btn-1024x66.png 1024w, https:\/\/docs.eriktailor.hu\/flatbook\/wp-content\/uploads\/2022\/07\/navbar_btn-300x19.png 300w, https:\/\/docs.eriktailor.hu\/flatbook\/wp-content\/uploads\/2022\/07\/navbar_btn-768x50.png 768w, https:\/\/docs.eriktailor.hu\/flatbook\/wp-content\/uploads\/2022\/07\/navbar_btn.png 1194w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\"><p><strong>Note: <\/strong>the color options of the button can be found at Customizer > Navbar > Colors<\/p><\/blockquote>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h3 class=\"wp-block-heading\">Colors<\/h3>\n\n\n\n<p>Set the color of the elements from the Navbar panel.<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><strong>Navbar background color: <\/strong>set the background color of the navigation bar<\/li><li><strong>Menu link color:<\/strong> set the color of the menu links<\/li><li><strong>Menu link hover color:<\/strong> set the color of the menu links when hovered with the mouse<\/li><li><strong>Mobile menu toggle color:<\/strong> set the hamburger toggle icon color<em> (on mobile sizes)<\/em><\/li><\/ul>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"82\" src=\"http:\/\/docs.eriktailor.hu\/flatbook\/wp-content\/uploads\/2022\/07\/Screenshot-2022-07-10-at-20.21.38-1024x82.png\" alt=\"\" class=\"wp-image-172\" srcset=\"https:\/\/docs.eriktailor.hu\/flatbook\/wp-content\/uploads\/2022\/07\/Screenshot-2022-07-10-at-20.21.38-1024x82.png 1024w, https:\/\/docs.eriktailor.hu\/flatbook\/wp-content\/uploads\/2022\/07\/Screenshot-2022-07-10-at-20.21.38-300x24.png 300w, https:\/\/docs.eriktailor.hu\/flatbook\/wp-content\/uploads\/2022\/07\/Screenshot-2022-07-10-at-20.21.38-768x61.png 768w, https:\/\/docs.eriktailor.hu\/flatbook\/wp-content\/uploads\/2022\/07\/Screenshot-2022-07-10-at-20.21.38.png 1250w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<ul class=\"wp-block-list\"><li><strong>Button background color:<\/strong> set the background color of the button in the navbar <em>(if button is enabled)<\/em><\/li><li><strong>Button hover color: <\/strong>set the background color of the navbar button when hovered with the mouse<\/li><li><strong>Button label color: <\/strong>set the label text color of the navbar button <em>(if button is enabled)<\/em><\/li><li><strong>Tagline color:<\/strong> set the navbar tagline text color<em> (if tagline is enabled)<\/em><\/li><\/ul>\n\n\n\n<p><\/p>\n\n\n\n<p><\/p>\n\n\n\n<p><\/p>\n\n\n\n<p><\/p>\n","protected":false},"featured_media":0,"parent":38,"menu_order":1,"comment_status":"open","ping_status":"closed","template":"","docs_category":[],"class_list":["post-41","docs","type-docs","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/docs.eriktailor.hu\/flatbook\/wp-json\/wp\/v2\/docs\/41","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/docs.eriktailor.hu\/flatbook\/wp-json\/wp\/v2\/docs"}],"about":[{"href":"https:\/\/docs.eriktailor.hu\/flatbook\/wp-json\/wp\/v2\/types\/docs"}],"replies":[{"embeddable":true,"href":"https:\/\/docs.eriktailor.hu\/flatbook\/wp-json\/wp\/v2\/comments?post=41"}],"version-history":[{"count":16,"href":"https:\/\/docs.eriktailor.hu\/flatbook\/wp-json\/wp\/v2\/docs\/41\/revisions"}],"predecessor-version":[{"id":182,"href":"https:\/\/docs.eriktailor.hu\/flatbook\/wp-json\/wp\/v2\/docs\/41\/revisions\/182"}],"up":[{"embeddable":true,"href":"https:\/\/docs.eriktailor.hu\/flatbook\/wp-json\/wp\/v2\/docs\/38"}],"wp:attachment":[{"href":"https:\/\/docs.eriktailor.hu\/flatbook\/wp-json\/wp\/v2\/media?parent=41"}],"wp:term":[{"taxonomy":"docs_category","embeddable":true,"href":"https:\/\/docs.eriktailor.hu\/flatbook\/wp-json\/wp\/v2\/docs_category?post=41"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}