{"id":316,"date":"2017-04-22T19:42:36","date_gmt":"2017-04-22T19:42:36","guid":{"rendered":"https:\/\/fluentthemes.com\/knowledgebase\/infocenter\/?p=316"},"modified":"2017-04-22T19:42:36","modified_gmt":"2017-04-22T19:42:36","slug":"how-to-make-loginsignup-menu-at-the-top-bar-like-live-demo-site","status":"publish","type":"post","link":"https:\/\/fluentthemes.com\/knowledgebase\/infocenter\/how-to-make-loginsignup-menu-at-the-top-bar-like-live-demo-site\/","title":{"rendered":"How to make Login\/Signup menu at the top bar like live demo site?"},"content":{"rendered":"<p>At first create a new menu and choose Top bar (Not login) Menu as shown in the screenshots above. Then create a Custom Links menu like the following screenshot:<\/p>\n<p><a href=\"https:\/\/fluentthemes.com\/knowledgebase\/infocenter\/wp-content\/uploads\/2016\/06\/sc-login1.png\"><img loading=\"lazy\" class=\"aligncenter size-full wp-image-312\" src=\"https:\/\/fluentthemes.com\/knowledgebase\/infocenter\/wp-content\/uploads\/2016\/06\/sc-login1.png\" alt=\"\" width=\"1341\" height=\"549\" srcset=\"https:\/\/fluentthemes.com\/knowledgebase\/infocenter\/wp-content\/uploads\/2016\/06\/sc-login1.png 1341w, https:\/\/fluentthemes.com\/knowledgebase\/infocenter\/wp-content\/uploads\/2016\/06\/sc-login1-300x123.png 300w, https:\/\/fluentthemes.com\/knowledgebase\/infocenter\/wp-content\/uploads\/2016\/06\/sc-login1-768x314.png 768w, https:\/\/fluentthemes.com\/knowledgebase\/infocenter\/wp-content\/uploads\/2016\/06\/sc-login1-1024x419.png 1024w, https:\/\/fluentthemes.com\/knowledgebase\/infocenter\/wp-content\/uploads\/2016\/06\/sc-login1-60x25.png 60w, https:\/\/fluentthemes.com\/knowledgebase\/infocenter\/wp-content\/uploads\/2016\/06\/sc-login1-150x61.png 150w\" sizes=\"(max-width: 1341px) 100vw, 1341px\" \/><\/a><\/p>\n<p>&nbsp;<\/p>\n<p>After that from the top right corner click on the &#8216;Screen Options&#8217; and then give tick mark on &#8216;CSS Classes&#8217; and &#8216;Description&#8217;. See below screenshot:<\/p>\n<p><a href=\"https:\/\/fluentthemes.com\/knowledgebase\/infocenter\/wp-content\/uploads\/2016\/06\/sc-login2.png\"><img loading=\"lazy\" class=\"aligncenter size-full wp-image-313\" src=\"https:\/\/fluentthemes.com\/knowledgebase\/infocenter\/wp-content\/uploads\/2016\/06\/sc-login2.png\" alt=\"\" width=\"1341\" height=\"481\" srcset=\"https:\/\/fluentthemes.com\/knowledgebase\/infocenter\/wp-content\/uploads\/2016\/06\/sc-login2.png 1341w, https:\/\/fluentthemes.com\/knowledgebase\/infocenter\/wp-content\/uploads\/2016\/06\/sc-login2-300x108.png 300w, https:\/\/fluentthemes.com\/knowledgebase\/infocenter\/wp-content\/uploads\/2016\/06\/sc-login2-768x275.png 768w, https:\/\/fluentthemes.com\/knowledgebase\/infocenter\/wp-content\/uploads\/2016\/06\/sc-login2-1024x367.png 1024w, https:\/\/fluentthemes.com\/knowledgebase\/infocenter\/wp-content\/uploads\/2016\/06\/sc-login2-60x22.png 60w, https:\/\/fluentthemes.com\/knowledgebase\/infocenter\/wp-content\/uploads\/2016\/06\/sc-login2-150x54.png 150w\" sizes=\"(max-width: 1341px) 100vw, 1341px\" \/><\/a><\/p>\n<p>&nbsp;<\/p>\n<p>Then, you will see the &#8216;CSS classes&#8217; field and the &#8216;Description&#8217; field under the custom link menu you just created. Put &#8216;login-comments&#8217; in the &#8216;CSS classes&#8217; field and &#8216;fa-lock&#8217; (or any other font-awesome icon) in the &#8216;Description&#8217; field. Your Login menu is created and it will work as like the demo. If you forget to put\u00a0&#8216;login-comments&#8217; in the &#8216;CSS classes&#8217; field, the Login menu will be created, but it will not work (Login Form will not come). And, for Signup menu link, you need to put &#8216;signup&#8217; in the\u00a0&#8216;CSS classes&#8217; field and &#8216;fa-user-plus&#8217; (or any other font-awesome icon) in the &#8216;Description&#8217; field.<\/p>\n<p><a href=\"https:\/\/fluentthemes.com\/knowledgebase\/infocenter\/wp-content\/uploads\/2016\/06\/sc-login3.png\"><img loading=\"lazy\" class=\"aligncenter size-full wp-image-314\" src=\"https:\/\/fluentthemes.com\/knowledgebase\/infocenter\/wp-content\/uploads\/2016\/06\/sc-login3.png\" alt=\"\" width=\"1335\" height=\"511\" srcset=\"https:\/\/fluentthemes.com\/knowledgebase\/infocenter\/wp-content\/uploads\/2016\/06\/sc-login3.png 1335w, https:\/\/fluentthemes.com\/knowledgebase\/infocenter\/wp-content\/uploads\/2016\/06\/sc-login3-300x115.png 300w, https:\/\/fluentthemes.com\/knowledgebase\/infocenter\/wp-content\/uploads\/2016\/06\/sc-login3-768x294.png 768w, https:\/\/fluentthemes.com\/knowledgebase\/infocenter\/wp-content\/uploads\/2016\/06\/sc-login3-1024x392.png 1024w, https:\/\/fluentthemes.com\/knowledgebase\/infocenter\/wp-content\/uploads\/2016\/06\/sc-login3-60x23.png 60w, https:\/\/fluentthemes.com\/knowledgebase\/infocenter\/wp-content\/uploads\/2016\/06\/sc-login3-150x57.png 150w\" sizes=\"(max-width: 1335px) 100vw, 1335px\" \/><\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>At first create a new menu and choose Top bar (Not login) Menu as shown in the screenshots above. Then create a Custom Links menu like the following screenshot: &nbsp; After that from the top right corner click on the &#8216;Screen Options&#8217; and then give tick mark on &#8216;CSS Classes&#8217; and &#8216;Description&#8217;. See below screenshot: [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[2,3],"tags":[],"_links":{"self":[{"href":"https:\/\/fluentthemes.com\/knowledgebase\/infocenter\/wp-json\/wp\/v2\/posts\/316"}],"collection":[{"href":"https:\/\/fluentthemes.com\/knowledgebase\/infocenter\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/fluentthemes.com\/knowledgebase\/infocenter\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/fluentthemes.com\/knowledgebase\/infocenter\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/fluentthemes.com\/knowledgebase\/infocenter\/wp-json\/wp\/v2\/comments?post=316"}],"version-history":[{"count":0,"href":"https:\/\/fluentthemes.com\/knowledgebase\/infocenter\/wp-json\/wp\/v2\/posts\/316\/revisions"}],"wp:attachment":[{"href":"https:\/\/fluentthemes.com\/knowledgebase\/infocenter\/wp-json\/wp\/v2\/media?parent=316"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fluentthemes.com\/knowledgebase\/infocenter\/wp-json\/wp\/v2\/categories?post=316"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fluentthemes.com\/knowledgebase\/infocenter\/wp-json\/wp\/v2\/tags?post=316"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}