Адаптивная шапка HTML/CSS

Question

Делаю адаптивную шапку, вроде что-то выходит... Но застрял на одном моменте: при уменьшении ширины экрана, когда край экрана доходит до последней ссылки, то последняя ссылка просто перескакивает вниз:

/* Header */
.header {
    width: 100%;
    position: absolute;
    z-index: 1000;
}

.header__inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Nav */
.nav {
    position: relative;
    box-sizing: border-box;
    width: 100%;
    max-width: 880px;
    height: 55px;
    font-size: 1.63vw;

    background-color: black;

    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
}

.nav__link1 {
    float: left;
    display: inline-block;
    box-sizing: border-box;
    vertical-align: top;
    position: relative;

    width: 24.18%;

    text-align: center;
    text-decoration: none;

    height: 55px;
    line-height: 50px;
}

.nav__link2 {
    float: left;
    display: inline-block;
    box-sizing: border-box;
    vertical-align: top;
    position: relative;

    width: 24.17%;

    text-align: center;
    text-decoration: none;

    height: 55px;
    line-height: 50px;
}


.logo__container {
    float: left;
    display: inline-block;
    margin: 50px 0px 0px -11px;
    box-sizing: border-box;
    vertical-align: top;
    position: relative;

    padding: 0px 20px;
    height: 1px;
    line-height: 50px;

    z-index: 1001;
}

.logo {
  position: absolute;
  top: -50px;
  left: -5px;
  height: 75px;
}

.logo img {
  height: 75px;
}

.nav__link3 {
    float: left;
    display: inline-block;
    box-sizing: border-box;
    vertical-align: top;
    position: relative;

    width: 24.17%;

    text-align: center;
    text-decoration: none;

    height: 55px;
    line-height: 50px;
}

.nav__link4 {
    float: left;
    display: inline-block;
    box-sizing: border-box;
    vertical-align: top;
    position: relative;

    width: 24.18%;

    text-align: center;
    text-decoration: none;

    height: 55px;
    line-height: 50px;
}

<header class="header">
        <div class="container">
            <div class="header__inner">
                <nav class="nav">
                    <a class="nav__link1" href="#">Ппппппп</a>
                    <a class="nav__link2" href="#">ООО</a>
                    
                    <div class="logo__container">
                        <div class="logo">
                            <img src="../logo.png" />
                        </div>
                    </div>
              
                    <a class="nav__link3" href="#">Ккккк</a>
                    <a class="nav__link4" href="#">Ррррррр</a>
                </nav>
            </div>
        </div>
    </header>

Сам блок nav отлично уменьшается, сначала остается неизменным, а когда край экрана до него доходит, он как-бы "упирается" в него, и сдвигает вместе с собой. Нужно чтобы ссылки тоже так "упирались" в край экрана и сдвигались, уменьшаясь, вместе с ним.

И возможно ли уменьшение не только по ширине, но и по высоте? Если да, то как это реализовать?

И ещё хотелось бы узнать, может можно как-то ссылки в блоке равномерно распределить, а не подбирать каждую сотую процента? Кажется, будто я что-то напутал, и ссылки могут спокойно сбегать за блок nav, это и мешает. Но не могу найти ошибку...

Answer 1

Ваш вопрос содержит в себе несколько подвопросов, но не видя макетов, нельзя дать объективный ответ ни на один из них.

возможно ли уменьшение не только по ширине, но и по высоте

Да, возможно. Для этого необходимо указать для высоты и ширины одинаковые единицы (vw или vh) с соответствующими пропорциями. Не забывайте указывать максимальную/минимальную ширину/высоту для таких элементов, иначе что-то важное может стать нечитаемым/некликабельным, а второстепенное займёт полэкрана.

можно как-то ссылки в блоке равномерно распределить, а не подбирать каждую сотую процента

Совет один - ограничьте применение float и используйте flex или grid для макета.

body { margin: 0; }


/* Header */
.header {
  position: absolute;
  z-index: 1000;
  width: 100%;
}

.header__inner {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Nav */
.nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 50px; width: 100%;
  max-width: 880px;
  font-size: 1.63vw;
  border-radius: 0 0 10px 10px;
  background-color: black;
}

.nav a {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%; width: 15%;
  border-radius: 0 0 10px 10px;
  text-decoration: none;
  box-shadow: inset 0 0 20px red;
}

.logo__container {
  position: relative;
  display: block;
  height: 100%; width: 25%;
}

.logo {
  position: absolute; top: 0px;
  height: 150%; width: 100%;
  box-shadow: inset 0 0 20px cyan;
}

.logo img { height: 75px; }

<header class="header">
  <div class="container">
    <div class="header__inner">
      <nav class="nav">
        <a class="nav__link1" href="#">Ппппппп</a>
        <a class="nav__link2" href="#">ООО</a>

        <div class="logo__container">
          <div class="logo">
            <img src="../logo.png" />
          </div>
        </div>

        <a class="nav__link3" href="#">Ккккк</a>
        <a class="nav__link4" href="#">Ррррррр</a>
      </nav>
    </div>
  </div>
</header>

БЛОГ НА HUSL

Адаптивная шапка HTML/CSS

Ответы (1 шт):