Как сделать такую шапку?

240

01 июля 2018, 02:50

Как сделать такую шапку? Использовать еще сетку (в моём примере Zurb Foudation) как на картинке.

Блок с логотипом не понимаю как растянуть.

С остальными блоками разобрался.

Дайте идею, как быть.

Мой код:

<header id="masthead" class="site-header">
  <div class="grid-container">
    <div class="grid-x grid-padding-x align-center-middle">

      <div class="site-branding cell medium-2">
        <?php
            the_custom_logo();
            if ( is_front_page() && is_home() ) :
                ?>
          <h1 class="site-title">
            <a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home">
              <?php bloginfo( 'name' ); ?>
            </a>
          </h1>
          <?php
            else :
                ?>
            <p class="site-title">
              <a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home">
                <?php bloginfo( 'name' ); ?>
              </a>
            </p>
            <?php
            endif;
            $astroi_description = get_bloginfo( 'description', 'display' );
            if ( $astroi_description || is_customize_preview() ) :
                ?>
              <p class="site-description">
                <?php echo $astroi_description; /* WPCS: xss ok. */ ?>
              </p>
              <?php endif; ?>
      </div>
      <!-- .site-branding -->
      <div class="cell large-2">
        Пн-Пт 9:00 -18:00 <br> Сб, Вс - выхоной
      </div>
      <div class="cell large-3">
        companymail@gmail.com
      </div>
      <div class="cell large-3"><input type="search"></div>
      <div class="cell large-2">
        +7(831)272-75-24 <br> Заказать звонок!
      </div>
    </div>
  </div>
  <nav id="site-navigation" class="main-navigation">
    <button class="menu-toggle" aria-controls="primary-menu" aria-expanded="false"><?php esc_html_e( 'Primary Menu', 'astroi' ); ?></button>
    <?php
            wp_nav_menu( array(
                'theme_location' => 'menu-1',
                'menu_id'        => 'primary-menu',
            ) );
            ?>
  </nav>
  <!-- #site-navigation -->

</header>
<!-- #masthead -->

Answer 1

Возможно как-то так

.wrapper { 
  display: flex; 
} 
 
.container { 
  display: flex; 
  flex-direction: column; 
  flex-grow: 1; 
} 
 
.logo-wrp { 
  background-color: #000; 
  display: flex; 
  justify-content: center; 
  align-items: center; 
  box-sizing: border-box; 
  padding: 0 10px 20px 120px; 
  position: relative; 
} 
 
.logo-wrp:after { 
  content: ""; 
  display: block; 
  position: absolute; 
  right: -40px; 
  bottom: 0; 
  top: 0; 
  width: 70px; 
  background-color: #000; 
  transform: skewX(-15deg); 
  z-index: -1; 
} 
 
.logo { 
text-decoration: none; 
  color: red; 
  display: block; 
  width: 80px; 
  height: 80px; 
    display: flex; 
  justify-content: center; 
  align-items: center; 
  background-color: yellow; 
  border-radius: 50%; 
} 
 
.info { 
  padding: 20px 70px; 
  box-sizing: border-box; 
  display: flex; 
  align-items: center; 
  border-bottom: 2px solid #000; 
} 
 
.navigation { 
  box-sizing: border-box; 
  padding: 20px 70px; 
  border-bottom: 2px solid #000; 
}

<div class="wrapper"> 
  <div class="logo-wrp"> 
    <a href="#" class="logo"><span>Логотип</span></a> 
  </div> 
  <div class="container"> 
    <div class="info"> 
      <div class="cell large-2"> 
        Пн-Пт 9:00 -18:00 <br> Сб, Вс - выхоной 
      </div> 
      <div class="cell large-3"> 
        companymail@gmail.com 
      </div> 
      <div class="cell large-3"><input type="search"></div> 
    </div> 
    <div class="navigation"> 
      <a href="#">Текст меню 1</a> 
      <a href="#">Текст меню 2</a> 
      <a href="#">Текст меню 3</a> 
    </div> 
  </div> 
</div>