web-dev-qa-db-ja.com

ナビゲーションとロゴをロードするたびにメニューが移動する - JointsWP - Foundation 6

こんにちは私は誰もが助けることができるかどうか疑問に思っていました。

私はJointsWP Foundation 6テーマを使用してサイトを作成していて、ロゴとソーシャルリンクを含む新しい固定サイドメニューを作成しました。私の問題は、ユーザーがメニューをクリックするたびに移動してシフトが発生することです - これを止める方法はありますか - ページロードの問題なのか、それとも間違った方法で問題が発生したのでしょうか。私はキャッシングプラグインを追加しようとしましたが、それは助けには思われませんでした。任意の提案は大歓迎です。

これが私のコードの例です。

<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: [email protected]</p>

            </div>


            </div>
            </div>

そして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 -->

編集する

あなたが見ることができるように私は2つのテストページを追加しました - biggreenspace.com/test-page-1そしてあなたはテストページ2にナビゲートすることができるでしょう（他のメニューはあなたをメンテナンススクリーンに連れて行くでしょう）。これは、IE Edgeではなく、主にChromeとFirefoxで発生します。

menusnavigationperformancecache
1
anna

数週間後にわかりました（!!）私は答えを見つけました：

次の行で：

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

持っている

data-margin-top="0"

別のページに移動するたびにロゴが移動するようにしました。これを削除することで問題は解決しました。

それが他の誰かに役立つことを願っています！

0
anna