Приклеенный заголовок витрины

Я пытаюсь создать липкий заголовок для своего сайта WordPress (www.carryoneeverything.com). У меня установлена ​​последняя тема Storefront, но я не могу получить свой логотип, навигацию, корзину и поиск в одной строке. Я думаю, это потому, что они все в отдельных блоках?

Я хочу, чтобы мой заголовок выглядел так: https://www.hollisterco.com/shop/us когда это будет сделано.

Кроме того, панель администратора закрывает липкий заголовок, а липкий заголовок закрывает тело, когда я делаю:

#masthead {
    position: fixed;
    top: 0;
    width: 100%;
}

Могу ли я решить это в CSS или мне нужно использовать javascript?


wordpress html css storefront
person Adam Gorecki    schedule 12.12.2017    source источник

Ответы (3)


arrow_upward
0
arrow_downward

Вы определенно можете решить эту проблему с помощью CSS. Родительский контейнер, который содержит элементы, которые вы хотите выровнять, может иметь добавленные атрибуты flex, чтобы он выстраивался для вас. Узнайте больше о flex здесь: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Когда что-то скрывается за фиксированной позицией div, то, скорее всего, это проблема z-индекса. Это позволяет вам наслаивать div, сохраняя одни div сверху, а другие снизу.

пример: z-index:1 будет покрыт z-index:2. Подробнее о z-индексе читайте здесь: https://www.w3schools.com/cssref/pr_pos_z-index.asp

.parent{
  display:flex;
  justify-content:space-between;
  align-items:center;
}

.child{
  width:20%;
  background-color:black;
  color:white;
  text-align:center;
}
<div class="parent">
  <div class="child">
    1
  </div><!-- child -->
    <div class="child">
    2
  </div><!-- child -->
    <div class="child">
    3
  </div><!-- child -->
</div><!-- parent -->

person jeh    schedule 12.12.2017

arrow_upward
0
arrow_downward

Это проблема wordpress. Мы не можем решить ее, просто дав вам код. Мы должны иметь доступ к сайту. Тема также может предоставить вам некоторые возможности редактирования (параметры темы). На самом деле это небольшая проблема, кстати.

person Wicfasho    schedule 12.12.2017

arrow_upward
0
arrow_downward

Добавьте CSS в style.css.

#masthead {
    position: fixed;
    top: 0;
    width: 100%;
}
@media screen and (min-width: 768px) {
/*resizing the logo image */
#masthead.sticky .custom-logo-link img {
    width: auto;
    height: 40px;
}

/*positioning the main-navigation */
#masthead.sticky .main-navigation {
    text-align: right;
    position: fixed;
    top: 0;
    right: 300px;
    padding: 0;
    width: auto;
}


/*positioning the logo*/
#masthead.sticky .custom-logo-link {
    position: fixed;
    top: 0;
    margin: 0;
    padding: 0;
}
/*adjusting default margins and paddings*/
#masthead.sticky .site-header-cart .cart-contents{
    padding:1em 0;
}
#masthead.sticky .main-navigation ul.menu>li>a, .main-navigation ul.nav-menu>li>a {
    padding: 1em 1em;
}
#masthead.sticky .site-branding{
    margin-bottom: 1em;
}

/*positioning the cart-menu */
#masthead.sticky .site-header-cart {
    width: 14% !important;
    position: fixed !important;
    top: 0;
    right: 12%;
    padding: 0;
}

/*applying the position fixed on the masterhead */
#masthead.sticky{
    position: fixed;
    top: 0;
    width: 100%;
}
/*removing the site search*/
#masthead.sticky .site-search{
    display:none;
}
}

Создайте файл «stickyheader.js» в папке js вашей темы. и добавьте следующий код

(function($){
$(document).ready(function () {
    $(window).scroll(function() {
          if ($(this).scrollTop() > 100){  
            jQuery('#masthead').addClass('sticky');
          }
          else{
            jQuery('#masthead').removeClass("sticky");
          }
            });
}); 
})(jQuery);

Добавьте этот код в functions.php, чтобы файл js был включен

$path = get_stylesheet_directory_uri() .'/js/';
if (!is_admin()) wp_enqueue_script('stickyheader', $path.'stickyheader.js',
array('jquery'));
person Mujtaba Haroon    schedule 20.08.2019