[Support request] buttons and anchor

Home Forums Support buttons and anchor

Viewing 15 posts - 1 through 15 (of 18 total)
  • Author
    Posts
  • #1248958
    pke

    Hi
    i want to use buttons for a anchor navigation in one site. (see: https://hausvorderdorf.ch/altersheim_wohnung_pflege/so-leben-wir/#pflege). Now i need to:
    1. Make the space around button smaller (space between edge and words) so the buttons are not so big. With the size of letters, it will not be readable anymore)
    2. i want to have a squere button
    3. When a go to an anchor the title is under the Navigation… How to fix tha. (i Ste the anchor to the title… i cant set it to a text above)

    Or do you have a other solution how to make a navigation for one site… and put it into the site?
    Thanks
    pke

    #1249495
    Tom
    Lead Developer
    Lead Developer

    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 🙂

    #1250702
    pke

    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

    #1251220
    David
    Staff
    Customer Support

    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.

    #1251877
    pke

    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

    #1252356
    Tom
    Lead Developer
    Lead Developer

    Give this CSS a shot:

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

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

    #1253775
    Tom
    Lead Developer
    Lead Developer
    #1261161
    pke

    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

    #1262092
    Tom
    Lead Developer
    Lead Developer

    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.

    #1262108
    pke

    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

    #1262556
    David
    Staff
    Customer Support

    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;
        }
    }
    #1263577
    pke

    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!

    #1263949
    Leo
    Staff
    Customer Support

    That looks correct to me 🙂

    #1289770
    pke

    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

Viewing 15 posts - 1 through 15 (of 18 total)
  • You must be logged in to reply to this topic.