Блог

Я работаю над проектом wordpress для друга. К несчастью (для меня), она решила, что сайту нужен липкий заголовок, который выходит за рамки моего реального понимания CSS. Я создал css, который помогает мне центрировать логотип и меню ниже. Теперь мне нужна помощь в том, чтобы сделать его липким и установить логотип между позициями меню/навигационной панели.

Экран заголовка [1]: https://i.stack.imgur.com/Vg3PF.jpg

 a:focus {
 outline: 0; 
}
@import url('https://fonts.googleapis.com/css2?family=Open Sans:wght@300amp;family=Playfair Display SCamp;display=swap');

/* center logo*/
.site-branding{
width:100% !important;
text-align:center;

}
.site-header .site-branding img {
margin: auto;
margin-top: 50px;
margin-bottom: 30px;
max-width: 300px;

}
/* center menu */
nav#site-navigation {
width: 100%;
text-align: center;
margin-right: 0px;
margin-bottom:55px;
font-size: 24px;
font-family: Playfair Display SC;
}
@media (min-width: 768px){
.woocommerce-active .site-header .site-header-cart {
width: 21.7391304348%;
margin: 0 auto;
float:none;
}
.entry-content{
        font-family: Open Sans;
    }
    .h2 {
        font-family: Playfair Display SC;
    }````
 

вы можете использовать sticky и position : исправлено для липких элементов.

 .sticky {
  position: fixed;
  top: 0;
  width: 100%
}