I ended up having to visit the media gallery within WordPress. I changed the pixel dimensions for specific images, to then visit these same images again to do a “restore original image”. Once I did the “restore image” process, the page displayed correctly again. I am not sure why I had to visit these images specifically to do this, so if you can explain why I had to do this, that would be great.

I am getting closer to the desired result.

I want to hide the hamburger menu on this specific page.

I tried using the following code within the quick CSS and within the media query for 767px.

.page-id-4988 .responsive #top #wrap_all .main_menu {
display: none;
}

I just realized that I can not include the logo as a page element because the hamburger menu doesn’t display correctly.

I need to have the logo display centered and full width in the header.

I can use the following code to hide the logo based on a CSS media query. If I then put the logo onto the page using the page builder, the logo is blocked by portions of the header.

@media only screen and (max-width: 767px) {
.responsive #top .logo {
margin-top: 15px;
}
.responsive .logo img {
display: none;
}
}

Link to mobile sample page:
https://new.namzcustomcycleproducts.com/staging/mobile-splash

I tried using some PHP code that I had found on the Internet. I ended up removing this particular code from the child theme functions.php file, and I started using the Yoast SEO plugin. The Yoast plugin seems to provide the meta functionality for Facebook.

Here is the code that did not seem to work:

function add_opengraph_doctype( $output ) {
        return $output . ' xmlns:og="http://opengraphprotocol.org/schema/" xmlns:fb="http://www.facebook.com/2008/fbml"';
    }
add_filter('language_attributes', 'add_opengraph_doctype');
 
//Lets add Open Graph Meta Info
 
function insert_fb_in_head() {
    global $post;
    if ( !is_singular()) //if it is not a post or a page
        return;
        echo '<meta property="fb:admins" content="1600152201"/>';
        echo '<meta property="og:title" content="' . get_the_title() . '"/>';
        echo '<meta property="og:type" content="article"/>';
        echo '<meta property="og:url" content="' . get_permalink() . '"/>';
        echo '<meta property="og:site_name" content="Namz Custom Cycle Products"/>';
    if(!has_post_thumbnail( $post->ID )) { //the post does not have featured image, use a default image
        $default_image="https://new.namzcustomcycleproducts.com/staging/wp-content/uploads/2018/05/namz-fb.jpg"; //replace this with a default image on your server or an image in your media library
        echo '<meta property="og:image" content="' . $default_image . '"/>';
    }
    else{
        $thumbnail_src = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'medium' );
        echo '<meta property="og:image" content="' . esc_attr( $thumbnail_src[0] ) . '"/>';
    }
    echo "
";
}
add_action( 'wp_head', 'insert_fb_in_head', 5 );

Here is one attempt that did not work:

<?php /* Template Name: Dave */
require('../wp-load.php');
?>
<style type="text/css">
    body {
        background: #000;
        }
    #namz-container-1 {
        width: 100%;
        height: auto;
    }
    #namz-wrapper {
        width: 90%;
        margin: 0 auto;
        }
    #namz-logo {
        background-image: url(https://staging.namzcustomcycleproducts.com/wp-content/uploads/2018/04/namz-logo-PNG-636x245.png);
        background-position: center;
        background-repeat: no-repeat;
        height: 300px;
        width: 100%;
        }
    #namz-slider {
        margin: 0 auto;
        }
</style>
<div id="namz-container-1">
<div id="namz-wrapper">
<div id="namz-logo"></div>
<div id="namz-slider">
<?php echo do_shortcode('[layerslider id="4"]'); ?>
</div>
</div>
</div>

I tried using a do_shortcode before I posted the issue. I tried the function with and without the av_ prefix as well.

What can I do to get a visible slider by way of the template file ?

I want the logo that appears in the upper-left corner to be as wide as the slider, so the logo should be equally as wide as the white background you see being the slider. And the hamburger menu should sit precisely or float in the black space about the letter “Z” in the NAMZ part of the logo.