Стили CSS для меню сайта на Wordpress?

Question

[Xpomac]

Есть сайт на движке wordpress. Ссылка на сайт https://sroppk.ru/ . Не могу написать адекватные стили для верхнего меню сайта. Проблема в том, что при наведении на меню, оно раскрывается хаотично, съезжая вниз вместе с картинкой, которая находится слева от меню сайта, и подпункты меню отображаются так же хаотично, хотя я хочу, чтобы они при наведении на них отображались справа. Куда и что нужно вписать?

Comments

[Александр Васильев]

помимо навигации, готовься править баги + правки/решения по дизайну

spoiler

Answer 1

[alexalexes]

1) Научиться пользоваться опцией :hov на элементе страницы в средствах разработки в браузере по F12, чтобы фиксировать касание мыши на элементе страницы и видеть применяемые hover селекторы из css файла.
2) Разобраться со своими навыками верстки в плане применения свойств position relative/absolute (основная идея: на обертке подменю должно быть position: relative, на самом подменю - position: absolute, тогда основное меню сохранит свои размеры, а подменю вылезет в отдельный поток, и не будет раздвигать соседние элементы. Еще нужно будет подтянуть z-index на подменю, если оно провалилось под основные элементы).

Answer 2

[UniInter]

Попробуй в файле styles.css в блоке .navbar .container... прописать align-items: flex-start;
Сейчас у тебя align-items: center; - из=за этого лого старается быть по вертикальному центру.
Это строка 4055.

Comments

[Xpomac]

Да, тут сделал. Теперь хочу что бы подразделы в меню отображались нормально что бы не приходилдось мышкой прыгать по меню всему. играюсь с position: relactive и position: absolute но пока без особого успеха.

[ProjectSoft]

Xpomac, на мобилке тоже :hover есть?
Если вы это делаете специально, то попробуйте на смартфоне поиграть с меню. Особенно с подразделами.

По прыгающему пункту меню Контакты
Просто удалите класс align-self-center, который добавлен ко всем пунктам в меню в рендере html шаблона меню. Он абсолютно не нужен. У вас и меню заодно выровнится.

[Xpomac]

Да, класс удалил теперь лучше стало. Теперь остается как то выделить под меню, от основного меню

Answer 3

[Сергей Кутузов]

Вот тут действующее меню и его код. Посмотрите, возможно найдёте ответ