To achieve full header layout use below css in your style.css

Don't forget to enable "Sticky Header" option at backend's template option.

#sp-top-bar {
	display:none;
}

/* Header ---------------------*/
#sp-header:not(.header-sticky) {
    padding: 25px 0;
    background: transparent !important;
    -webkit-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}
#sp-header {
	position: fixed !important;
    height: auto;
	background-image: linear-gradient(133deg, #8200ff 0%, #4a4adc 100%);
	box-shadow: none;
	-webkit-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
	z-index: 99;
}
.com-content.view-article #sp-header {
    background-image: linear-gradient(133deg, #8200ff 0%, #4a4adc 100%) !important;
}

/* Menu ---------------------*/
.sp-megamenu-parent > li > a {
    color: #fff;
}
.sp-megamenu-parent > li:hover > a {
    color: #fcff00;
}
.sp-megamenu-parent > li.active > a, .sp-megamenu-parent > li.active:hover > a {
    color: #fcff00;
}

/* Title ---------------------*/
.sp-page-title {
    padding: 190px 0 110px 0;
}
.com-content.view-article #sp-title {
  display: none;
}

/* Body ---------------------*/
#sp-main-body {
  padding: 100px 0;
}
.com-content.view-article #sp-main-body {
  padding: 180px 0;
}

Non-Sticky Header

For Non-Sticky Header, disable at backend's template option, and change the above header position as below

#sp-header {
	position: absolute;
}