hexo-theme-essence/source/css/_partial/header.styl

A Simple Clean Theme for Hexo with user-friendly Navigation System.

.header-shadow 
  box-shadow: 0 -4px 10px var(--header-shadow-color);

.header-input-shadow 
  box-shadow: 0 -4px 10px var(--header-shadow-color);

.header-inner 
  padding-top: 2px // fix vertical align
  min-height: 60px;
  line-height: 60px;
  width: 100%;
  background: var(--background-color);
  transition: box-shadow ease .2s;
  font-size: 2rem;
  .navbar
    float: right;
  .blog-title 
    padding: 0 20px;
    display: inline-block;
    a 
      color: var(--text-secondary-color)
      &:hover 
        text-decoration: none;
        color: var(--text-color);
    #menu-button
      font-size: 1em;
      color: var(--navbar-color);
      cursor: pointer;
      margin-right: 5px;
      font-weight: bold
  .menu 
    margin-right: 10px;
    .menu-item 
      display: inline-block;
      margin-right: 10px;
    .menu-item-icon
      font-size: 1em
    .menu-item-link 
      color: var(--text-secondary-color)
      &:hover 
        text-decoration: none;
        color: var(--text-color);

@media only screen and (min-width: 770px) 
  .header-inner .blog-title 
    .iconfont.icon-menu1 
      display: none;
      float: left;

@media only screen and (max-width: 769px) 
  .header-inner
    min-height: 45px;
    line-height: 45px;
    .blog-title 
      display: block;
      width: 100%
      .iconfont.icon-menu1
        display: inline;
    .menu .menu-item 
      display: block;
    .navbar 
      display: none;
      line-height: 1.5em;
      float: none;
      .menu 
        margin-right: 0;
        margin-bottom: 5px;
        li 
          margin-right: 0;
          padding-left: 55px;