Too much white space in my header

Try this:

.tc-no-sticky-header .tc-header {
    max-height: 130px;
}
.carousel-inner {
    position: relative;
    top: -40px;
}

Hi rdellconsulting, Thank you for getting in touch. You helped me once before with the header on my website which seems to be rather troublesome. I had to make some changes as I discovered that when the website was in responsive mode, the menu was off the screen of mobile devices. So I centred the menu to solve that problem and moved the extra widget to the top right but now the height of the header needs to be reduced.

I tried your code. Although it hasn’t solved the problem, I’ve left the website as it is so that you can see the effect – https://www.signatureprojects.ca

I am wondering whether some of the other codes in the CSS file are part of the problem. Having said that, I’ve played around with the codes and can’t make any improvements. Here is the whole content of my CSS file for your info (including the code you sent yesterday). I’d appreciate any further suggestions you can make. Thank you.

.tc-no-sticky-header .tc-header {
max-height: 130px;
}
.carousel-inner {
position: relative;
top: -40px;
}
.navbar .nav > li > a, .navbar .nav > li > a:first-letter,
.navbar .nav > li.current-menu-item > a,
.navbar .nav > li.current-menu-ancestor > a {
display: inline;
color: black;
font-family: Arial;
font-size: 1em;
padding: 25px;
}
.site-logo > img {
margin-left: -560px;
padding: 0px;
}
/* Change Featured Pages Heading */
.marketing h2 {
font-size: 2em;
font-weight: bold;
color: black;
}
.navbar-inner {
position: relative;
left: 0px;
top: -40px;
padding: 0;
}
.my-extra-widget {
position: relative;
top: -65px;
padding-right: 10px;
}
.tc-no-sticky-header .logo-centered .navbar-wrapper {
margin-top: -100px;
}
.navbar.resp {
margin-bottom: -60px;
}

Link gives a white screen at moment

Hi, Can’t understand this. I’ve used the link today (Sunday) and I get the home page (complete with the header as it was after I used your code in the CSS on Friday). Please can you try again. Thanks.

Link works again. You’ll find my suggested style.css here

It gives you a framework to make further changes and test throughout a range of viewports.

Thank you. I’ve copied & pasted your suggested style.css. To make it look a bit better than it did at first, I changed the value at your line 37 from -80 to -40 as follows;
.navbar-inner {
position: relative;
left: 0px;
top: -40px;
padding: 0;
}

The effect was to bring the menu down into the white space a bit but I still have a header that is too high. I’d like to reduce the height by about 10 mm if I could. Again, I’ve tried tweaking various things but can’t make any difference to the overall height of the header. Any other suggestions gratefully received. Thanks.

Hi, please would you let me know if you are able to help further with the problem I have with my website header. If not, then I know that I need to re-post the question to see if anyone else can help as I do not know how to solve this problem. Thanks.

Sorry, you’d dropped off my radar!

Try this:

.tc-no-sticky-header .tc-header {
    max-height: 140px;
}
.navbar-inner {
    position: relative;
    left: 0px;
    top: -70px;
    padding: 0px;
}

No problem, I thought you’d either given up or forgotten!

The code you sent has worked fantastically. I just had to tweak the position of the menu bar to relocate it inside the header … just trial and error … but a good result as I think you’ll agree – https://www.signatureprojects.ca

I’m very happy! Thank you so much for sticking with me and my problem (again!)

If you’re happy then I’m happy!

Please mark as [resolved] in the rhs sidebar.

Will do! Thank you again!