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

[Rennovatio]

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

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

Змінено 11 січня 2017 користувачем Rennovatio

[n3bo]

display:flex;

justify-content: space-between;

[SiteMix]

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

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

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

[Rennovatio]

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]

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

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

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

[Rennovatio]

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

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

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

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

[SiteMix]

В файле stylesheets.css заменил

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

 

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

 

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

Змінено 12 січня 2017 користувачем SiteMix

[Rennovatio]

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

 

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

 

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

 

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