This is our first template which offers 2 types of header: vertical (left) and horizontal (top) to choose from. In template settings > Layout Builder > Predefined Header - you can select Header (logo & menu) position.

Logo width/size

Logo width depends of width of column where is added. It means that if logo column is short (default) the logo image is resized to smaller, no matter how wide the original logo image is. If you need show wider/bigger logo, in most cases, you have to:

1. Increase "logo" column size, from Template settings > Layout Builder > Predefined Header*
2. Reduce left and right padding around "logo" column or whole header if we talk about Vertical Header. This option is easier, but it will increase the logo picture by +35px only. But it's worth to try, especially if you have Vertical Header. So you will be able to use 190px wide logo, by default is only ~145px.
3. You have to also reduce (remove) right margin.

body.predefined-header1 #sp-header {padding: 30px 15px 100px 20px;}

#sp-header .logo {margin-right: 0;}

*Please read Helix Ultimate Manual tip: How to build custom header.

Margin between Logo and Menu

In Vertical Header space between logo and Menu is 115px in some cases it may be too big value, to reduce it to 50px please use below code:

body.predefined-header1 #sp-header .sp-megamenu-wrapper {margin-top: 50px; }

Vertical sidebar width

Yes, it's possible to change width of vertical sidebar by custom CSS only. By default this section is only 210px wide. Below you have example code how to increase width to 325px and reduce padding inside left column.

body.predefined-header1 #sp-header {width: 300px; padding: 30px 20px;}
@media screen and (max-width: 1920px) {
body.predefined-header1 #sp-main-body, 
body.predefined-header1 #sp-bottom,
body.predefined-header1 #sp-footer {margin-left: 30px;} 
} 

@media screen and (max-width: 1440px) {
body.predefined-header1 #sp-main-body, 
body.predefined-header1 #sp-bottom,
body.predefined-header1 #sp-footer {margin-left: 10%;} 
} 

@media screen and (max-width: 992px) {
body.predefined-header1 #sp-header {width: 100%;padding: 20px;}
body.predefined-header1 #sp-main-body, 
body.predefined-header1 #sp-bottom, 
body.predefined-header1 #sp-footer {margin-left:0;}
} 

body.predefined-header1 #sp-header .sp-megamenu-wrapper .sp-megamenu-parent > li > .sp-dropdown {
    padding-left: 20px;}

  

Note! Use above syntax inside Custom CSS code section or custom.css file.