Article background color in Helix3

.view-article article.item, .layout-blog article.item {
	background: #fff;
	padding: 40px 40px 20px 40px;
}

---

Narrow width in Helix Ultimate

#sp-component .article-details {
    max-width: 800px;
    margin: 0 auto;
}

---

Scroll Up

.scrollup {
	  width: 40px;
	  height: 40px;
	  position: fixed;
	  bottom: 62px;
	  right: 100px;
	  display: none;
	  z-index: 999;
	  border: 1px solid #ddd;
	  background-color: rgba(255,255,255,0.4);
}
.scrollup:hover {
	  background-color: #c4c4c4;
}

---

Social Share in Helix3

.helix-social-share {
		float: right;
}
.helix-social-share .helix-social-share-icon ul li div a {
	  background: #f5f5f5 none repeat scroll 0 0;
	  border-radius: 50%;
	  height: 30px;
	  padding-top: 4px;
	  text-align: center;
	  width: 30px;
	  display: inline-block;
}
.helix-social-share .helix-social-share-icon ul li div a:hover,
.helix-social-share .helix-social-share-icon ul li div a:focus {
	  background: #22b8f0;
	  color: #fff;
}

---

Logo center align for mobile version

.main_header .sp-default-logo {
    display: inline!important;
    text-align:center!important;
    padding-bottom:15px;
 }
.main_header .hidden-xs        {
     display:none!important;
 }

---

Right/Left module Menu Active & Hover color

.sp-module-content .nav li.hover > a {
    color: #22b8f0;
}
.sp-module-content .nav li.active > a {
    color: #ceaa53;
}

---

Off-canvas Menu active

.offcanvas-menu .offcanvas-inner .sp-module ul > li.active > a {
    color: #fff;
}
.offcanvas-menu .offcanvas-inner .sp-module ul > li ul > li.active > a {
    color: #fff;
}

---

Menu Alignment

Left Alignment

.sp-megamenu-parent {
	list-style: none;
	padding: 0;
	margin: 0;
	z-index: 9;
	display: block;
	float: left;
}

Center Alignment

.sp-megamenu-parent {
	list-style: none;
	padding: 0;
	margin: 0;
	z-index: 9;
	display: block;
	float:inherit;
	text-align:center;
}

---

Horizontal Menu

Add below css to you custom.css file.

.hormenu        {
    text-align:right;
    font-size:14px;;
}
.hormenu ul > li > a::before {
    content:none!important;
    font-family: "FontAwesome";
}
.hormenu ul.menu_hor-menu ul    {
    list-style-type:none;
}
.hormenu ul.menu_hor-menu li    {
    display:inline
}
.hormenu ul.menu_hor-menu ul     a {
    list-style-type:none;
    padding:0;
    margin:0;
}
.hormenu ul.menu_hor-menu li a    {
    padding:0 10px;
    display:inline;
    color:#999;
}
.hormenu ul.menu_hor-menu li a:hover    {
    display:inline;
    color:#36509b;
}
.hormenu ul > li {
    border-bottom: none;
}

Add '_hor-menu" at "Menu Class Suffix" and add "hormenu" at your backend framework class.

---

Customize Helix3 Megamenu to Off-canvas

By default Helix 3 mega menu is adjust to off-canva in a screen resolution below 480px. If you want to have off-canvas menu for a bigger screen resolution just add below CSS code to your custom css file.

@media (max-width: 1200px){
.sp-megamenu-parent {
		display: none !important;
}
#offcanvas-toggler {
		display: inline-block !important;
}
}

Change ‘1200px’ to whatever size you want.

---

Body background and custom body max width

.layout-boxed .body-innerwrapper {
    background: #f0f0f0;
	max-width: 1120px;
	margin: 0 auto;
	box-shadow: 0 0 30px rgba(0, 0, 0, 0.4);
}

---

To give color overlay at Title Page

.sp-page-title::before {
    background: rgba(0, 0, 0, 0.6);
    bottom: 0;
    content: "";
    display: block;
    height: auto;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
}

.sp-page-title .sp-page-title-heading {
     position:relative;
}

.sp-page-title .breadcrumb {
     position:relative;
}

Breadcrumb center

.breadcrumb {
    display: inline-flex;
}

---

Border within container box

#sp-footer .container-inner {
    padding: 30px 0;
    border-top: 1px solid rgba(255, 255, 255, .1);
}

---

Disable menu dropdown arrow mark icon

body.ltr .sp-megamenu-parent > li.sp-has-child > a::after, body.ltr .sp-megamenu-parent > li.sp-has-child > span::after {
    content: "";
}

---