{"id":5286,"date":"2023-07-11T23:54:58","date_gmt":"2023-07-12T04:54:58","guid":{"rendered":"https:\/\/www.incredigeek.com\/home\/?p=5286"},"modified":"2023-07-11T23:57:15","modified_gmt":"2023-07-12T04:57:15","slug":"add-a-button-change-menu-item-color-to-wordpress-menu-bar","status":"publish","type":"post","link":"https:\/\/www.incredigeek.com\/home\/add-a-button-change-menu-item-color-to-wordpress-menu-bar\/","title":{"rendered":"Add a Button\/Change Menu Item Color to WordPress Menu Bar"},"content":{"rendered":"\n<p>The following article was helpful in getting started adding a button to the WordPress menu bar.<\/p>\n\n\n\n<p><a href=\"https:\/\/www.wpbeginner.com\/wp-tutorials\/how-to-add-a-button-in-your-wordpress-header-menu\/\">https:\/\/www.wpbeginner.com\/wp-tutorials\/how-to-add-a-button-in-your-wordpress-header-menu\/<\/a><\/p>\n\n\n\n<p>Modifying a Menu Item on a WordPress theme is not too difficult.  The basic steps are<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Add Menu Item<\/li>\n\n\n\n<li>Add CSS Class to specific menu item<\/li>\n\n\n\n<li>Customize the new CSS class by using the Additional CSS Options<\/li>\n<\/ol>\n\n\n\n<h2 class=\"wp-block-heading\">Add Menu Item<\/h2>\n\n\n\n<p>Add or customize a menu item by going to Appearance -> Menu<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Add a CSS Class to Menu Item<\/h2>\n\n\n\n<p>You can add a CSS class to an existing menu item, or you can create a new menu item.<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Create Menu Item<\/li>\n\n\n\n<li>Select Screen Options<\/li>\n\n\n\n<li>Enable CSS Classes.  (Needed for the next step)<\/li>\n\n\n\n<li>Under the Menu option, set a CSS class.  (Name it something unique so it doesn&#8217;t interfere with other CSS classes.  We&#8217;ll configure the CSS in the next step)<\/li>\n<\/ol>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/www.incredigeek.com\/home\/wp-content\/uploads\/2023\/07\/AddingCSStoMenuItem.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"540\" src=\"https:\/\/www.incredigeek.com\/home\/wp-content\/uploads\/2023\/07\/AddingCSStoMenuItem-1024x540.png\" alt=\"\" class=\"wp-image-5300\" srcset=\"https:\/\/www.incredigeek.com\/home\/wp-content\/uploads\/2023\/07\/AddingCSStoMenuItem-1024x540.png 1024w, https:\/\/www.incredigeek.com\/home\/wp-content\/uploads\/2023\/07\/AddingCSStoMenuItem-300x158.png 300w, https:\/\/www.incredigeek.com\/home\/wp-content\/uploads\/2023\/07\/AddingCSStoMenuItem-768x405.png 768w, https:\/\/www.incredigeek.com\/home\/wp-content\/uploads\/2023\/07\/AddingCSStoMenuItem-1536x810.png 1536w, https:\/\/www.incredigeek.com\/home\/wp-content\/uploads\/2023\/07\/AddingCSStoMenuItem-2048x1079.png 2048w, https:\/\/www.incredigeek.com\/home\/wp-content\/uploads\/2023\/07\/AddingCSStoMenuItem-500x264.png 500w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Customize CSS<\/h2>\n\n\n\n<p><\/p>\n\n\n\n<p>Now we can setup and customize the CSS class by going to Appearance ->  Customize <\/p>\n\n\n\n<p>Now find where the &#8220;Additional CSS&#8221; setting is.  If it is not under the main list, try looking under &#8220;Advanced&#8221;.  The Additional CSS editor page should look like the following.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/www.incredigeek.com\/home\/wp-content\/uploads\/2023\/07\/image-4.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"280\" src=\"https:\/\/www.incredigeek.com\/home\/wp-content\/uploads\/2023\/07\/image-4-1024x280.png\" alt=\"\" class=\"wp-image-5299\" srcset=\"https:\/\/www.incredigeek.com\/home\/wp-content\/uploads\/2023\/07\/image-4-1024x280.png 1024w, https:\/\/www.incredigeek.com\/home\/wp-content\/uploads\/2023\/07\/image-4-300x82.png 300w, https:\/\/www.incredigeek.com\/home\/wp-content\/uploads\/2023\/07\/image-4-768x210.png 768w, https:\/\/www.incredigeek.com\/home\/wp-content\/uploads\/2023\/07\/image-4-500x137.png 500w, https:\/\/www.incredigeek.com\/home\/wp-content\/uploads\/2023\/07\/image-4.png 1314w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n\n\n\n<p>Once there, add all the CSS you want to change color, padding, etc.<\/p>\n\n\n\n<p>You can make it look like a button by adding things like<\/p>\n\n\n\n<pre class=\"wp-block-code has-dark-gray-background-color has-background\"><code class=\"\">border-radius: 5px;\npadding: 0.5rem;\nmargin: 0.2rem;<\/code><\/pre>\n\n\n\n<p>Check out the following link for more info about buttons.<\/p>\n\n\n\n<p><a href=\"https:\/\/www.w3schools.com\/csS\/css3_buttons.asp\">https:\/\/www.w3schools.com\/csS\/css3_buttons.asp<\/a><\/p>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>The following article was helpful in getting started adding a button to the WordPress menu bar. https:\/\/www.wpbeginner.com\/wp-tutorials\/how-to-add-a-button-in-your-wordpress-header-menu\/ Modifying a Menu Item on a WordPress theme is not too difficult. The basic steps are Add Menu Item Add or customize a &hellip; <a href=\"https:\/\/www.incredigeek.com\/home\/add-a-button-change-menu-item-color-to-wordpress-menu-bar\/\">Continue reading <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[72],"tags":[649,1530,947,7,74],"class_list":["post-5286","post","type-post","status-publish","format-standard","hentry","category-wordpress","tag-button","tag-css","tag-html","tag-linux-2","tag-wordpress-2"],"_links":{"self":[{"href":"https:\/\/www.incredigeek.com\/home\/wp-json\/wp\/v2\/posts\/5286","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.incredigeek.com\/home\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.incredigeek.com\/home\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.incredigeek.com\/home\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.incredigeek.com\/home\/wp-json\/wp\/v2\/comments?post=5286"}],"version-history":[{"count":5,"href":"https:\/\/www.incredigeek.com\/home\/wp-json\/wp\/v2\/posts\/5286\/revisions"}],"predecessor-version":[{"id":5307,"href":"https:\/\/www.incredigeek.com\/home\/wp-json\/wp\/v2\/posts\/5286\/revisions\/5307"}],"wp:attachment":[{"href":"https:\/\/www.incredigeek.com\/home\/wp-json\/wp\/v2\/media?parent=5286"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.incredigeek.com\/home\/wp-json\/wp\/v2\/categories?post=5286"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.incredigeek.com\/home\/wp-json\/wp\/v2\/tags?post=5286"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}