Мелкие доработки css

[Will]

Добрый день,

у меня такой шаблон http://unishop-template.tw1.ru/

вот это место

хочу привести к следующему виду , то есть значок категорий поставить перед категориями, а вместо него стрелочку вниз

то есть вот так

Со стрелочкой всё просто.

Но не могу поставить значок перед Категории. Помогите, плиз.

[GetWeb]

в stylesheet.css

/* Найти: */
#menu #category {
    position: relative;
    display: block;
    margin: 0;
    float: left;
    padding-left: 15px;
    font-weight: 500;
    line-height: 40px;
}

/* Заменить на: */
#menu #category {
    position: relative;
    display: block;
    margin: 0;
    float: left;
    padding-left: 40px;
    font-weight: 500;
    line-height: 40px;
}

/* Найти: */
#menu .btn-navbar {
    position: absolute;
    display: block;
    top: 8px;
    right: 11px;
    margin: 0;
    padding: 0;
    box-shadow: none;
    cursor: default;
}

/* Заменить на: */
#menu .btn-navbar {
    position: absolute;
    display: block;
    top: 8px;
    left: 15px;
    margin: 0;
    padding: 0;
    box-shadow: none;
    cursor: default;
}

 

[Will]

спасибо, т.е просто поменять местами

блин не уточнила. 

Я это делаю, чтобы в мобильных люди понимали, что категория разворачивается,

т. е. чтобы был значок перед категории и стрелка вниз.

То есть для мобильной тоже или одинаково десктоп и мобильная версия.

 

[GetWeb]

17 минут назад, Will сказал:

блин не уточнила. 

Я это делаю, чтобы в мобильных люди понимали, что категория разворачивается,

Если только на мобильных, тогда в stylesheet.css  находим @media (max-width: 767px){

 

Спойлер

 

И добавляем в блок media необходимые стили:

#menu #category {
  padding-left: 40px;
}
#menu .btn-navbar {
  right: auto;
  left: 15px;
}

 

Змінено 14 червня 2020 користувачем GetWeb

[Will]

спасибо

т.е. @media -  стили для мобильных, планшетов и т.д?

подскажите а как стреку вниз content: "\f107";  

для @media прикрутить . Чтобы люди понимали, что нужно нажать и категория вниз развернется

 

 

[GetWeb]

16 минут назад, Will сказал:

 

подскажите а как стреку вниз content: "\f107"; 

 

Я бы иконку вставил в разметку, но если только стилями, то как вариант так:

#menu #category {
    padding-left: 40px;
  }
  #menu .btn-navbar {
    right: auto;
    left: 15px;
  }
  .navbar-header:before {
    content: "\f107";
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    font-style: normal;
    font-variant: normal;
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
  }

 

18 минут назад, Will сказал:

т.е. @media -  стили для мобильных, планшетов и т.д?

Нет, media это условие при котором будет срабатывать определенный набор стилей. В данном случае @media (max-width: 767px)  означает, что стили будут применены для всех экранов меньше или равных 767 пикселям, может быть наоборот min-width: 767px, тогда стили будут применяться к экранам больше 767px. Таких условий может быть столько угодно, хоть на каждый пиксель, но в вашем случае на этом экране меню изменяется поэтому мы подстраиваемся под это поведение.

[Will]

Спасибо!

[Will]

Единственное, теперь Категории не работают как кнопка в экранах меньше 767, т.е. категории не разворачиваются при нажатии на Категории.

[Will]

В 14.06.2020 в 14:04, GetWeb сказал:

 

Спасибо большое, всё получилось!!