Есть ли способ сделать такой дизайн и сделать его отзывчивым?

Question

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

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

*** РЕДАКТИРОВАТЬ: наиболее важной частью этого, является то, что белая часть между lo go div и строки меню, должна быть прозрачной. Это было бы так просто, если бы это был только solid цвет, но он должен иметь возможность показывать фоновое изображение за заголовком: /

Answer 1

Я бы сделал заголовок, ссылку для lo go, панель навигации и поместил бы ссылки в панель навигации. Я бы добавил медиазапрос, чтобы задать минимальную ширину для размещения всех ссылок и свернуть их в точке прерывания по ширине:

body {
  width:100%;
  margin: 0;
  padding: 0;
}
header {
  position: relative;
  padding-right: 15px;
}
a.logo {
  position:absolute;
  z-index:1;
  border: 5px solid white;
  border-radius: 50%;
  width: 75px;
  height: 24px;
  top:0;
  left:0;
  background: black;
}
nav {
  position:relative;
  margin: 5px 0;
  height:24px;
  width:100%;
  background: black;
  text-align: left
}
@media (min-width: 767px) {
  nav a {
    display: none;
  }
}

<header>
  <a class="logo">#</a>
  <nav>
    <a>#</a>
  </nav>
</header>

Ключи к отзывчивости в этом примере:

• медиазапросы: https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries

• проценты

Answer 2

Этого можно добиться с помощью медиазапросов и версии bootstrap 4.0, поскольку существует множество классов, которые помогут вам достичь этого. Например, класс "ml-auto" вызовет крайний правый элемент * * * * *, так как его значение определено как 'margin-left: auto! Важный' в bootstrap. Есть много классов, где вы играете. Согласно вашему дизайну я предоставил решение. Я создал его с использованием Bootstrap версии 4, и он отзывчив на мобильных устройствах, планшетах и ​​компьютерах. Если вы хотите, вы можете написать свои классы тоже. Пожалуйста, попробуйте следующий код и проверьте рабочий фрагмент:

#nav-header {
            position: relative;
        }

        #nav-header:before {
            content:"";
            width: 80px;
            height: 100%;
            position: absolute;
            top:0;
            left:0;
            background:#fff;
            z-index: 1;
        }
        
        #nav-header .navbar-brand {
            background:#fe0000;
            text-transform: uppercase;
            font-weight: 600;
            color:#fff;
            text-align:center;
            border-radius: 100px;
            border: 10px solid #fff;
            z-index: 4;
        }

        @media (min-width: 320px) {
            #nav-header .navbar-brand {
                padding: 2% 10%;                
            }
        }

        @media (min-width: 768px) {

            #nav-header {
                margin: 25px 0 25px 25px;
            }

            #nav-header .navbar-brand {
                padding: 1.5% 8%;
            }

        }

        @media (min-width: 992px) {
            #nav-header .navbar-brand {
                padding: 1.4% 6%;                
            }
        }



         #nav-header, #navbarSupportedContent {
            background: #003cff;
            padding:0;
         }

         #navbarSupportedContent {
            z-index: 9;
         }

         #nav-header .navbar-nav {
            list-style: initial;
            color: #fff;
         }

         #nav-header .navbar-nav li {
            margin-right: 2em;
            margin-left: 2em;
         }

         #nav-header .navbar-nav > li > a {
            color:#fff; 
            text-transform: uppercase;
            font-weight: 600;           
         }

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

<nav id="nav-header" class="navbar navbar-expand-lg navbar-light">
      <a class="navbar-brand" href="#">Logo</a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>

      <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav ml-auto">
          <li class="nav-item active">
            <a class="nav-link" href="#">Option 1 <span class="sr-only">(current)</span></a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Option 2</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Option 3</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Option 4</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Option 5</a>
          </li>
        </ul>
      </div>
    </nav>