2

Кнопка находится в верхней шапке, при уменьшении размера экрана, нужно чтобы кнопка перемещалась в шапку меню, как показано на фотке введите сюда описание изображения

мой код:

<div class="row">
  <div class="col d-flex justify-content-end navbar-header">
    <a class="navbar-brand" href="#" style="color: #0CB38A">
      <h2>LOGO</h2>
    </a>
  </div>
  <div class="col-5">
    <strong style="font-size: 15px;">Ростов-на-Дону</strong><br>
    <p class="lead" style="font-size: 15px;"> Ленина 2Б</p>
  </div>
  <div class="col">
    <div class="d-flex justify-content-end">
      <h4>+7(863)-777-00-00</h4>
    </div>
  </div>
  <div class="col">
    <button type="button" class="btn btn-primary">Записаться на прием</button>
  </div>
</div>

<nav class="navbar navbar-expand-lg navbar-light bg-#0CB38A;">
  <div class="container-fluid" style="background-color: #1FA181;">
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarContent" aria-controls="navbarContent" aria-expanded="false">
              <span class="navbar-toggler-icon"></span>
            </button>
    <div class="collapse navbar-collapse" id="navbarContent">
      <ul class="navbar-nav mr-auto mb-2">
        <li class="nav-item ">
          <a href="#" class="nav-link" style="color: white;">О клинике</a>
        </li>
        <li class="nav-item">
          <a href="#" class="nav-link" style="color: white;">Услуги</a>
        </li>
        <li class="nav-item">
          <a href="#" class="nav-link" style="color: white;">Специалисты</a>
        </li>
        <li class="nav-item">
          <a href="#" class="nav-link" style="color: white;">Цены</a>
        </li>
        <li class="nav-item">
          <a href="#" class="nav-link" style="color: white;">Контакты</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

мой сайт: мой сайт

Буду очень благодарен!

3 ответа 3

2

Попробую расписать более подробно идею из ответа @KopteLove.

Добавьте две кнопки в оба необходимых места. Для каждой добавьте классы на скрытие для необходимых размеров экрана (например d-none d-sm-inline-block для кнопки в меню и d-inline-block d-sm-none для кнопки в шапке).

1
  • Спасибо за ответ! Вроде уже самостоятельно решил, я добавил две кнопки, и нацепил на них по отдельности id и попробовал скрыть их через @media @media (max-width: 991px){ #button1{ display: none; } } @media (min-width: 991px){ #button2{ display: none; } }
    – Adam
    Commented 28 янв. 2022 в 16:36
1

Можно попробовать добавить в навигацию кнопку "записаться на прием", на десктопе ее скрывать, а на мобиле показывать, соответственно ту которая в хедере на мобиле скрывать)

0
1

Решил вопрос путем добавления двух кнопок и на каждую кнопку добавил id, далее в CSS скрыл кнопки через @media

  <!--Первая шапка-->  
    <div class="row">
        <div class="col-1"> 
            <nav class="navbar navbar-expand-lg navbar-light bg-#0CB38A;">
                <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarContent" aria-controls="navbarContent" aria-expanded="false">
                    <span class="navbar-toggler-icon"></span>
                </button>
            </nav>
        </div>
        <div class="col d-flex justify-content-end navbar-header">
            <a class="navbar-brand" href="#" style="color: #0CB38A"><h2>LOGO</h2></a>
        </div>
        <div class="col" id="adres1">
            <strong style="font-size: 15px;">Ростов-на-Дону</strong><br>
            <p class="lead" style="font-size: 15px;"> Ленина 2Б</p>
        </div>
        <div class="col">
            <div class="d-flex justify-content-end text-wrap">
                <h4>+7(863)-777-00-00</h4>
            </div>
            <div id="adres2">
                <p class="lead" style="font-size: 15px;"> Ростов-на-Дону</p>
            </div>
        </div>
        <div class="col" id="button1">
            <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal" style="background-color: #0DBC91;">Записаться на прием</button>
        </div>
    </div>
<!--Вторая шапка-->

<nav class="navbar navbar-expand-lg navbar-light bg-#0CB38A;">
    <div class="container-fluid" style="background-color: #1FA181;">  
        <div class="collapse navbar-collapse" id="navbarContent">
            <ul class="navbar-nav mr-auto mb-2">  
                <li class="nav-item ">
                    <a href="#" class="nav-link" style="color: white;">О клинике</a>
                </li>
                <li class="nav-item">
                    <a href="#" class="nav-link" style="color: white;">Услуги</a>
                </li>
                <li class="nav-item">
                    <a href="#" class="nav-link" style="color: white;">Специалисты</a>
                </li>
                <li class="nav-item">
                    <a href="#" class="nav-link" style="color: white;">Цены</a>
                </li>
                <li class="nav-item">
                    <a href="#" class="nav-link" style="color: white;">Контакты</a>
                </li>
                <div class="col" id="button2">
                    <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal" style="background-color: white; color: #0DBC91;">Записаться на прием</button>
                </div>
            </ul>
        </div>
    </div>
</nav>

CSS:

@media (max-width: 991px){
  #button1{
    display: none;
  }
}

@media (min-width: 991px){
  #button2{
    display: none;
  }
}

введите сюда описание изображения введите сюда описание изображения

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.