Large space between header and page heading

A couple more points about the responsive view.

The profile and Log Out/In buttons are quite large when viewed in responsive mode for mobile. Perhaps they can be smaller.

The page links are now listed as ‘please select your page’. It could be replaced with a smaller symbol (as typical in mobile apps) that was not as wide.

If the above were in one line in the mobile version there would not be an overlap. Or this could be something I use in conjunction with any css you give me to solve the problem.

Thanks in advance

The url is http://www.charitydate.club.

The problem is site wide and each page is slightly different as per space between header and page heading. Please check out this one too: http://charitydate.club/membership-account/membership-levels-2/

If you go to http://charitydate.club/browse-members/ and do a search the results page comes up with the geo my wp horizontal bar even further at the top, and even more of a problem in mobile view.

Thanks

Hi,

I reduced the size of the header a little to narrow the gap and I still get the same visual result as above screenshots. Pretty much where I was. To clarify what I have in css I have pasted below (in case there is a conflict; also nav button size is not responding).

* Please add your custom styles below
*/
@media only screen and (max-width: 767px) {
.reveal-modal, .reveal-modal.small, .reveal-modal.medium, .reveal-modal.large, .reveal-modal.xlarge {
width: 80% !important;
top: 15px !important;
left: 50% !important;
margin-left: -40%;
padding: 20px !important;
height: auto;
}
}
.six.columns {
color: black;
}
.header-bg.clearfix {
height: 60px !important;
}
}
@media (max-width: 991px) {
.article-content {
margin-top: 20px;
}
}
.navbar-nav li > a {
font-size: 16px !important;
}

Unfortunately no change has occurred. Same gap, overlaps and font size. (I did clear cache and save changes).

I am trying to achieve a narrow header and no overlap in mobile view.

The look is fine in desktop view. Reduce the browser size and everything is messed up. The page content covers header content!

(Compare the screenshots above or visit any of the pages listed above. Be sure to sign in with the details above.)

Sorry, doesn’t work.

The attachment you have above says it all. The white space between the bottom of honeys and the top of search is huge. I’d like a very small space between them.

Many websites now have slim banners. It helps to make more space above the fold. I am sure you know this.

Here is an example: https://www.chameleonsocial.com/

Oh, I am still having the same problem (sort of). I changed the height of the background image and now I have a large white gap between the revolution slider and a new kleo section containing my body content.

I tried to change the size of the rev slider but only seem to be able to change the grid size. I think the problem may be with the rev slider page size still being similar to the original image size.

What can I do?

Thanks