Instantly share code, notes, and snippets.

Embed
What would you like to do?
BEM. Header & Nav & Mobile toggle btn. Style - 1
<!-- begin Header
=========================================================================== -->
<header class="header clearfix">
<!-- begin Header Container -->
<div class="container header__container clearfix">
<div class="header__logo">
<a href="#" class="header__logo-link">
<img src="http://via.placeholder.com/200x50/4F84DB/FFFFFF?text=LOGO" alt="" class="header__logo-image"> </a>
</div>
<div class="header__nav">
<!-- begin Navigation -->
<nav class="nav">
<ul class="nav__items clearfix">
<li class="nav__item">
<a class="nav__item-link" href="#">Проекты</a>
</li>
<li class="nav__item">
<a class="nav__item-link" href="#">Новости</a>
</li>
<li class="nav__item">
<a class="nav__item-link" href="#">Контакты</a>
</li>
<li class="nav__item">
<a class="nav__item-link" href="#">О компании</a>
</li>
</ul>
</nav>
<!-- end Navigation -->
</div>
<!-- begin Nav Mobile Toggle -->
<button type="button" class="nav-mobile-toggle">
<span class="nav-mobile-toggle__icon-bar"></span>
<span class="nav-mobile-toggle__icon-bar"></span>
<span class="nav-mobile-toggle__icon-bar"></span>
</button>
<!-- end Nav Mobile Toggle -->
</div>
<!-- end Header Container -->
</header>
<!-- end Header
=========================================================================== -->
/* -------------------------------------------------------------------------
begin Header
* ------------------------------------------------------------------------- */
.header {
background-color: #fff;
position: relative;
padding: 10px 0;
.header__logo {
position: relative;
float: left;
}
.header__nav {
position: relative;
float: right;
}
.header__logo-link {
display: block;
}
.header__logo-image {
display: block;
}
}
/* -------------------------------------------------------------------------
end Header
* ------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------
begin Navigation
* ------------------------------------------------------------------------- */
.nav {
position: relative;
.nav__item {
float: left;
margin-right: 65px;
&:last-child {
margin-right: 0;
}
}
.nav__item-link {
display: block;
font-size: 1rem;
padding: 13px 0;
text-align: center;
}
}
/* -------------------------------------------------------------------------
end Navigation
* ------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------
begin Nav Mobile Toggle
* ------------------------------------------------------------------------- */
.nav-mobile-toggle {
border: none;
background-color: transparent;
display: none;
position: absolute;
right: 15px;
top: 50%;
transform: translateY(-50%);
.nav-mobile-toggle__icon-bar {
background-color: #4F84DB;
display: block;
height: 2px;
margin: 6px 0;
width: 25px;
}
}
/* -------------------------------------------------------------------------
end Nav Mobile Toggle
* ------------------------------------------------------------------------- */
/* begin Media Max-Width 767
============================================================================ */
@media screen and (max-width:767px) {
/* -------------------------------------------------------------------------
begin Navigation
* ------------------------------------------------------------------------- */
.nav {
display: none;
}
/* -------------------------------------------------------------------------
end Navigation
* ------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------
begin Nav Mobile Toggle
* ------------------------------------------------------------------------- */
.nav-mobile-toggle {
display: block;
}
/* -------------------------------------------------------------------------
end Nav Mobile Toggle
* ------------------------------------------------------------------------- */
}
/* end Media Max-Width 767
============================================================================ */
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment