Как сверстать двухстрочное меню?

225

15 июня 2018, 15:00

/* BASE SETTINGS */ 
 
* { 
  margin: 0; 
  padding: 0; 
} 
 
body { 
  width: 100%; 
} 
 
ul { 
  list-style: none; 
} 
 
a { 
  text-decoration: none; 
} 
 
.inner-html { 
  width: 960px; 
  margin: 0 auto; 
} 
 
 
/* HEADER */ 
 
.header { 
  padding-top: 43px; 
} 
 
.logo { 
  font-family: "Pacifico", "Roboto"; 
  font-size: 41px; 
  display: inline; 
  width: 7%; 
  float: left; 
} 
 
 
/* NAV MENU */ 
 
.nav { 
  padding-left: 15vw; 
  width: 620px; 
  font-family: "Roboto"; 
  list-style-type: none; 
  float: left; 
} 
 
.navigation li ul { 
  float: left; 
  padding-left: 25px; 
  padding-top: 20px; 
} 
 
.navigation li ul li:nth-child(1) a { 
  color: #a5a5a5; 
} 
 
.navigation li ul li:nth-child(2) a { 
  color: #474747; 
}

<link href="https://fonts.googleapis.com/css?family=Pacifico|Roboto" rel="stylesheet"> 
 
<div class="inner-html"> 
  <header class="header"> 
    <div class="logo">Blitz</div> 
    <nav class="nav"> 
      <ul class="navigation"> 
        <li> 
          <ul> 
            <li><a href="/">Homepage</a></li> 
            <li><a href="/">HOME</a></li> 
          </ul> 
        </li> 
        <li> 
          <ul> 
            <li><a href="/about">Who  are  we?</a></li> 
            <li><a href="/about">ABOUT</a></li> 
          </ul> 
        </li> 
        <li> 
          <ul> 
            <li><a href="/projects">MY  Portfolio</a></li> 
            <li><a href="/projects">PROJECTS</a></li> 
          </ul> 
        </li> 
        <li> 
          <ul> 
            <li><a href="/news">Latest  News</a></li> 
            <li><a href="/news">BLOG</a></li> 
          </ul> 
        </li> 
        <li> 
          <ul> 
            <li><a href="/contact">Get  in  touch</a></li> 
            <li><a href="/contact">CONTACT</a></li> 
          </ul> 
        </li> 
      </ul> 
    </nav> 
  </header> 
</div>

Оно не адапативное. Как его сделать адаптивным ?
Костыль для .nav в виде width:620px;. Как исправить?

Answer 1

Для тренировки .. смотрите и учитесь

Для проверки адаптивности : jsfiddle.net

* { 
  margin: 0; 
  padding: 0; 
  list-style: none; 
  text-decoration: none; 
} 
 
section { 
  display: flex; 
  width: 90%; 
  justify-content: space-between; 
  align-items: center; 
  margin: auto; 
} 
 
span.trigger { 
  display: none; 
} 
 
ul { 
  display: flex; 
  justify-content: space-around; 
} 
 
li { 
  padding: 4px; 
  border-bottom: 2px solid transparent; 
} 
 
li:hover { 
  border-bottom: 2px solid blue; 
} 
 
li p { 
  color: #ccc; 
  font-size: 14px; 
  font-variant: small-caps; 
} 
 
li:hover p { 
  color: red; 
  opacity: .5; 
} 
 
li span { 
  font-variant: small-caps; 
} 
 
.brand { 
  font-family: "Pacifico"; 
  font-size: 2.4em; 
  font-weight: 900; 
} 
 
@media (max-width:640px) { 
  li p { 
    display: none; 
  } 
} 
 
@media (max-width:480px) { 
  section { 
    position: relative; 
  } 
  span.trigger { 
    display: inline-block; 
    width: 40px; 
    height: 40px; 
    position: absolute; 
    right: 0; 
    top: 0; 
  } 
  span.trigger i { 
    display: block; 
    width: 32px; 
    height: 8px; 
    background: #222; 
    margin: 4px auto; 
  } 
  ul li { 
    display: none; 
  } 
}

<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> 
 
<link href="https://fonts.googleapis.com/css?family=Pacifico|Roboto" rel="stylesheet"> 
 
<section> 
  <span class="trigger"> 
	<i></i> 
	<i></i> 
	<i></i> 
</span> 
  <span class="brand"> 
	blitz 
</span> 
  <ul> 
    <li> 
      <a href="#"> 
        <p>Homepage</p> 
        <span>home</span> 
      </a> 
    </li> 
    <li> 
      <a href="#"> 
        <p>wo are wy</p> 
        <span>about</span> 
      </a> 
    </li> 
    <li> 
      <a href="#"> 
        <p>my portfolio</p> 
        <span>projects</span> 
      </a> 
    </li> 
    <li> 
      <a href="#"> 
        <p>latest news</p> 
        <span>blog</span> 
      </a> 
    </li> 
    <li> 
      <a href="#"> 
        <p>get in touch</p> 
        <span>contacts</span> 
      </a> 
    </li> 
  </ul> 
</section>