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

tim21701 · 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 · 3 липня 2013

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

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

reen1s · 12 серпня 2013

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

tim21701 · 24 серпня 2013

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

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

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

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

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 · 4 червня 2014

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

Propro · 17 травня 2015

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

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

tim21701 · 17 травня 2015

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

Dmitry0923 · 4 січня 2016

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

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

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

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

Dmitry0923 · 4 січня 2016

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

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

Yssel · 10 червня 2016

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

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

#menu ul {
list-style: none;

margin: 0;

padding: 0;

}

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

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

melsp · 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 · 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 · 7 квітня 2017

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

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

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

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

Sharapov317 · 7 квітня 2017

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

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

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

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

tim21701 · 10 квітня 2017

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

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

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

Sharapov317 · 18 квітня 2017

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

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

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

Благодарю

Mibov · 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 · 16 грудня 2017

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

Blef · 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 · 5 грудня 2018

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

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

Вхід

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

Recommended Posts

Надіслати

Поділитися на інших сайтах

Надіслати

Поділитися на інших сайтах

Надіслати

Поділитися на інших сайтах

Надіслати

Поділитися на інших сайтах

Надіслати

Поділитися на інших сайтах

Надіслати

Поділитися на інших сайтах

Надіслати

Поділитися на інших сайтах

Надіслати

Поділитися на інших сайтах

Надіслати

Поділитися на інших сайтах

Надіслати

Поділитися на інших сайтах

Надіслати

Поділитися на інших сайтах

Надіслати

Поділитися на інших сайтах

Надіслати

Поділитися на інших сайтах

Надіслати

Поділитися на інших сайтах

Надіслати

Поділитися на інших сайтах

Надіслати

Поділитися на інших сайтах

Надіслати

Поділитися на інших сайтах

Надіслати

Поділитися на інших сайтах

Надіслати

Поділитися на інших сайтах

Надіслати

Поділитися на інших сайтах

Надіслати

Поділитися на інших сайтах

Створіть аккаунт або увійдіть для коментування

Створити обліковий запис

Вхід

Схожі публікації

Зараз на сторінці 0 користувачів

Покупцям

Розробникам

Корисна інформація

Останні розширення

Important Information