1. nav - это основная навигация по странице. Внутри nav хорошо бы сделать список, а уже в нем ссылки. 2. Опустить бордер = увеличить расстояние между границей и текстом = padding 3. Либо использовать псевдоэлемент, а не бордер. Тут зависит от того, какая область клика вам нужна. 4.
и сделать данную ссылку активной
Скорее активная это не :active, а та, которая указывает на текущую страницу.
Т.е. либо дополнительный класс либо aria-current="page" и селектор по атрибуту. 5.
Но проблема в том что opacity все перебивает
Либо убирайте при наведении и у активной либо задавайте цвета через rgba 6.
И еще к тому же icon__search не меняет своего цвета.
Было бы удивительно, если бы цвет png картинки менялся свойством color.
Но также удивительно, почему эта лупа не svg. Как только она станет svg она сможет меняться через свойство color, если в самой svg fill будет задан как currentColor.
Есть и другой вариант: убрать лупу из разметки (вообще прекрасно) и вставить как mask (не забудьте префиксы) в css и менять цвет через background-color.
NarutoHokage, к верстке нет, не относится.
Должен ли это делать верстальщик - как договоритесь. Поскольку скриптик, например, на php отправляющий почту не сложнее валидации формы на js (скорее проще).
Вы знаете, два блочных элемента идут друг под другом сами по себе.
Но в коде вы для nav задали флекс и элементы встали рядом.
Т.е. нужно отменить флексовость родителя или переделать на флекс колонками (фик знает, почему у вас не работает) или на гриды.
Компилировать ваш код в уме не очень удобно, поэтому сделайте песочницу с минимальным кодом, нужным для демонстрации проблемы на codepen.io
1. Начните с того, что div нельзя вкладывать в label.
2. Сам инпут, я так понимаю, у вас скрыт. (Используйте паттерн visually-hidden (гуглится)) Меняем разметку: сначала инпут, после него label, внутри которого span и картинка. Инпут и лейбл связываем по for-id.
3. hover перевешиваем на label
4. Состояние выбранного или не выбранного делаем через соседние селекторы input:checked + label {стили}
p.s.
1. Если в вашем коде !important, значит вы скорее всего творите что-то не то.
2. Лучше не засорять демонстрируемый код свойствами с префиксами.
2. Опустить бордер = увеличить расстояние между границей и текстом = padding
3. Либо использовать псевдоэлемент, а не бордер. Тут зависит от того, какая область клика вам нужна.
4.
Скорее активная это не :active, а та, которая указывает на текущую страницу.
Т.е. либо дополнительный класс либо
aria-current="page"и селектор по атрибуту.5.
Либо убирайте при наведении и у активной либо задавайте цвета через rgba
6.
Было бы удивительно, если бы цвет png картинки менялся свойством color.
Но также удивительно, почему эта лупа не svg. Как только она станет svg она сможет меняться через свойство color, если в самой svg fill будет задан как currentColor.
Есть и другой вариант: убрать лупу из разметки (вообще прекрасно) и вставить как mask (не забудьте префиксы) в css и менять цвет через background-color.