1

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 -->

Edit:

i have added 2 test pages so that you can see - biggreenspace.com/test-page-1 and you will be able to navigate to test page 2 (the other menu will take you to the maintenance screen). This primarily happens in Chrome and Firefox - not in IE edge.

  • Hi, welcome to WPSE. Can you please what do you explain by reload? Does the entire page reload or just the menu? An online example would make it much easier to investigate the matter. – Jack Johansson May 20 '17 at 10:53
  • Hi, So when a user navigates through the menu the whole page flickers - and it looks like the side menu and logo are being called - they dissapear and reappear. My client has not yet seen the site so I'm afraid at the moment I don't want to put it online (currently its in maintenance mode). If I can't figure it out I will tke the site off maintenance and post it here. Thanks – anna May 20 '17 at 11:15
  • Yes, it would be nice to see it online. Please let me know when it's ready. – Jack Johansson May 20 '17 at 11:37
  • Hi @JackJohansson i have added 2 test pages so that you can see - biggreenspace.com/test-page-1 and you will be able to navigate to test page 2 (the other menu will take you to the maintenance screen). – anna May 21 '17 at 13:35
  • Cute website. But the menu doesn't move or behave strangely after i click the items... – Jack Johansson May 21 '17 at 15:45
0

Ok after a few weeks(!!) I found the answer:

In the follwoing line:

<div class="medium-3 columns show-for-medium" data-sticky-container>
                    <div class="sticky" data-sticky data-margin-top="0">

Having

data-margin-top="0"

Caused the logo to move everytime I navigated to another page. Removing this stopped the issue.

Hope it helps someone else!

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.