css

С помощью следующего 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>

css menu sticky

LavaLava 5 Апр 2020 в 18:54

Нам понадобится минимально воспроизводимый пример. Ни одного дива

–

j08691

5 Апр 2020 в 18:56

1 ответ

Вместо 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

Roko C. Buljan 5 Апр 2020 в 18:58

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

1 ответ

Похожие вопросы

Новые вопросы