how-to [How-To] Центрируем пункты Горизонтального меню

tim21701 · February 20, 2013

Часто задают этот вопрос, что бы не скидывать всем ссылки - вывожу её в отдельную тему.

=========================================================================
-----------------НЕ ЗАБЫВАЕМ ПРО РЕЗЕРВНОЕ КОПИРОВАНИЕ ФАЙЛОВ!-----------------
=========================================================================

Итак, открываем файл: catalog/view/theme/ВАША_ТЕМА/stylesheet/stylesheet.css и находим строки:

#menu {
background: #585858;
border-bottom: 1px solid #000000;
height: 37px;
margin-bottom: 15px;
-webkit-border-radius: 5px 5px 5px 5px;
-moz-border-radius: 5px 5px 5px 5px;
-khtml-border-radius: 5px 5px 5px 5px;
border-radius: 5px 5px 5px 5px;
-webkit-box-shadow: 0px 2px 2px #DDDDDD;
-moz-box-shadow: 0px 2px 2px #DDDDDD;
box-shadow: 0px 2px 2px #DDDDDD;
padding: 0px 5px;
}

Добавляем туда строку (в любое место):

text-align:center;

Чуть ниже, (в этом же файле) находим:

#menu ul {
list-style: none;
margin: 0;
padding: 0;
}

Меняем на эти строки:

#menu ul {
list-style: none;
margin:auto;
padding: 0;
display:inline-block;
margin-bottom:-4px;
text-align:left;
}

До:

После:

Расширяем возможности горизонтального меню...

2Biz · July 3, 2013

Огромное спасибо!

А то я уже какой день ищу в кодах и разные варианты подставлял, ничего не получалось. Яндекс тоже не помог.

reen1s · August 12, 2013

Добрый день , а как выровнить пункты меню по ширине ?

tim21701 · August 24, 2013

Добрый день , а как выровнить пункты меню по ширине ?

Не совсем понятен вопрос...

В шаблоне по умолчанию - заданно определенное количество пунктов... И между ними нет "разделителя", как на пример в таком шаблоне:

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

September 30, 2013

Добрый день!

Подскажите пожалуйста по такому вопросу, фоновая картинка меню растянута на весь экран, как и банер на главной странице, возможна фиксация правкой в CSS?

Код из CSS:

.menu-bg {
background: url("../image/menu-bg.png") repeat-x scroll 0 0 transparent;
height: 52px;
position: absolute;
top: 146px;
width: 100%;
}
.backg_slide {
background: url("../image/slider-backg.png") repeat-x scroll 0 0 transparent;
box-shadow: 0 2px 6px #0B0B0B;
height: 362px;
position: absolute;
top: 199px;
width: 100%;
}

Marianna · June 4, 2014

мне этот способ что пишет тс не помог

Propro · May 17, 2015

Здравствуйте, подскажите пожалуйста, как сделать что-бы ссылки в меню(главная, о нас, информация о доставке, связаться с нами) равномерно распределились по ширине экрана.

Сейчас у меня так:

tim21701 · May 17, 2015

Propro откуда мне знать что Вы там наделали, такого нет по дефолту и я пока не научился колдовать по фотографии...

Dmitry0923 · January 4, 2016

Скажите плиз, в версии 2.1.0 как это делается?

Там в #menu { Описано по-другому и нет такого

#menu ul {
list-style: none;
margin: 0;
padding: 0;
}

Я так понимаю это было в прошлых версиях. Уже 2 часа мучаюсь, никак не пойму. Спасибо заранее!

Dmitry0923 · January 4, 2016

Не могу вставить картинку. Но смысл в том же, что и на картинках в первом посте "До" и "После"

Edited January 4, 2016 by Dmitry0923

Yssel · June 10, 2016

Скажите плиз, в версии 2.1.0 как это делается?

Там в #menu { Описано по-другому и нет такого

#menu ul {
list-style: none;

margin: 0;

padding: 0;

}

Я так понимаю это было в прошлых версиях. Уже 2 часа мучаюсь, никак не пойму. Спасибо заранее!

у меня такой же вопрос. в 2.1 не растягивается по центру по этому сценарию

melsp · June 28, 2016

у меня такой же вопрос. в 2.1 не растягивается по центру по этому сценарию

В 2.1.0.2.1 делается следующим образом:

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

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

Должно получиться так:

Фрагмент кода:

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

Yssel · July 16, 2016

В 2.1.0.2.1 делается следующим образом:

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

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

Должно получиться так:

Фрагмент кода:

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

cпасибо!

Sharapov317 · April 7, 2017

Добрый день всем!

Попробовал способы для версий 2,1,0,2,1 и более поздних к сожалению на последней версии 2.3.0.2 не сработало

Можете помочь?

заранее благодарен

Sharapov317 · April 7, 2017

походу сам разобрался)

Нужно не в stylesheet.css вставлять, а в bootstrap.min.css

//можно вопрос не совсем в тему bootstrap.min.css не очень удобно править как его нормально обрабатывать? Сначала полный править а потом где то минимизировать?

Edited April 7, 2017 by Sharapov317

tim21701 · April 10, 2017

В 07.04.2017 в 15:04, Sharapov317 сказал:

Нужно не в stylesheet.css вставлять, а в bootstrap.min.css

Вносите все правки в stylesheet.css, стили в этом файле применяются в приоритете.
Файл bootstrap.min.css вообще не нужно трогать...

Sharapov317 · April 18, 2017

В 10.04.2017 в 05:05, tim21701 сказал:

Вносите все правки в stylesheet.css, стили в этом файле применяются в приоритете.
Файл bootstrap.min.css вообще не нужно трогать...

Так не сработало в stylesheet.css((( а в min работает. Возможно еще стиль какой то нужно править для 2.3.0.2, но в принципе меня устроил результат.

Благодарю

Mibov · November 20, 2017

В 28.06.2016 в 13:57, melsp сказал:

В 2.1.0.2.1 делается следующим образом:

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

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

Должно получиться так:

Скрыть контент

Фрагмент кода:


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

Спасибо огромное!!

vanek20121 · December 16, 2017

Для версии Version 3.0.2.0 (rs.2) не получаются выше изложенные варианты по размещению главного меню по центру. Может кто сталкивался? Прошу помочь.

Blef · December 5, 2018

В 16.12.2017 в 20:00, vanek20121 сказал:

Для версии Version 3.0.2.0 (rs.2) не получаются выше изложенные варианты по размещению главного меню по центру. Может кто сталкивался? Прошу помочь.

В файле stylesheet.css

Добавь в #menu .nav > li > a {
margin-left: 30px;
}

HyperLabTeam · December 5, 2018

22 минуты назад, Blef сказал:

он за год решения ж не нащёл... бедняга...

Sign In

how-to [How-To] Центрируем пункты Горизонтального меню

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Similar Content

Recently Browsing 0 members

Покупателям

Разработчикам

Полезная информация

Последние дополнения

Important Information