Перейти до вмісту
Пошук в
  • Детальніше...
Шукати результати, які ...
Шукати результати в ...

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


Recommended Posts

Добрый день,

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

вот это место

401052284_UniShop-GoogleChrome.png.054da7b84e0c2e3f38b1f27c701265c6.png

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

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

623999050_.-GoogleChrome.png.5171170bad7a803631c93af9f20c1f7d.png

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

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

Надіслати
Поділитися на інших сайтах


в 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;
}

 

  • +1 1
Надіслати
Поділитися на інших сайтах


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

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

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

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

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

 

Теплый пол Красноярск  Тепло на Пол. рф  Магазин Теплых полов, склад магазин низкие цены, большой выбор  теплый пол купить в Красноярске под плитку, под ламинат  линолеум дешевле - Google Chrome.png

Надіслати
Поділитися на інших сайтах


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

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

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

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

 

Спойлер

image.png.dfdc7ea5e9854e5666d89d02b3fe17df.png

 

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

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

 

Змінено користувачем GetWeb
  • +1 1
Надіслати
Поділитися на інших сайтах


спасибо

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

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

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

1401562508_css-Opencart2.x-OpenCart-GoogleChrome.png.6bd1e73d5484e483b89c59be0521f86b.png

 

 

Надіслати
Поділитися на інших сайтах


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

 

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

 

1401562508_css-Opencart2.x-OpenCart-GoogleChrome.png.6bd1e73d5484e483b89c59be0521f86b.png

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

#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. Таких условий может быть столько угодно, хоть на каждый пиксель, но в вашем случае на этом экране меню изменяется поэтому мы подстраиваемся под это поведение.

  • +1 1
Надіслати
Поділитися на інших сайтах


Створіть аккаунт або увійдіть для коментування

Ви повинні бути користувачем, щоб залишити коментар

Створити обліковий запис

Зареєструйтеся для отримання облікового запису. Це просто!

Зареєструвати аккаунт

Вхід

Уже зареєстровані? Увійдіть тут.

Вхід зараз
  • Зараз на сторінці   0 користувачів

    • Ні користувачів, які переглядиють цю сторінку
×
×
  • Створити...

Important Information

На нашому сайті використовуються файли cookie і відбувається обробка деяких персональних даних користувачів, щоб поліпшити користувальницький інтерфейс. Щоб дізнатися для чого і які персональні дані ми обробляємо перейдіть за посиланням . Якщо Ви натиснете «Я даю згоду», це означає, що Ви розумієте і приймаєте всі умови, зазначені в цьому Повідомленні про конфіденційність.