Блог

Главная - Вопросы по программированию - Централизовать кнопки навигации на странице в режиме мобильного просмотра

Централизовать кнопки навигации на странице в режиме мобильного просмотра

#bootstrap-4

#bootstrap-4

Вопрос:

У меня есть сайт с двумя кнопками начальной загрузки на правой панели навигации с именами Demo и Login.

В то время как они отлично смотрятся на рабочем столе. Но на мобильных устройствах кнопки просто перекрывают друг друга в правой части экрана.

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

 <div class="align-self-center ml-auto header-col-right">
        <a class="btn-custom" href="#"><i 
            class="fa fa-arrow-down"></i>-->Demo</a>
        <a class="btn-custom" href="#"><i class="fa fa-arrow-down"></i>-->Login</a>
        <span id="menu-btn"></span>
                       
        <div class="clearfix"></div>
</div>

Как этого можно достичь.

Комментарии:

1. @media-query (минимальная ширина: 350 пикселей) и (максимальная ширина: 650 пикселей) { #menu { позиция: абсолютная; слева: 50%; справа: 50%; } }

Ответ №1:

Вам нужно установить абсолютное положение меню

Я добавляю идентификатор в меню, чтобы упростить доступ к нему

                    <div id='menu' class="align-self-center ml-auto header-col-right">
                        <a class="btn-custom" href="#"><!--<i class="fa fa-arrow-down"></i>-->Demo</a>
                        <a class="btn-custom" href="#"><!--<i class="fa fa-arrow-down"></i>-->Login</a>
                        <span id="menu-btn"></span>
                   
                    <div class="clearfix"></div>
                </div>

И в стиле do

     <style>
      #menu {
        position: absolute;
        left: 50%;
        right: 50%;
      }
    </style>

Комментарии:

1. @bharti спасибо за вашу помощь. Но это не помогло мне. Вот ссылка на сайт test.advertigital.com

2. О, теперь я знаю, в чем проблема, вы просто ставите display: grid-template-columns: 100%; но вам нужно установить высоту заголовка в height: fit-content; Я пробую это, и это работает

3. здравствуйте, @walid behzoui, не могли бы вы помочь со скриптом css, который вы использовали для этой работы, для лучшего понимания.

4. @tegah ты ищешь этот результат ibb.co/sjpbY8L

5. Да, @Валид Безуи, это именно то, что я ищу.