How to - Customization Tips

How to increase the width of the sidebar menu

If you are using the first predefined header then, you can use the following code in your template custom CSS:

body.predefined-header1 .body-wrapper {
    width: calc(100% - 16%);
    margin-left: auto;
}

body.predefined-header1 #sp-header {
    width: 16%;
}

 Templates > Styles > Click on your current default template name then choose Template Options > Custom Code > Custom CSS

How to change paddings inside the sidebar menu

For that task also Custom CSS is needed:

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

you can control the sidebar inside space by changing the value of paddings, the default values are 60px 35px 30px 35px - in my example, I used smaller values.

How to decrease the spacing between the logo and menu

For that task, you have to use Custom CSS. In the below example, there is also a CSS override to reduce the spacing between menu items. Default values (from template styles) are  130px and 33px, and as you can see I reduced those values 3 x times:

  @media screen and (min-height: 550px) {
body.predefined-header1 #sp-header .sp-megamenu-wrapper {margin-top: 50px;}
body.predefined-header1 #sp-header .sp-megamenu-wrapper .sp-megamenu-parent > li,
body.predefined-header1 #sp-header .sp-megamenu-wrapper .sp-megamenu-parent > li:not(:last-child) 
{margin-bottom: 10px;}
}