-
AuthorPosts
-
June 23, 2024 at 10:16 am #1456754
Hi there
How can ik create a back button to the previous page in a side bar menu?Greetz
Karin LelouxJune 23, 2024 at 1:13 pm #1456986Hey lelouxwebdesign,
In your sidebar add a Custom HTML widget with this code:
<a href="javascript:history.back()">Go Back</a>
then in the post sidebar you will see a “Go Back” link
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()
[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='']
Best regards,
MikeJune 23, 2024 at 3:20 pm #1457079Tnx 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
KarinJune 23, 2024 at 4:48 pm #1457258Hi,
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:
Then on the frontend you will have a working “Go Back” menu link:
Best regards,
MikeJune 24, 2024 at 3:47 pm #1458248Tnx 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 dutchhttp://www.zeeuwsemeisjesdreischor.nl
Greetz
KarinJune 24, 2024 at 8:49 pm #1458519June 25, 2024 at 9:03 am #1458559Hi 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
KarinJune 25, 2024 at 1:16 pm #1458584use 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' );
June 25, 2024 at 1:53 pm #1458606Guenni007
Unfortunately that is not what i want..
Graatz
KarinJune 25, 2024 at 3:00 pm #1458644yes 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 fromsee here on my main navigation the goback button: https://webers-testseite.de/
June 26, 2024 at 8:10 am #1459280Hi,
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 -
AuthorPosts
- You must be logged in to reply to this topic.