Remove blank space between last row and footer

Hi,

In the “No header image - Wide” page template, how can you remove the blank space between the last row and footer?

I saw you recommend using the front page template, but I don’t want to show the header image in this one. What can I do?

Thanks,

Or, alternatively, how could I hide the slide image in that specific page with the “Front Page” template keeping the header performance? I’ve tried hiding the “.sydney.hero.area” but then the header only appears when scrolling down.
Thanks,

Hi,

Did you meant that you want your front page to not display the hero-slider but display it in another pages? If yes, you can set it from Customize > header area > header type
Or if not, can you describe it more details and share your site URL too please.

Regards,
Awan

Hi Awan,

I meant two things:

  1. How to hide the header image for specific pages using the “Front Page” template"? The “header type” customization doesn’t work because I want to show the header image in other pages besides the Front Page.

  2. How to remove the blank space between the last row and footer in the "No header image - Wide” page template?

Thanks,

Hi,

I see… can you share your site URL here? because I need to check it directly.
Also, please let me know in which pages the header image should be hidden.

Regards,
Awan

Hi, my site is not public yet. Let’s focus on the “Front Page” template solution:

  • How could I hide the header slider (image + title) in some specific pages? Say for example, page-id-888

  • For the pages showing a header slider, how can I set different title texts for each page?

Thanks,

Hi, you can use this CSS code below to hide the header slider in a specific page:

.page-id-18 .sydney-hero-area {
    display:none;
}

If you are using sticky menu, then you can try this code instead:

.page-id-18 .sydney-hero-area {
    height: 0;
    margin-bottom: 128px;
}

For this code, you might need to adjust the margin-bottom value, so, the content of the page will not covered by your menu bar.

And don’t forget to change the .page-id-18 from the code in above with your own page id.

Then, to change the text slider, you’ll need to install javascript plugin and put this code in there:

  • Here is for the main title:
jQuery('.page-id-15 .sydney-hero-area .maintitle').text('Hello World!');
  • And here is for the subtitle
jQuery('.page-id-15 .sydney-hero-area .subtitle').text('Lorem ipsum!');

Hi, this code doesn’t work:

.page .sydney-hero-area {
height: 0;
margin-bottom: 128px;
}

This one kind of works, but then you can’t see the menu as its background is transparent until you scroll down:

.page .sydney-hero-area {
height: 0;
margin-bottom: 128px;
display:none;
}

I see… you can change the background color of the menu bar using this CSS code:

.site-header {
    background-color: indianred;
    opacity: 0.8;
}