Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • #1456754

    Hi there
    How can ik create a back button to the previous page in a side bar menu?

    Greetz
    Karin Leloux

    #1456986

    Hey lelouxwebdesign,
    In your sidebar add a Custom HTML widget with this code:
    <a href="javascript:history.back()">Go Back</a>
    Enfold Support 6151
    then in the post sidebar you will see a “Go Back” link
    Enfold Support 6153
    you can style it as you wish and clicking it will send the visitor to the last page they viewed.
    If you want to use a button, you can create a buton with the shortcode wand and use this as the manual link: javascript:history.back()
    Enfold Support 6157

    [av_button label='Go Back' icon_select='yes' icon='ue831' font='entypo-fontello' button_type='' link='manually,javascript:history.back()' link_target='' download_file='https://' attachment='' attachment_size='' downloaded_file_name='' size='large' position='center' label_display='' title_attr='' size-text='' av-desktop-font-size-text='' av-medium-font-size-text='' av-small-font-size-text='' av-mini-font-size-text='' margin='' margin_sync='true' padding='' padding_sync='true' av-desktop-margin='' av-desktop-margin_sync='true' av-desktop-padding='' av-desktop-padding_sync='true' av-medium-margin='' av-medium-margin_sync='true' av-medium-padding='' av-medium-padding_sync='true' av-small-margin='' av-small-margin_sync='true' av-small-padding='' av-small-padding_sync='true' av-mini-margin='' av-mini-margin_sync='true' av-mini-padding='' av-mini-padding_sync='true' color_options='' color='theme-color' custom_bg='#444444' custom_font='#ffffff' btn_color_bg='theme-color' btn_custom_grad_direction='vertical' btn_custom_grad_1='#000000' btn_custom_grad_2='#ffffff' btn_custom_grad_3='' btn_custom_grad_opacity='0.7' btn_custom_bg='#444444' btn_color_bg_hover='theme-color-highlight' btn_custom_bg_hover='#444444' btn_color_font='theme-color' btn_custom_font='#ffffff' btn_color_font_hover='white' btn_custom_font_hover='#ffffff' border='' border_width='' border_width_sync='true' border_color='' border_radius='' border_radius_sync='true' box_shadow='' box_shadow_style='0px,0px,0px,0px' box_shadow_color='' animation='' animation_duration='' animation_custom_bg_color='' animation_z_index_curtain='100' hover_opacity='' sonar_effect_effect='' sonar_effect_color='' sonar_effect_duration='1' sonar_effect_scale='' sonar_effect_opac='0.5' css_position='' css_position_location=',,,' css_position_z_index='' av-desktop-css_position='' av-desktop-css_position_location=',,,' av-desktop-css_position_z_index='' av-medium-css_position='' av-medium-css_position_location=',,,' av-medium-css_position_z_index='' av-small-css_position='' av-small-css_position_location=',,,' av-small-css_position_z_index='' av-mini-css_position='' av-mini-css_position_location=',,,' av-mini-css_position_z_index='' id='' custom_class='' template_class='' av_uid='' sc_version='1.0' admin_preview_bg='']

    Enfold Support 6155

    Best regards,
    Mike

    #1457079

    Tnx Mike
    Unfortunately that is not what i mean and it does not work…;
    i have a left side bar menu and i want the back button or text shown in that side bar.

    http://www.zeeuwsemeisjesdreischor.nl
    Greetz
    Karin

    #1457258

    Hi,
    Sorry I was thinking about the sidebar and not the sidebar header. For the sidebar header menu items, Try adding this code to the end of your child theme functions.php file in Appearance ▸ Editor:

    add_filter('wp_nav_menu_items', 'do_shortcode');
    function go_back_shortcode() {
        return '<a href="javascript:history.back()" class="go-back-link">Go Back</a>
                <script>
                document.addEventListener("DOMContentLoaded", function() {
                    var goBackLink = document.querySelector(".go-back-link");
                    if (goBackLink) {
                        goBackLink.parentElement.classList.add("go-back-parent");
                    }
                });
                </script>';
    }
    add_shortcode('go_back', 'go_back_shortcode');
    function custom_go_back_css() {
        echo '
        <style>
        .go-back-parent a:not(.go-back-link) {
            padding: 0 !important;
            margin: 0 !important;
        }
        </style>
        ';
    }
    add_action('wp_head', 'custom_go_back_css');
    

    Then in the menu item use a hash tag “#” as the URL and add this shortcode [go_back] to the title:
    Enfold Support 6171
    Then on the frontend you will have a working “Go Back” menu link:
    Enfold Support 6175

    Best regards,
    Mike

    #1458248

    Tnx so much Mike
    How can i translate the button to dutch and how can i style the button? Fonts and color etc., etc.
    “Go back” is “Ga terug” in dutch

    http://www.zeeuwsemeisjesdreischor.nl

    Greetz
    Karin

    #1458519

    Hi,
    In the code above change the text “Go Back” to “Ga terug”
    Enfold Support 6211
    And the font color etc can be changed with the class go-back-link
    like this:

    .go-back-link {
    /* your css here */
    }

    Best regards,
    Mike

    #1458559

    Hi Mike
    And how do i adjust the css?
    I mean: it says: your css here…; how and where do i place the font name ( and size ) and the color?
    Tnx in advance..

    Greetz
    Karin

    #1458584

    use that class: go-back-link for styling.

    i have on some installations for posts/portfolio on top a goback button with this:

    function go_back_button(){
    ?>
    <script type = "text/javascript">
    (function($){
      $('<div class="avia-button-wrap avia-button-left goback"><a href="" class="avia-button av-icon-on-hover avia-color-theme-color   avia-icon_select-yes-left-icon avia-size-small avia-position-center "><span class="avia_button_icon avia_button_icon_left " aria-hidden="true" data-av_icon="" data-av_iconfont="entypo-fontello"></span><span class="avia_iconbox_title">zurück</span></a></div>').prependTo('#top.single .post-entry:first');
      $('.goback').on('click', function(e){
          e.preventDefault();
          window.history.back();
      });
    })(jQuery);
    </script>
    <?php
    }
    add_action( 'wp_footer', 'go_back_button' );

    the window.history.back(); can do the job too.
    but you can place that manually be each button with that class custom-class : goback
    then only use:

    function go_back_button(){
    ?>
    <script type = "text/javascript">
    (function($){
      $('.goback').on('click', function(e){
          e.preventDefault();
          window.history.back();
      });
    })(jQuery);
    </script>
    <?php
    }
    add_action( 'wp_footer', 'go_back_button' );
    #1458606

    Guenni007
    Unfortunately that is not what i want..
    Graatz
    Karin

    #1458644

    yes sorry – didn’t read carefully your first post.

    but where do you like to goback ? – f.e. if you are comming from your homepage to f.e. portfolio : beelden?
    my class above will link back to the page where you are coming from – in that case to homepage. If you are comming from a different portfolio – it will go back to that. Always back to the page you came from

    see here on my main navigation the goback button: https://webers-testseite.de/

    #1459280

    Hi,

    And how do i adjust the css?
    I mean: it says: your css here…; how and where do i place the font name ( and size ) and the color?

    To adjust the style of the link, you can use this css code in the Enfold > General Styling > Quick CSS field:

    .go-back-link {
       color: red;
       font-size: 16px;
       font-family: 'Calibri', sans-serif;
    }

    Best regards,
    Ismael

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