remove space between header and content pages

Hello!

I have checked out Your site, here is a custom css code which will decrease the spacing above the picture:

#site-header .site-header-main {
    padding: 4.4rem 0 0rem;
}

#site-navigation .nav-menu {
    margin-bottom: 0;
}

.site-header-main .site-branding .site-title {
    margin-bottom: 0;
}

Please use this code in a custom css plugin. If you don’t have anything like this installed on Your site, I recommend the Simple Custom CSS plugin. When You have installed it, please go to Appearance->Custom CSS and paste in the code above.

Let me know how it goes, if You have any questions, feel free to ask.

On the side note, as per forum rules, please don’t create multiple threads for the same issue. I completely understand that You need help ASAP, but with this You are only making our work harder.

Cheers,
Balint

Thank you so much for your help, this worked like a charm!

Yes, I am very sorry for the double thread. This happened as a misunderstanding, since the post didn’t publish immediatly, and I didnt see any confirmation, I assumed something was wrong, and tried again. Next time I will know to have more patient.

(I tried to delete it afterwards, but as I understand this is not possible)

Thank you again, for quick and helpful reply.

/A

You are welcome ?? I am glad we could solve this together ??

Although it cannot be deleted, I think it would be wise if You would mark the other thread as resolved.

Have a nice day!

Cheers,
Balint

Thanks for pitching in Balint!

Don’t hesitate to reach out if something else crops up!

Hello again,
As I resolved this one problem, with your help, a new one arised – I guess this is the nature of things? ??

As you can see on my front page now, the picture is higher up, as I wanted.
This works fine for the front page, but not so well for the other pages, the small gap looks wierd on the other pages with text.
I tried to sort the problem out in a easy (and probably not smart) way, by adding a horizontal line at the top of the other pages, inside of the “edit page” bar. What you see as the title is written in under the horizontal line with bigger font, and the real title is hidden. This works fine for the static pages (see “About” and “Contact”).

BUT, on my blog page, I can’t seem to make it work, as each posts title can’t have these lines over it.

How would you solve this problem? If the solution includes removing the horizontal line from the individual pages and using coding, this is off course welcomed as well.

Hope this is possible to understand.
Thank you in advance.

(I hope it is okay that I posted here, instead of a new thread, as it is kind of related to the original problem?)

/A

Hello!

I guess the best way would be to modify the previous CSS code to remove the spacing only on specific pages. I am not sure how many spacing would You like, so I think for the first step, please modify my above code, this part

#site-header .site-header-main {
    padding: 4.4rem 0 0rem;
}

change to this:

.home #site-header .site-header-main {
    padding: 4.4rem 0 0rem;
}

The original code I have given You removes empty spacing on 3 places, this is how we have achieved that there is no spacing under the menu. With this modification on every page other than the home page, we are removing spacing only on 2 places, this way we get some amount of spacing under the menu (screenshots here and here). Please tell me how do you like it, and we can fine-tune this. Make sure to try it with and without the horizontal lines You have added.

Cheers,
Balint

Yes, this does lower the sites just the right amount, which looks better.

But now I think it would look best with the horizontal line. Basically the spacing is perfect, but if I could have a horizontal line in that new space, it would look better!

I could do it on the pages manually, but not on the post-page (only by putting the code into all the post titles, which isn’t very effective.)

hahaha, I am sorry for all this helplessness, you are really a life saver, I don’t know how to thank you!

Okay, so please add this code under the code snipped I have posted a couple of minutes ago (you will have to remove the horizontal lines what You have put in manually):

#site-content .container #site-main {
    border-top: 1px solid #E0E3E5;
}
.home #site-content .container #site-main {
	border-top: none;
}

Cheers,
Balint

hmmm, this one didn’t seem to work.

Now I put it over, instead of under the previous one, then it worked. Thank you again for help!

You are welcome ??