Jump to content
  • разработка интернет магазинов на opencart
  • доработка интернет магазинов на opencart

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

tim21701
 Share

Recommended Posts

tim21701 Mentor

tim21701

Posted
Posted

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

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

Иик, открываем файл: 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
Link to comment
Share on other sites
1

  • 4 months later...
2Biz Contributor

2Biz

Posted
Posted

Огромное спасипотому что!

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

Link to comment
Share on other sites

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

tim21701

Posted
  • Author
Posted

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

 

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

 

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

 

3066591.png

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

Link to comment
Share on other sites
1

  • 1 month later...
2322202 Rookie

2322202

Posted
Posted

Добрый гдень!

 

Подскажите пожалуйси по икому вопросу, фоновая картинка меню растянуи на весь экран, как и банер на главной страниэто, возможно фиксация правкой в 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%;
}
Link to comment
Share on other sites

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

Propro

Posted
Posted

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

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

Link to comment
Share on other sites

  • 7 months later...
Dmitry0923 Newbie

Dmitry0923

Posted
Posted

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

 

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

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

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

Link to comment
Share on other sites

  • 5 months later...
Yssel Contributor

Yssel

Posted
Posted

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

 

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

 
#menu ul {

list-style: none;

margin: 0;

padding: 0;

}

 

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

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

Link to comment
Share on other sites

  • 3 weeks later...
melsp Community Regular

melsp

Posted
Posted

у меня икой же вопрос. в 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
Link to comment
Share on other sites

  • 3 weeks later...
Yssel Contributor

Yssel

Posted
Posted

 

В 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пасипотому что!

Link to comment
Share on other sites

  • 8 months later...
Sharapov317 Contributor

Sharapov317

Posted
Posted

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

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

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

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

Link to comment
Share on other sites

Sharapov317 Contributor

Sharapov317

Posted
Posted (edited)

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

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

 

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

Edited by Sharapov317
Link to comment
Share on other sites

tim21701 Mentor

tim21701

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

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


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

Link to comment
Share on other sites
1

  • 2 weeks later...
Sharapov317 Contributor

Sharapov317

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


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

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

Благодарю

Link to comment
Share on other sites

  • 7 months later...
Mibov Newbie

Mibov

Posted
Posted
В 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;
	}
}

Спасипотому что огромное!!

Link to comment
Share on other sites

  • 4 weeks later...
vanek20121 Rookie

vanek20121

Posted
Posted

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

 

 

Link to comment
Share on other sites

  • 11 months later...
Blef Newbie

Blef

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

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

 

 

В файле stylesheet.css

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

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing

Покупателям

Разрилитликам

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

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

×
×
  • Create New...

Important Information

On our site, cookies are used and personal data is processed to improve the user interface. To find out what and what personal data we are processing, please go to the link. If you click "I agree," it means that you understand and accept all the conditions specified in this Privacy Notice.

  I accept