css GeneratePress响应标头

Posted 2021-05-13

/* # GENERATEPRESS HEADER # */
/* GeneratePress header fix for phablets & small tablets
Change the 1024px value in two places to where you have nav/logo overlap */
@media(min-width: 841px) {
    .inside-header {
      display: flex;
      align-items: center;
    }
    .site-logo {
      width: 20%;
    }
    .site-logo:not(.sticky-logo) img {
        width: 140px;
    }
    .nav-float-right .inside-header .main-navigation {
      width: 80%;
    }
    #menu-main-nav {
      display: flex;
      justify-content: flex-end;
    }
    #sticky-navigation {
        padding: 10px;
    }
}
@media (min-width:768px) AND (max-width:840px) {
  .inside-header {
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    padding: 20px 0 0 0;
  }
  .site-logo img {
      width: 140px;
  }
  #site-navigation {
    min-width: 768px;
    padding: 10px;
    text-align: center;
  }
  #site-navigation ul li {
    display: inline-block;
    float: none;
  }
}
*/