Hi I was wondering if anyone could help.

I’m creating a site using JointsWP Foundation 6 theme and have created a new fixed side menu which includes the logo and social links. My problem is everytime a user click on the menu it reloads causing a shift – is there a way of stopping this – is it a page load issue or have i come about it the wrong way? I tried adding a caching plugin but it hasn’t seemed to help. Any suggestions appreciated.

Here is examples of my code:

<body <?php body_class(); ?>>

    <div class="off-canvas-wrapper">

        <?php get_template_part( 'parts/content', 'offcanvas' ); ?>

        <div class="off-canvas-content" data-off-canvas-content>

            <header class="header show-for-small-only" role="banner">

                 <!-- This navs will be applied to the topbar, above all content 
                      To see additional nav styles, visit the /parts directory -->
                 <?php get_template_part( 'parts/nav', 'offcanvas-topbar' ); ?>






            </header> <!-- end .header -->
            <!-- THE NEXT PART HAS BEEN MOVED FROM THE TOP OF THE PAGE.PHP -->
            <div id="content">

            <div id="inner-content" class="row expanded">
            <div class="medium-3 columns show-for-medium" data-sticky-container>
                <div class="sticky" data-sticky data-margin-top="0">
            <!-- LOGO HERE -->
            <div class="row logo">
            <div class="medium-10 columns">
            <img src="<?php echo get_site_url(); ?>/wp-content/themes/JointsWP-CSS-master/assets/images/logo.png" alt="big green space"/>
            </div>
            </div>
            <div class="row verticalMenu">
            <!-- VERTICAL MENU HERE -->
            <?php joints_top_nav(); ?>
            </div>
            <div class="row socialR">
            <p>
            <i class="fa fa-facebook-square" aria-hidden="true"></i><i class="fa fa-linkedin-square" aria-hidden="true"></i>
            <br/>
            t: +44 000 000000<br/>
            e: x@fsdfs.com</p>

            </div>


            </div>
            </div>

and the page.php

<?php get_header(); ?>

    <div id="inner-content" class="row">
    <div class="medium-4 columns show-for-medium"> -->
    <!-- LOGO HERE -->
    <!-- VERTICAL MENU HERE -->

    <!-- </div> -->

       <main id="main" class="large-9 medium-9 columns contentSection" role="main">


            <?php if (have_posts()) : while (have_posts()) : the_post(); ?>

                <?php get_template_part( 'parts/loop', 'page' ); ?>

            <?php endwhile; endif; ?>                           

        <!--</main> <!-- end #main -->



    <!--</div> <!-- end #inner-content -->

<!--</div> <!-- end #content -->

Read more here: Nav and logo laoding each time causing menu to move JointsWP – Foundation 6


Solution:

If you know the solution of this issue, please leave us a reply in Comment section, to update the question.


Wordpress related questions and answers: