Почему текст не сразу приклеивается к правому краю, а только после выполнения JS?

Question

[Quiab]

Здравствуйте!
С помощью Bootstap верстаю сайт
Думаю код интуитивно понятен, проблема в том, что при первом запуске Sign In | Sign Out прижимаются к кнопке, а после повторного открытия этого меню - прижимается к правому краю, как и должно быть изначально

<!-- HTML CODE -->
    <div class='my_login nav navbar-dark bg-dark'>
      <a class='my_close navbar-brand btn btn-second ml-2'>▽</a>
      <div class="mr-5" style="float:right;">
        <ul class="nav">
          <li class="nav-item">
            <a class="nav-link active" href="/login">Sign in</a>
          </li>
          <li><a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">|</a></li>
          <li class="nav-item">
            <a class="nav-link" href="/registration">Sign up</a>
          </li>
        </ul>
      </div>
    </div>

    <div class="my_blank navbar-light bg-light" style="display: none;">
      <a class='my_open navbar-brand btn btn-light ml-2'>▷</a>
    </div>

// JavaScript Code
const show_btn = document.querySelector('.my_open');
const close_btn = document.querySelector('.my_close')
const close_block = document.querySelector('.my_blank')
const log = document.querySelector('.my_login');

show_btn.addEventListener('click', () => {
    close_block.style.display = 'none'
    log.style.display = 'block'
})

close_btn.addEventListener('click', () => {
    log.style.display = 'none'
    close_block.style.display = 'block'
})

Answer 1

[iBird Rose]

потому что navbar-light bg-light изначально display: flex
а ты ему задаешь display: block

Comments

[Quiab]

Ох, спасибо тебе, друг! Второй вечер в перерывах от других задач пытался исправить это, да не мог додуматься как) Я явно научился еще одному вопросу, который буду задавать себе при неработающем коде) Спасибо, еще раз)

[Сергей delphinpro]

Еще одно подтверждение того факта, что нужно оперировать классами, а не стилями.