Helping out - Spacious Theme

Hi there,

1. The home page is the posts page so it's automatically generated by WordPress.

If you want to use Elementor or WP Show Posts, you can just create a new static page and assign it under Wordpress Readings settings:
https://wordpress.org/support/article/settings-reading-screen/

2. Try this CSS:

.navigation-search input[type="search"], .navigation-search input[type="search"]:active, .navigation-search input[type="search"]:focus  {
    background-color: #ffffff;
    color: #000000;
}

Adding CSS: https://docs.generatepress.com/article/adding-css/

3. You could add a button in the header element using HTML:
https://docs.generatepress.com/article/adding-buttons/

Then use our smooth scroll script:
https://docs.generatepress.com/article/smooth-scroll/

Let me know :)

Hello Leo,

Thank you for the code it is working perfectly, but I cannot figure out the smooth-scroll feature on a button, I put one in the header on Main Page and after clicking I would to smooth scroll on first 2 ( or any other post ).

I don't know where to place class="smooth-scroll" as I cannot edit MainPage code.

Thank you :)

Hi there,

Smooth Scroll only works with anchor links on the same page, they won't work if you're navigating to a new page.

The smooth-scroll class is added to the Link/Button not the anchor e.g

<a href="#jumpto" class="smooth-scroll">Smooth Scroll to somewhere"</a>

Then the element it jumps to for example a heading:

<h2 id="#jumpto">This is where it the link takes me</h2>

Hello David,

That I know

Smooth Scroll only works with anchor links on the same page, they won’t work if you’re navigating to a new page.

I just want to make a button on main page in the header and after clicking it will scroll on posts, but I cannot find a way how to edit the home page. Since I dont have any in Pages.

Sorry my bad :)

You can add the HTML for your button in the Header Element or use a Hook Element to add it elsewhere:

https://docs.generatepress.com/article/hooks-element-overview/

Visual Hooks:

https://docs.generatepress.com/article/hooks-visual-guide/

When setting the display rules for your Hook you need to choose the Front Page location for it to show on the Home

Okay, I managed to do it through a hook thank you and can you explain to me now where I should put this snippet? Please.

add_filter( 'generate_smooth_scroll_duration', 'tu_smooth_scroll_duration' );
function tu_smooth_scroll_duration() {
return 800; // milliseconds
}

So I can slow it down a lot:)?

That is a PHP Snippet so this article explains:

https://docs.generatepress.com/article/adding-php/

Well, I used CodeSnippet, copied code there.

add_filter( ‘generate_smooth_scroll_duration’, ‘tu_smooth_scroll_duration’ );
function tu_smooth_scroll_duration() {
return 40000; // milliseconds
}

Activated. Yet not slowed down.

I would think 40000 milliseconds is over the upper limit.

40 seconds smooth scroll is quite slow and not very common.

Well, it was more like testing if it was working, even when I set it like on 1000ms it does not work.

I really don't know where could be the problem, all I want is just a nice smooth(slow)-scroll from the header to first 2 posts at Homepage after clicking on the button in the header.

this is code for the button:

a class="button" href="#jumpto" class="smooth-scroll"

code for an anchor:

<span id="jumpto"></span>

And code in the code-snippet plugin:

<?php
add_filter( ‘generate_smooth_scroll_duration’, ‘tu_smooth_scroll_duration’ );
function tu_smooth_scroll_duration() {
return 3000; // milliseconds
}

Can you re-add the smooth-scroll. And the filter snippet. Then i can take a look.

What do you mean exactly? Re-add it is still there at the website , I have not changed anything.

I am looking at your Home Page - there is a Scroll Down button in the Header Element - which has no scroll-down class applied to it ?

Im an idi.. sorry I have realised why it didn't work the whole time because I had two classes in that code

class="button" href="#jumpto" class="smooth-scroll">Scroll down

So I have just moved smooth-scroll to button class.
Problem Solved, thank you David and Leo for patience and help (y)