Перейти до вмісту
Пошук в
  • Детальніше...
Шукати результати, які ...
Шукати результати в ...

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

tim21701
 Share

Recommended Posts

tim21701 Mentor

tim21701

Опубліковано:
Опубліковано:

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

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

Итак, открываем файл: 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;
}

До:
3951354.jpg
После:
3974906.jpg
Расширяем возможности горизонтального меню...

 

  • +1 6
Надіслати
Поділитися на інших сайтах
1

  • 4 months later...
  • 1 month later...
  • 2 weeks later...
tim21701 Mentor

tim21701

Опубліковано:
  • Автор
Опубліковано:

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

 

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

 

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

 

3066591.png

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

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

  • 1 month later...
2322202 Rookie

2322202

Опубліковано:
Опубліковано:

Добрый день!

 

Подскажите пожалуйста по такому вопросу, фоновая картинка меню растянута на весь экран, как и банер на главной странице, возможна фиксация правкой в 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%;
}
Надіслати
Поділитися на інших сайтах

  • 8 months later...
  • 11 months later...
Propro Rookie

Propro

Опубліковано:
Опубліковано:

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

Сейчас у меня так: 2dead6991fc2t.jpg

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

  • 7 months later...
Dmitry0923 Newbie

Dmitry0923

Опубліковано:
Опубліковано:

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

 

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

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

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

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

  • 5 months later...
Yssel Contributor

Yssel

Опубліковано:
Опубліковано:

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

 

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

 
#menu ul {

list-style: none;

margin: 0;

padding: 0;

}

 

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

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

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

  • 3 weeks later...
melsp Community Regular

melsp

Опубліковано:
Опубліковано:

у меня такой же вопрос. в 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;
	}
}
  • +1 2
Надіслати
Поділитися на інших сайтах

  • 3 weeks later...
Yssel Contributor

Yssel

Опубліковано:
Опубліковано:

 

В 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пасибо!

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

  • 8 months later...
Sharapov317 Enthusiast

Sharapov317

Опубліковано:
Опубліковано:

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

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

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

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

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

Sharapov317 Enthusiast

Sharapov317

Опубліковано:
Опубліковано: (змінено)

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

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

 

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

Змінено користувачем Sharapov317
Надіслати
Поділитися на інших сайтах

tim21701 Mentor

tim21701

Опубліковано:
  • Автор
Опубліковано:
В 07.04.2017 в 15:04, Sharapov317 сказал:

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


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

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

  • 2 weeks later...
Sharapov317 Enthusiast

Sharapov317

Опубліковано:
Опубліковано:
В 10.04.2017 в 05:05, tim21701 сказал:


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

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

Благодарю

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

  • 7 months later...
Mibov Newbie

Mibov

Опубліковано:
Опубліковано:
В 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;
	}
}

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

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

  • 4 weeks later...
  • 11 months later...
Blef Newbie

Blef

Опубліковано:
Опубліковано:
В 16.12.2017 в 20:00, vanek20121 сказал:

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

 

 

В файле stylesheet.css

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

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

HyperLabTeam Grand Master

HyperLabTeam

Опубліковано:
Опубліковано:
22 минуты назад, Blef сказал:

 

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

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

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

Ви повинні бути користувачем, щоб залишити коментар

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

Зареєструйтеся для отримання облікового запису. Це просто!

Зареєструвати аккаунт

Вхід

Уже зареєстровані? Увійдіть тут.

Вхід зараз
 Share
Перейти до списку тем

Покупцям

Розробникам

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

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

×
×
  • Створити...

Important Information

На нашому сайті використовуються файли cookie і відбувається обробка деяких персональних даних користувачів, щоб поліпшити користувальницький інтерфейс. Щоб дізнатися для чого і які персональні дані ми обробляємо перейдіть за посиланням . Якщо Ви натиснете «Я даю згоду», це означає, що Ви розумієте і приймаєте всі умови, зазначені в цьому Повідомленні про конфіденційність.

  Я даю згоду