Меню переключателя кратковременно открывается, а затем закрывается при загрузке страницы, вызывая мерцание

Question

При загрузке страницы меню переключения на короткое время полностью разворачивается, а затем закрывается, как и должно быть. Это действительно кратко, и иногда я даже не вижу этого, но это определенно происходит, вызывая неприятное мерцание.

Я действительно не уверен, где искать.

Настройка: - Тема Wordpress (рамки генезиса). Не думайте, что это wordpress специфицирует c, поэтому я разместил его здесь. - Переопределение CSS кода, который вы найдете ниже. - Меню находится в заголовке страницы с фоновой обложкой.

Итак, вот код, который я переопределяю для стиля заголовка, содержащего меню:

.site-header {
    position: static;
    background-image: url(/my-images/header3.jpg);
    background-repeat: no-repeat;
    background-position: center center;
        -webkit-background-size: cover;
       -moz-background-size: cover;
         -o-background-size: cover;
            background-size: cover;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    width:100%;
   -webkit-box-shadow: 0px 2px 8px 4px rgba(0,0,0,0.25);
   -moz-box-shadow: 0px 2px 8px 4px rgba(0,0,0,0.25);
    box-shadow: 0px 2px 8px 4px rgba(0,0,0,0.25);
    padding: 0 30px;
    min-height: 150px;
}

.site-title a,
.site-title a:focus,
.site-title a:hover {
    color: white;
}

.nav-primary a {
    color: white;
}

.nav-primary a:hover {
    color: white;
    text-decoration: underline;
}

.nav-primary .current-menu-item > a  {
    color: yellow;

}

.nav-primary .sub-menu a {
       background-color: transparent;
       border: 0px;
       color: white;

}

.genesis-nav-menu .sub-menu {
        border-top: 0px;
        display: block!important;
    }

.genesis-nav-menu .sub-menu a {
        border: 0px solid;

    }


.menu-toggle,
.sub-menu-toggle {
    color: white;
}

.menu-toggle:focus,
.menu-toggle:hover,
.sub-menu-toggle:focus,
.sub-menu-toggle:hover {
    background-color: transparent;
    border-width: 0;
    color: white;
}

    .site-inner {
        max-width: 1200px;
        -webkit-box-shadow: 0px 5px 8px 3px rgba(0,0,0,0.25);
        -moz-box-shadow: 0px 5px 8px 3px rgba(0,0,0,0.25);
        box-shadow: 0px 5px 8px 3px rgba(0,0,0,0.25);
    }


.full-width-content .content,
.landing-page .content {
    float: none;
    margin-left: auto;
    margin-right: auto;
    width:100%;   
}

a {
    color: #0073e5;
    text-decoration: none;
    transition: color 0.2s ease-in-out, background-color 0.2s ease-in-out;
}

a:focus,
a:hover {
    color: #333;
    text-decoration: underline;
}

.categories-underline {
    border-bottom: 1px solid #eee;
    padding-bottom: 8px;

}

У вас есть подсказка, почему это происходит? и на что мне смотреть?