Rennovatio

Как изменить дизайн горизонтального главного меню (navbar)

Рекомендуемые сообщения

Rennovatio    5

2.0.3.1. В главном меню вместо категорий есть 4 статьи, но все они сдвинуты к левому краю. Как правильно их растянуть на всю площадь меню? И где меняется шрифт?

d6a630293f18.jpg

Большое спасибо!

Изменено пользователем Rennovatio

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
n3bo    188

display:flex;

justify-content: space-between;

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
SiteMix    145

И где меняется шрифт?

/catalog/view/theme/default/stylesheet/stylesheet.css, где default - твоя тема

#menu .nav > li > a {...}

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
Rennovatio    5

display:flex;

justify-content: space-between;

Тут я не справился, в stylesheets.css вот что нашёл связанное с navbar. Но достичь желаемого результата не смог

#menu .btn-navbar {
	font-size: 15px;
	font-stretch: expanded;
	color: #FFF;
	padding: 2px 18px;
	float: right;
	background-color: #229ac8;
	background-image: linear-gradient(to bottom, #23a1d1, #1f90bb);
	background-repeat: repeat-x;
	border-color: #1f90bb #1f90bb #145e7a;
	}
#menu .btn-navbar:hover, #menu .btn-navbar:focus, #menu .btn-navbar:active, #menu .btn-navbar.disabled, #menu .btn-navbar[disabled] {
	color: #ffffff;
	background-color: #229ac8;

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
SiteMix    145

Тут я не справился, в stylesheets.css

Попробуй добавить такой код:

@media (min-width: 768px) {#menu .navbar-nav {width: 100%; display: flex; justify-content: space-between;}}

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
Rennovatio    5

Попробуй добавить такой код:

@media (min-width: 768px) {#menu .navbar-nav {width: 100%; display: flex; justify-content: space-between;}}

Получилось. В файле stylesheets.css заменил

@media (max-width: 478px) {
		#cart .dropdown-menu {
			width: 100%;
		}
	}

на

@media (min-width: 768px) {
		#menu .navbar-nav {
			width: 100%; display: flex; justify-content: space-between;
		}
	}

вот результат, то чего я хотел добиться

ce613b5809fa.jpg

То что я заменил #cart .dropdown-menu чем-то мне может аукнуться?

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
SiteMix    145
В файле stylesheets.css заменил

Этого делать нельзя! Это совершенно разные классы.

 

Надо было просто добавить предложенный мной код. Можно ниже имеющегося блока с #menu .navbar-nav, а можно просто добавить в конец файла. В этом случае весь дополнительный код окажется в одном месте и не придётся его искать.

 

Так что верни удалённый фрагмент и добавь новый.

Изменено пользователем SiteMix

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
Rennovatio    5

Этого делать нельзя! Это совершенно разные классы.

 

Надо было просто добавить предложенный мной код. Можно ниже имеющегося блока с #menu .navbar-nav, а можно просто добавить в конец файла. В этом случае весь дополнительный код окажется в одном месте и не придётся его искать.

 

Так что верни удалённый фрагмент и добавь новый.

 

Переделал, всё работает! Огромное спасибо SiteMix

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Для публикации сообщений создайте учётную запись или авторизуйтесь

Вы должны быть пользователем, чтобы оставить комментарий

Создать учетную запись

Зарегистрируйте новую учётную запись в нашем сообществе. Это очень просто!

Регистрация нового пользователя

Войти

Уже есть аккаунт? Войти в систему.

Войти


  • Последние посетители   0 пользователей онлайн

    Ни одного зарегистрированного пользователя не просматривает данную страницу