пытаясь добавить липкое меню на сайт WordPress - PullRequest
Новая
       31

пытаясь добавить липкое меню на сайт WordPress

0 голосов
/ 05 апреля 2020

со следующим CSS Мне удалось создать липкое меню на моем сайте WordPress. К сожалению, мое меню теперь перекрывает заголовки на всех страницах. как мне разделить меню и контент, чтобы весь контент начинался под меню? 

#header-grid {
    background:#fff;
    height:60px;
    z-index:170;
    margin:0 auto;
    width:100%;
    position:fixed;
    top:0;
    left:0;
    right:0;
    text-align: center;
}
<div class=header-grid>

1 Ответ

0 голосов
/ 05 апреля 2020
  • Вместо class="" используйте id=""
  • Вместо absolute или fixed (который будет перекрываться), используйте: 
position: sticky;


/* QuickReset */ * {margin:0; box-sizing:border-box;}

body {
  height: 300vh;
  border: 4px dashed #000;
}

#header-grid {
  background: rgba(255,0,0,0.6);
  height: 60px;
  z-index: 170;
  margin: 0 auto;
  width: 100%;
  position: sticky;
  top: 0;
  left: 0;
  right: 0;
  text-align: center;
}
<div id="header-grid">HEADER</div>
Page content
...