[РЕШЕНО] Как выровнять пункты главного меню по центру?

[2Biz]

Подскажите как выровнять пункты главного меню по центру? Я уже весь код облазил, ничего не помогло.

Прикрепляю скрин

[Tom]

https://opencartforum.com/topic/18079-tcentriruem-punkty-gorizontalnogo-meniu-how-to/

[2Biz]

https://opencartforum.com/topic/18079-tcentriruem-punkty-gorizontalnogo-meniu-how-to/

Спасибо))) Помогло!

[AnDeton]

А как победить меню в версии 2.0.2

[AnDeton]

Нашел за бугром. Делается просто добавлением после этой строки:

@media (min-width: 768px) { 

вот этот текст:

#menu .navbar-nav {
      float: none;
      text-align: center;
   }

   #menu .navbar-nav > li {
      display: inline-block;
      float: none;
      text-align: left;
   }

[chisayna]

 

Нашел за бугром. Делается просто добавлением после этой строки:

@media (min-width: 768px) { 

вот этот текст:

#menu .navbar-nav {
      float: none;
      text-align: center;
   }

   #menu .navbar-nav > li {
      display: inline-block;
      float: none;
      text-align: left;
   }

AnDeton, будь добр, опиши подробнее. А то в 2.1.0.2 этот код (@media (min-width: 768px) { ) в файле стилей в двух местах - на 271 строке:

@media (min-width: 768px) {

    #menu .dropdown:hover .dropdown-menu {

        display: block;

    }

и на 715 строке:

@media (min-width: 768px) {

    #column-left  .product-layout .col-md-3 {

       width: 100%;

    }

Пробовал по твоему совету - не получилось. Напиши по строкам как заменить (т.е. какие строки заменять твоим кодом, чтобы получилось как на фото).

На фото все кнопки меню одинаковой ширины и растянуты на всю ширину блока контент.

Заранее, благодарю!

[melsp]

AnDeton, будь добр, опиши подробнее. А то в 2.1.0.2 этот код (@media (min-width: 768px) { ) в файле стилей в двух местах - на 271 строке:

@media (min-width: 768px) {

    #menu .dropdown:hover .dropdown-menu {

        display: block;

    }

и на 715 строке:

@media (min-width: 768px) {

    #column-left  .product-layout .col-md-3 {

       width: 100%;

    }

Пробовал по твоему совету - не получилось. Напиши по строкам как заменить (т.е. какие строки заменять твоим кодом, чтобы получилось как на фото).

На фото все кнопки меню одинаковой ширины и растянуты на всю ширину блока контент.

Заранее, благодарю!

 

На 2.1.0.2.1 работает.

Вставлять код нужно в два места в подразделе "#menu" после "@media (min-width: 768px) {":

@media (min-width: 768px) {
	
	#menu .navbar-nav {
      float: none;
      text-align: center;
   }

   #menu .navbar-nav > li {
      display: inline-block;
      float: none;
      text-align: left;
   }
	
	#menu .dropdown:hover .dropdown-menu {
		display: block;
	}
}
@media (max-width: 767px) {
	
	#menu .navbar-nav {
      float: none;
      text-align: center;
   }

   #menu .navbar-nav > li {
      display: inline-block;
      float: none;
      text-align: left;
   }
	
	#menu {
		border-radius: 4px;
	}
	#menu div.dropdown-inner > ul.list-unstyled {
		display: block;
	}
	#menu div.dropdown-menu {
		margin-left: 0 !important;
		padding-bottom: 10px;
		background-color: rgba(0, 0, 0, 0.1);
	}
	#menu .dropdown-inner {
		display: block;
	}
	#menu .dropdown-inner a {
		width: 100%;
		color: #fff;
	}
	#menu .dropdown-menu a:hover,
	#menu .dropdown-menu ul li a:hover {
		background: rgba(0, 0, 0, 0.1);
	}
	#menu .see-all {
		margin-top: 0;
		border: none;
		border-radius: 0;
		color: #fff;
	}
}

Номера строк могут не совпадать, т.к. файл редактировался.

Змінено 28 червня 2016 користувачем melsp

[vanek20121]

Выше изложенным способом в версии Version 3.0.2.0 (rs.2)  не получилось. Только через bootstrap.min.css (хоть этот способ на форуме не рекомендовали).

[zustemy]

спасибо)