-
AuthorPosts
-
April 6, 2021 at 7:37 pm #1292901
Hi everyone,
I’ve been having a hard time trying to implement some functions.php code since the changes aren’t taking effect.
After reading some threads on the topic I consulted with my hosting providers, but after they performed some server-related stuff the changes still didn’t reflect design-wise, so I was wondering whether you might know the reason why this file isn’t working properly?The changes I’m pursuing are social icons in slide-out menu and on footer widget (third column).
I’ve done the source code checking and noticed that one change does appear but is absent in the front-end:CHANGE 1: social icons on slide-out menu.
// add social icons inside the mobile menu
function ava_custom_script_mod_social(){
?>
<script>
(function($){
var int = ”;
function a() {
var isMobile = $(‘.av-burger-menu-main’).css(‘display’),
htmlString = $(‘#header_main .social_bookmarks:first’).find(‘li a’),
mobileMenu = $(‘.av-burger-overlay’),
socialString = [];if(isMobile == ‘none’) return;
if($(‘.burger-social’).length) clearInterval(int);htmlString.each(function() {
var socialClass = $(this).parent(‘li’).attr(‘class’),
socialItems = $(this).wrap(‘<li class=”‘+ socialClass + ‘ av-active-burger-items burger-social”></div>’).parent().unwrap();
socialString.push(socialItems);
});$(socialString).each(function() {
$(this).appendTo(‘#av-burger-menu-ul’);
});
}$(‘#header’).on(‘mousedown’, ‘.av-main-nav-wrap’, function() {
int = setInterval(function() {
a();
}, 500);
});})(jQuery);
</script>
<?php
}
add_action(‘wp_footer’, ‘ava_custom_script_mod_social’);This one does not show up:
CHANGE 2: social icons on footer widget (third column). I’ve also added the concerning CSS code that comes with it.
function social_bookmarks_register_widget() {
register_widget( ‘add_social_bookmarks’ );
}
add_action( ‘widgets_init’, ‘social_bookmarks_register_widget’ );class add_social_bookmarks extends WP_Widget {
public function __construct() {
$widget_ops = array(
‘classname’ => ‘socialbookmarks-widget’,
‘description’ => __(‘A widget that displays the social bookmarks’, ‘avia_framework’)
);
parent::__construct( ‘add_social_bookmarks’, THEMENAME.’ Social Bookmarks’, $widget_ops );
}public function widget( $args, $instance ) {
$title = apply_filters( ‘widget_title’, $instance[‘title’] );
echo $args[‘before_widget’];
//if title is present
if ( ! empty( $title ) )
echo $args[‘before_title’] . $title . $args[‘after_title’];
//output
echo $before_widget;
$social_args = array(‘outside’=>’ul’, ‘inside’=>’li’, ‘append’ => ”);
echo avia_social_media_icons($social_args, false);
echo $after_widget;
}public function form( $instance ) {
if ( isset( $instance[ ‘title’ ] ) )
$title = $instance[ ‘title’ ];
else
$title = __( ‘Social Bookmarks’, ‘avia_framework’ );
?>
<p>
<label for=”<?php echo $this->get_field_id( ‘title’ ); ?>”><?php _e( ‘Title:’ ); ?></label>
<input class=”widefat” id=”<?php echo $this->get_field_id( ‘title’ ); ?>” name=”<?php echo $this->get_field_name( ‘title’ ); ?>” type=”text” value=”<?php echo esc_attr( $title ); ?>” />
</p>
<?php
}public function update( $new_instance, $old_instance ) {
$instance = array();
$instance[‘title’] = ( ! empty( $new_instance[‘title’] ) ) ? strip_tags( $new_instance[‘title’] ) : ”;
return $instance;
}
}I’ve also tried this code that was suggested in a similar case, but didn’t affect anything:
function custom_stuff(){
?>
<div style=”display:none”>Find this</div>
<?php
}
add_action(‘wp_footer’, ‘custom_stuff’);At this point, I’m questioning whether is a WP or theme-related issue?
I would truly appreciate some help from you. Link to site has been provided in the private content area.
Thanks in advance.
Regards!
H
April 8, 2021 at 7:20 am #1293189Hey Harold,
Thank you for the inquiry.
We modified that code a bit to make it compatible with the updated mobile menu. Please check the snippet in the following thread.
// https://kriesi.at/support/topic/social-icon-in-mobile-menu/#post-1226347
Best regards,
IsmaelApril 8, 2021 at 8:29 am #1293202Hi Ismael,
Thank you for your help; however, I’ve implemented both codes (found on the thread) and cleared all caches, but nothing changed.
Regards,
H
April 8, 2021 at 8:47 am #1293208@ismael – nice short code – i will try that too – if it will work on my test installation
@hacart – if you post code here on board – please use the code function on top of the input area:
click code on top – enter your code ( paste in ) – click again ( now you see it is a closing code tag)
it is much easier to verify the code if all signs are in a copy-ready form.Edit: if he has one social-bookmarks placed.
and we had to find a solution if he wants footer socialbookmarks too. Then the selector: “.social-bookmarks” is there twice.
And though i got on my testpage the hamburger icons twice.
Btw: on my testpage these inserted lists are on display: none – but that might be a setting unique for my installation.
But test it in your page – and look with developer tools if these icons are there but not displayed.April 9, 2021 at 9:28 am #1293456Hi,
Thank you for the update.
@guenni007: Yes, that should work. Make sure that social icons are actually enabled.
@hacart: It is probably not working because the social icons are not enabled, or they do not actually exist in the page. You have to enable the social icons in the Enfold > Header > Extra Elements panel, look for the Header Social Icons settings. If you want to hide the icons on desktop view or on larger screens, try to create a css media query.
Best regards,
IsmaelMay 2, 2021 at 2:11 am #1297755Hey Ismael,
You are right. That was certainly needed.
Cheers,
h
May 4, 2021 at 3:53 am #1298119Hey guys,
I hadn’t realised there is a problem with “link positioning” in the mobile menu’s social icons since every time I click on a specific icon, the one next to it (on the right) opens up the page. How could we fix this pls?
Regards,
h
May 4, 2021 at 7:15 am #1298166Hi,
It is due to the default padding of the li elements in the burger menu. To fix it, use this css code.
#top #wrap_all #av-burger-menu-ul li.av-active-burger-items.burger-social a { padding: 0; } #top #wrap_all #header #av-burger-menu-ul > li.av-active-burger-items.social_icon_1 { margin-left: 50px; }
Best regards,
IsmaelMay 4, 2021 at 5:17 pm #1298349Hey Ismael,
They got far into the left border as you will see. I then changed the 0 value for 10 and it seemed natural, but again the problem persisted.
Regards,
h
May 6, 2021 at 9:03 am #1298730Hi,
Thank you for the udpate.
You missed the second css declaration above. The css code should move or pull the social icons to the right.
Best regards,
IsmaelMay 6, 2021 at 5:15 pm #1298843I’ve just double-checked and both declarations are set correctly in the Custom CSS area. Could you specify what exact declaration you mean, pls?
Regards.
May 10, 2021 at 7:26 am #1299284Hi,
Did you remove the css code? The default padding of the mobile menu items or of the social icon entries are back. This is the css code that was missing.
#top #wrap_all #header #av-burger-menu-ul > li.av-active-burger-items.social_icon_1 { margin-left: 50px; }
It applies a 50px margin to the left of the first social icon, consequently moving the other icons.
Best regards,
IsmaelMay 12, 2021 at 6:09 am #1299825Hey Ismael,
Thank you very much. They work perfectly now and moved too close to the button above, as well. Can you pls help me move them a bit down back?
Regards,
h
May 13, 2021 at 8:21 am #1300052Hi,
You can actually target the button and apply a top and bottom margin to it.
.html_av-overlay-side #top #wrap_all #av-burger-menu-ul > li.menu-item-2568 { margin-bottom: 20px; margin-top: 20px; }
The selector or class name menu-item-2568 is unique to the QUIERO DISEÑAR! button.
Best regards,
Ismael -
AuthorPosts
- You must be logged in to reply to this topic.