Hi.
About Header height changing:
If you have no big reason for using CSS to configure it, simply use the template settings.
But if you need to use CSS then you just need to study the behavior of the tool which use. When you change the height of the Header in the template settings, all other elements are aligned according to this height. But when you change the Header height through CSS, all other elements are crooked.
And here it is enough to ask yourself a question "Why is it going on?". Then open the browser code inspector and you will be able determine that the height value of the Header changed in the template settings is used as well in the line-height property for the menu item links, in the height property for the .logo (logo container) and in the height property for the #offcanvas-toggler.
After that you will know that fo changing the Header height via CSS you need also change the remaining items. Thus, the full code for changing the height of the Header will look like.
#sp-header {
height: 120px;
}
#sp-header .logo {
height: 120px;
}
.sp-megamenu-parent > li > a,
.sp-megamenu-parent > li > span {
line-height: 120px;
}
#offcanvas-toggler {
height: 120px;
}
And more compact record
#sp-header,
#sp-header .logo,
#offcanvas-toggler {
height: 120px;
}
.sp-megamenu-parent > li > a,
.sp-megamenu-parent > li > span {
line-height: 120px;
}
If you want to use your own class for Header (what is the need only if you use a copy of template style for individual pages and you need other appearance of Header on these pages)
Your code should look like
#sp-header.mysize,
#sp-header.mysize .logo,
#sp-header.mysize #offcanvas-toggler {
height: 120px;
}
#sp-header.mysize .sp-megamenu-parent > li > a,
#sp-header.mysize .sp-megamenu-parent > li > span {
line-height: 120px;
}
About blue overlay:
I am not an employee of Joomshaper and therefore I can't see hidden content. I do not need an administrator access, but a public link to the page where there is this problem would help determine the cause through the browser code inspector. Based on the screenshot, I can only say one thing - in the overwhelming majority of cases this is a user mistake, but not a template bug.
