How make social link wrapper static

This is not as easy as it sounds! The reason is because the js/singl.js file in the theme actually moves the #social-links-wrapper from one location in the DOM to another using JavaScript.

There are a couple ways to approach it. One solution which might work for you is to use CSS only to simply move the social media buttons back to the top using absolute positioning. Here is an example I came up with:

@media only screen and (max-width: 767px) {
	body:not(.has-primary-nav) #masthead {
		padding-top: 80px;
	}
	#social-links-wrapper {
		position: absolute;
		left: 0;
		top: 46px;
		padding: 0;
		width: 100%;
	}
}

Note that you may need to adjust the padding or top values in your own implementation.

Another possible way to try to solve this would be to remove the JavaScript that is responsible for moving the #social-links-wrapper container. It’s tricky to do that because what you have to do is dequeue the js/singl.js file and then re-enqueue a modified version of that script that does some of the other things the theme needs, such as the click event for toggling the bottom-panel and the backstretch script which is what sets up the dynamically-resized background image option. In addition dequeueing the script and re-enqueuing the parts of it that are still needed, you would also have to add a bit of custom CSS to put the #social-links-wrapper container into the right place after the adjustment. I tried doing just that, but I was unable to get the backstretch script to re-enqueue properly again without running into an error. I’ll post what I tried here, and if you want to continue on the dequeue/re-enqueue route, then someone else who is a bit more well-versed in JavaScript than I am would need to step in and help. Also, keep in mind the CSS-only solution above might suffice. ??

Here’s what I tried but that didn’t work because it somehow knocked out the backstretch script:

1. Create a child theme

2. Create a js/child-singl.js file in your child theme with the following content (note that this is a copy of the singl.js file with the responsive() function removed:

( function( $ ) {

        $( document ).ready( function() {

                var widgets_wrapper = $( '#widgets-wrapper' ),
                    widgets_trigger = $( '.widgets-trigger' ),
                    icon            = $( '.widgets-trigger .fa' );

                /*
                 * Click event for toggling the bottom-panel.
                 */
                widgets_trigger.click( function( e ) {
                        e.preventDefault();
                        widgets_wrapper.toggleClass( 'hide' );
                        icon.toggleClass( 'fa-angle-up' ).toggleClass( 'fa-angle-down' );
                } );

                /*
                 * Backstretch.
                 */
                 if ( '' != singl_background_image_vars.header_bg && singl_script_vars.bg_image_url ) {
                        $( 'body' ).backstretch( singl_script_vars.bg_image_url );
                 }

        } );

} )( jQuery );

3. Create a functions.php file in your child theme with the following content:

<?php
/**
 * Dequeue the js/singl.js script.
 *
 * Hooked to the wp_print_scripts action, with a late priority (100),
 * so that it is after the script was enqueued.
 */
function swb_dequeue_script() {
   wp_dequeue_script( 'singl-script' );
}
add_action( 'wp_print_scripts', 'swb_dequeue_script', 10 );

function swb_enqueue_script(){
        wp_enqueue_script( 'child-singl-script', get_stylesheet_directory_uri() . '/js/child-singl.js', array( 'jquery', 'underscore' ), '20140929', true );
}
add_action( 'wp_enqueue_scripts', 'swb_enqueue_script' );

4. Add this to the bottom of the child theme style.css file:

#social-links-wrapper {
        display: block;
}

@media only screen and (max-width: 767px) {
        body:not(.has-primary-nav) #header-wrapper {
                display: block;
                z-index: 1;
        }

        #social-links-wrapper {
                margin-top: 40px;
                padding: 0;
        }
}

That’s as far as I got. When I try this 2nd route, I get a js error that says “Uncaught ReferenceError: singl_background_image_vars is not defined.” I’m not that advanced with JavaScript and don’t know where to go next to solve it. But maybe this will give you a start on it if you are a curious person and want to keep going! (or someone else could step in and help?) Or you could just try the CSS-only solution from above and leave it at that.

Even though I couldn’t crack 2nd dequeue/enqueue solution idea, I’m still curious about it! I’d love to see a proper solution if anyone else is willing to give it a go. ??

(I am a very curious person.)