Back to top options

Create and configure the stylish back to top button for your site

Back to top options

Here you can style the Back To Top button on the site.

  • Custom settings – set it to Enable to add the custom settings for the back to top button on your site.
Button options
  • Background color – set the background color for back to top button.
  • Border color – set the border color for back to top button.
  • Background hover color – set the background color on hover for back to top button.
  • Border hover color – specify the button border hover color for back to top button.
  • Border width – set the button border width for back to top button. The width should be added in px, don’t include “px”.
  • Border style – select the button border style for back to top button. Solid, dashed and dotted styles are available.
  • Border radius – set the button border radius for back to top button. The radius should be added in %, don’t include “%”.
  • Button size – set the button size in px.
  • Shadow on hover – set it to Enable if you do not want to have the shadow effect on button hover.
  • Enable on Mobile – set it to Enable to show the back to top button on your site on mobile devices.
Icon options
Here you style the icon for the back to top button.

  • Select icon – select the icon style which is most suitable to you.
  • Icon size – set the size of the icon in px, 25px is the maximum value.
  • Icon color – set the icon color for back to top button.
  • Icon hover color –  set the icon hover color for back to top button.
div#stuning-header .dfd-stuning-header-bg-container {background-image: url(https://nativewptheme.net/support/wp-content/uploads/2017/01/hands1.jpg);background-size: cover;background-position: center center;background-attachment: initial;background-repeat: no-repeat;}#stuning-header div.page-title-inner {min-height: 550px;}#main-content .dfd-content-wrap {margin: 0px;} #main-content .dfd-content-wrap > article {padding: 0px;}@media only screen and (min-width: 1101px) {#layout.dfd-portfolio-loop > .row.full-width > .blog-section.no-sidebars,#layout.dfd-gallery-loop > .row.full-width > .blog-section.no-sidebars {padding: 0 0px;}#layout.dfd-portfolio-loop > .row.full-width > .blog-section.no-sidebars > #main-content > .dfd-content-wrap:first-child,#layout.dfd-gallery-loop > .row.full-width > .blog-section.no-sidebars > #main-content > .dfd-content-wrap:first-child {border-top: 0px solid transparent; border-bottom: 0px solid transparent;}#layout.dfd-portfolio-loop > .row.full-width #right-sidebar,#layout.dfd-gallery-loop > .row.full-width #right-sidebar {padding-top: 0px;padding-bottom: 0px;}#layout.dfd-portfolio-loop > .row.full-width > .blog-section.no-sidebars .sort-panel,#layout.dfd-gallery-loop > .row.full-width > .blog-section.no-sidebars .sort-panel {margin-left: -0px;margin-right: -0px;}}#layout .dfd-content-wrap.layout-side-image,#layout > .row.full-width .dfd-content-wrap.layout-side-image {margin-left: 0;margin-right: 0;}