buttons and anchor

Hi there,

1. You can reduce the spacing around them like this:

.wp-block-buttons .wp-block-button {
    margin: 2px;
}

2. There should be an option in the button block to have square corners.

3. Try adding our smooth scroll feature to the buttons: https://docs.generatepress.com/article/smooth-scroll/

Hope this helps :)

Hi
i have prblems with smooth scroll:
i add
add_filter( 'generate_smooth_scroll_duration', 'tu_smooth_scroll_duration' );
function tu_smooth_scroll_duration() {
return 8000; // milliseconds
}
to the customicer -> individual css

then i got to ->Menue - Activate Custom CSS and on every menuebutton i add ccs-class
What do i Write here??? in there???

and where do I have to put the element ?
You descibe it like this:
***
To add smooth scroll to regular links, simply give the element the smooth-scroll class.
My Section
***

And whre do i ut that on my anchor buttons? see here:
https://hausvorderdorf.ch/altersheim_wohnung_pflege/so-leben-wir/
anchor-buttons are: "AKTIVITàTEN" "ESSEN" "PFEGE"

And there is no way to change the round lines in the biuttons to squere.
Thanks
pke

Hi there,

we need to add the following PHP code to your site:

add_filter( 'generate_smooth_scroll_elements', function( $elements ) {
  $elements[] = 'a[href*="#"]';
  
  return $elements;
} );

This document explains how:
https://docs.generatepress.com/article/adding-php/

This will make all anchors smooth scroll.

To remove the Border Radius. Select the Button. Go to the Settings panel on the right, select Block and below this you will see Border Radius - set this to 0.

Yes thanks, nearly all Problems solved!
I Just added the php-code (nothing else) an it works!

Also the Butten as a squere works - only
. how do i reduce the space between border line and the name of the button /space inline?
- how do i make the border line finer
- how do i reduce the high of a button without making the letters smaller?
Thank you!
pke

Give this CSS a shot:

.button, 
.wp-block-button .wp-block-button__link {
    padding: 5px 10px;
    border-radius: 0;
    border-width: 1px;
}

Great support, All fixed, Have a nice Day.
Thanks pke

Thanks, you too!

sorry to reopen this topic:
it all works - But NOT on mobile website: have a look - the smoth scroll, the different buttone, the anchor is mobile not working.

https://hausvorderdorf.ch/altersheim_wohnung_pflege/wohnen-pflege-leben

„“
And a other webpage - fit.ch - i now get since wp 5.4 always this message

Fehler-Details
==============
Ein Fehler vom Typ E_ERROR wurde in der Zeile 297 der Datei /nhldata03/670/96670/data/web/fit/htdocs/yogapilates/wp-content/plugins/gp-premium/elements/class-layout.php verursacht. Fehlermeldung: Maximum execution time of 1 second exceeded
thanks pke

The button CSS I gave you is inside a media query like this:

@media (min-width: 769px) {
    CSS is in here
}

It needs to be outside that media query so it works on mobile as well.

Maximum execution of 1 second sounds like a server thing - might be worth checking them. You can try deactivating your Layout Elements to see if one of them is causing it.

Thanks
But st the end.. WHAT code do i need to write WHERE on the site or in php plugin snippets or on CSS in the Customizer. Thanks for giving the advise for all that. So ot will wor
K on desktop and mobile.
Pke

Go to Customizer > Additional CSS and DELETE ALL the code.
Then add this Code:

.button, 
.wp-block-button .wp-block-button__link {
    padding: 5px 10px;
    border-radius:0;
    border-width: 1px;
}

@media (min-width: 769px) {
    .main-navigation .main-nav ul li:first-child > a {
        padding-left: 40px;
    }
}

Hi
now it works on all media!

And one more hint:
if i yust want to bring in the navigation 40 px from left - AND NOT also the first sub-navigation - i just use this css.. Right?

@media (min-width: 769px) {
.main-nav ul li:first-child > a {
padding-left: 40px;
}
}
Have a nice Day!

That looks correct to me :)

Hi
it does not work anymore: I want smoth scroll and also that the anchor-Link is working:
it works on http://www.hausvorderodrf.ch bit it does not work on http://www.tolle.ch - and it should also work on mobile sites!

I did put in in the code snippet-plugin:

add_filter( 'generate_smooth_scroll_elements', function( $elements ) {
$elements[] = 'a[href*="#"]';

return $elements;
} );

And I add on the Custonmizer the CSS (which also put the primary navigation 40 pt inside)
.button,
.wp-block-button .wp-block-button__link {
padding: 5px 10px;
border-radius:0;
border-width: 1px;
}

@media (min-width: 769px) {
.main-navigation .main-nav ul li:first-child > a {
padding-left: 40px;
}
}

But something goes wrong - works not on mobile and it complitely NOT works on http://www.tolle.ch
Thanks
pius