{"id":5313,"date":"2021-10-19T01:04:11","date_gmt":"2021-10-19T01:04:11","guid":{"rendered":"https:\/\/essentials.pixfort.com\/knowledge-base\/?p=5313"},"modified":"2023-05-04T21:53:31","modified_gmt":"2023-05-04T21:53:31","slug":"customize-back-to-top-button","status":"publish","type":"post","link":"https:\/\/essentials.pixfort.com\/knowledge-base\/customize-back-to-top-button\/","title":{"rendered":"Customize Back to Top button"},"content":{"rendered":"\n
You can find the “Back to top” button settings in Theme options > General settings, <\/strong>where you can change its location (left or right), or you can disable it.<\/p>\n\n\n\n The back top top<\/strong> button icon has the link website color by default (set in Theme option > Layout > Colors<\/strong>).<\/p>\n\n\n\n You can customize the style of back to top button using the class You can change the properties values above or add your own styling depending on your needs.<\/p>\n\n\n\n.back_to_top<\/code> in CSS depending on your needs (you can add your code snippet into Theme options > Layout > Advanced > Custom css<\/strong>), for example:<\/p>\n\n\n\n
.back_to_top {
background-color: #037ef3 !important;
color: #fff !important;
border-radius: 25% !important;
}
a.back_to_top.bg-gray-2:hover, button.back_to_top.bg-gray-2:hover {
background-color: #037ef3 !important;
color: #fff !important;
border-radius: 25% !important;
opacity: 0.75 !important;
} <\/pre>\n\n\n\n