{"id":15687,"date":"2018-09-19T09:52:14","date_gmt":"2018-09-19T13:52:14","guid":{"rendered":"https:\/\/www.boldgrid.com\/support\/?p=15687"},"modified":"2020-03-12T14:39:22","modified_gmt":"2020-03-12T18:39:22","slug":"changing-the-active-link-style-in-menus","status":"publish","type":"post","link":"https:\/\/www.boldgrid.com\/support\/boldgrid-crio-supertheme-product-guide\/changing-the-active-link-style-in-menus\/","title":{"rendered":"Changing the Active Link Style in Menus"},"content":{"rendered":"\n

$\"\"$ <\/p>\n

Many websites have the active link, meaning the page the user is currently on, styled differently than the rest of the menu. For example, if a user is on the Contact page then the Contact link in the menu would use these settings.<\/p>\n

In the Dashboard navigate to Appearance<\/b> → Customize<\/b><\/li>\n
In the Customizer menu navigate to Design → Menus → Menu Location → Menu Items → <\/b>Active Link Style<\/b><\/li>\n<\/ul>\n
You will see three option that you can change: Link Color<\/b>, Background Colo<\/b>r, and Border<\/b>.<\/p>\n
How to Change the Active Link Color<\/h2>\n
\n
Click on Link Color<\/b><\/li>\n
Click on the palette color that you wish to use<\/li>\n
Click on Publish <\/b>to save your selection<\/li>\n<\/ul>\n
How to Change the Active Link Background Color<\/h2>\n
\n
Click on Background Color<\/b><\/li>\n
Click on the palette color that you wish to use<\/li>\n
To remove the background color click the eraser icon<\/li>\n
Click on Publish<\/b> to save your changes<\/li>\n<\/ul>\n
How to Change the Active Link Border and Border Radius<\/h2>\n
\n
Click on Border<\/b><\/li>\n
Select a Border Type<\/b> option<\/li>\n
Use the sliders to control the widths of your border sides<\/li>\n
Click on the palette color that you wish to use<\/li>\n
Click Publish<\/b> to save your changes<\/li>\n<\/ul>\n
The Border Radius controls the roundness of your element’s corners. A higher border radius values creates more rounded corners. You can use the responsive tools to customize border options at different screen sizes.<\/p>\n
\n
Scroll down to Border Radius<\/b><\/li>\n
Use the sliders to adjust the roundness of the four corners<\/li>\n
Click Publish<\/b> to save your changes<\/li>\n<\/ul>\n
Note<\/b>: You can use the Undo Changes<\/b> option to remove current changes or Delete Saved Settings<\/b> to reset to the default options.<\/p>\n<\/body><\/html>\n","protected":false},"excerpt":{"rendered":"
Many websites have the active link, meaning the page the user is currently on, styled differently than the rest of the menu. For example, if a user is on the Contact page then the Contact link in the menu would use these settings. In the Dashboard navigate to Appearance → Customize In the Customizer menu […]<\/p>\n","protected":false},"author":529,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"bgseo_title":"Changing the Active Link Style in Menus | BoldGrid Crio","bgseo_description":"Many websites have the active link, meaning the page the user is currently on, styled differently than the rest of the menu.","bgseo_robots_index":"index","bgseo_robots_follow":"follow","footnotes":""},"categories":[573],"tags":[],"class_list":["post-15687","post","type-post","status-publish","format-standard","hentry","category-boldgrid-crio-supertheme-product-guide"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.boldgrid.com\/support\/wp-json\/wp\/v2\/posts\/15687","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.boldgrid.com\/support\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.boldgrid.com\/support\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.boldgrid.com\/support\/wp-json\/wp\/v2\/users\/529"}],"replies":[{"embeddable":true,"href":"https:\/\/www.boldgrid.com\/support\/wp-json\/wp\/v2\/comments?post=15687"}],"version-history":[{"count":4,"href":"https:\/\/www.boldgrid.com\/support\/wp-json\/wp\/v2\/posts\/15687\/revisions"}],"predecessor-version":[{"id":18054,"href":"https:\/\/www.boldgrid.com\/support\/wp-json\/wp\/v2\/posts\/15687\/revisions\/18054"}],"wp:attachment":[{"href":"https:\/\/www.boldgrid.com\/support\/wp-json\/wp\/v2\/media?parent=15687"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.boldgrid.com\/support\/wp-json\/wp\/v2\/categories?post=15687"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.boldgrid.com\/support\/wp-json\/wp\/v2\/tags?post=15687"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}