Блог

У меня возникли некоторые проблемы с моим меню гамбургеров. Когда я нажимаю на меню гамбургера (которое является кнопкой), оно сдвигается влево. Это происходит даже тогда, когда я удаляю анимацию для своего меню гамбургеров и заменяю ее текстом, поэтому я знаю, что это связано с кнопкой. Я использую тему _s WordPress и попытался переопределить все, что мог, но, похоже, я не могу найти, где в коде это происходит. Я думаю, что это стиль по умолчанию, скрытый где-то в коде темы _s.

Вот обновленный код HTML и PHP, найденный в моем header.php файл (в коде по-прежнему сохраняется эта проблема, если я удалю myFunction и заменю классы div текстом).

 <nav id="site-navigation" class="main-navigation">
            <button class="menu-toggle" aria-controls="primary-menu" aria-expanded="false" onclick="myFunction(this)"> 
                <div class="bar1"> </div>
                <div class="bar2"> </div>
                <div class="bar3"> </div>
            </button>

            <?php
            wp_nav_menu(
                array(
                    'theme_location' => 'menu-1',
                    'menu_id'        => 'primary-menu',
                )
            );
            ?>
        </nav><!-- #site-navigation -->
        
  

Вот новый css (я попытался присвоить right:0 .menu-toggle .change, и, похоже, это ни на что не влияет):

  .main-navigation ul a {
            background-color:#335d92;
            width:100%;
        }
        .main-navigation li {
            float:none;
            padding-bottom:0px;
        }
        .current-menu-item a {
            border-width:0px;
    
        }
        .main-navigation ul a:hover {
            border-width:0px;
            background-color:#293859;
        }
        .main-navigation ul ul a{
            display:none;
        }
    
        #site-navigation button {
            border-radius:0px;
            background:none;
            border:0px;
            color:white;
            padding-bottom:0px;
        }
        .menu-toggle:focus, .button:focus, [type="submit"]:focus {
       outline: none;
        }
    
        .main-navigation {
            padding-top:0px;
            right:0;
        }
        .menu-toggle .change{
            right:0;
    }
  

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

 #site-navigation button{
   float:right;
 }
.menu-navigation-container {
   clear: both;
 }