Главное меню на всю ширину экрана

[Lordaaa]

Если сделать как я написал, то бутстрап редактировать не пришлось бы

  В 25.01.2016 at 14:06, Lordaaa сказал:

#menu {border-radius: 0 !important;}

 

Expand  

[savage4pro]

  В 26.01.2016 at 10:01, Lordaaa сказал:

Если сделать как я написал, то бутстрап редактировать не пришлось бы

Expand  

не сказал бы, что это верное утверждение

неужели в бутстрапе есть указание на конкретный элемент #menu?

рекомендую к прочтению - https://www.w3.org/TR/CSS21/cascade.html, и по-русски, но корявей - http://htmlbook.ru/samcss/kaskadirovanie

 

в общем, 3 суток прошло, достаточно мытарств

все решение с начала топика сводится к добавлению одного класса в шаблон header.tpl

<?php if ($categories) { ?>
<div class="container fullwidth">

и пары строк в css

.container.fullwidth { max-width: 100%; }
#menu, #menu .see-all, #menu .dropdown-menu { border-radius: 0px; }

если не получается, значит чьи-то ручки уже надобавляли всяких important'ов стили шаблона или он сам уже несколько далек от оригинала

[alexant]

  В 26.01.2016 at 10:01, Lordaaa сказал:

Если сделать как я написал, то бутстрап редактировать не пришлось бы

Expand  

Вот я сейчас специально вернул исходные параметры в бутстрап и сделал как Вы написали в стилях. И что вы думаете? Опять круглые углы. Вы бы сами попробовали, убедились что и как, а потом бы конструктивно дали бы точный совет.

[Lordaaa]

  В 26.01.2016 at 10:37, savage4pro сказал:

не сказал бы, что это верное утверждение

неужели в бутстрапе есть указание на конкретный элемент #menu?

Expand  

 

Смотрел на дефолтной теме, но думаю и в грей так же. Само меню у нас в теге nav с id menu и классом navbar. В бутстрапе на navbar стоит border-radius 4px

[Lordaaa]

  В 26.01.2016 at 10:43, alexant сказал:

Вот я сейчас специально вернул исходные параметры в бутстрап и сделал как Вы написали в стилях. И что вы думаете? Опять круглые углы. Вы бы сами попробовали, убедились что и как, а потом бы конструктивно дали бы точный совет.

Expand  

Поставил тему грей, только ради Вас. И никаких круглых углов

#menu {
	border-radius: 0 !important;
	background-color: #e7e7e7;
	background-image: linear-gradient(to bottom, #eeeeee, #dddddd);
	background-repeat: repeat-x;
	border-color: #dddddd #dddddd #b3b3b3 #b7b7b7;
	min-height: 40px;
}

 

[savage4pro]

  В 26.01.2016 at 10:43, alexant сказал:

Вот я сейчас специально вернул исходные параметры в бутстрап и сделал как Вы написали в стилях. И что вы думаете? Опять круглые углы. Вы бы сами попробовали, убедились что и как, а потом бы конструктивно дали бы точный совет.

Expand  

 

ну тогда рассказывайте что делали со стилями шаблона и с бутстрапом до того, как создали данную тему, потому как что в дефолте, что в gray, рекомендация @Lordaaaточно сработает, впрочем так же, как сработало бы и без !important

 

 

  В 26.01.2016 at 10:47, Lordaaa сказал:

Смотрел на дефолтной теме, но думаю и в грей так же. Само меню у нас в теге nav с id menu и классом navbar. В бутстрапе на navbar стоит border-radius 4px

Expand  

 

все же примите к сведению:

  В 26.01.2016 at 10:37, savage4pro сказал:

рекомендую к прочтению - https://www.w3.org/TR/CSS21/cascade.html, и по-русски, но корявей - http://htmlbook.ru/samcss/kaskadirovanie

Expand  

 

[Lordaaa]

  В 26.01.2016 at 10:59, savage4pro сказал:

ну тогда рассказывайте что делали со стилями шаблона и с бутстрапом до того, как создали данную тему, потому как что в дефолте, что в gray, рекомендация @Lordaaaточно сработает, впрочем так же, как сработало бы и без !important

 

Expand  

Без !important на планшетах и мобильных углы появляются

[alexant]

  В 26.01.2016 at 10:54, Lordaaa сказал:

Поставил тему грей, только ради Вас. И никаких круглых углов

#menu {
	border-radius: 0 !important;
	background-color: #e7e7e7;
	background-image: linear-gradient(to bottom, #eeeeee, #dddddd);
	background-repeat: repeat-x;
	border-color: #dddddd #dddddd #b3b3b3 #b7b7b7;
	min-height: 40px;
}

 

Expand  

Да, сделал именно так и всё гуд! Простоя я видимо с самого начала по совету в теме, полностью убрал из этого блока border-radius и забыл. Вот теперь абсолютное спасибо! 

[alexant]

  В 26.01.2016 at 10:59, savage4pro сказал:

 

ну тогда рассказывайте что делали со стилями шаблона и с бутстрапом до того, как создали данную тему, потому как что в дефолте, что в gray, рекомендация @Lordaaaточно сработает, впрочем так же, как сработало бы и без !important

Expand  

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

[Lordaaa]

  В 26.01.2016 at 11:08, alexant сказал:

Да, сделал именно так и всё гуд! Простоя я видимо с самого начала по совету в теме, полностью убрал из этого блока border-radius и забыл. Вот теперь абсолютное спасибо! 

Expand  

В #menu изначально не было border-rarius, это я дописал свою рекомендацию.

[savage4pro]

  В 26.01.2016 at 11:05, Lordaaa сказал:

Без !important на планшетах и мобильных углы появляются

Expand  

не появятся, если указывать после @media, а не до них, но как вариант можно, и возможно, нужно явно задавать радиус для разных разрешений

[alexant]

  В 26.01.2016 at 11:14, Lordaaa сказал:

В #menu изначально не было border-rarius, это я дописал свою рекомендацию.

Expand  

Хи хи... От оно что! Умница.

[Lordaaa]

  В 26.01.2016 at 11:15, savage4pro сказал:

не появятся, если указывать после @media, а не до них, но как вариант можно, и возможно, нужно явно задавать радиус для разных разрешений

Expand  

Ну это же нужно лезть в бутстрап, т.к. @media на navbar прописан именно в них 

[alexant]

  В 26.01.2016 at 11:15, savage4pro сказал:

не появятся, если указывать после @media, а не до них, но как вариант можно, и возможно, нужно явно задавать радиус для разных разрешений

Expand  

А почему к  !important такое предвзятое отношение? Что с ним не так?

[savage4pro]

  В 26.01.2016 at 11:18, Lordaaa сказал:

Ну это же нужно лезть в бутстрап, т.к. @media на navbar прописан именно в них 

Expand  

.navbar - да

#menu - нет

@media (max-width: 767px) {
	#menu {
		border-radius: 4px;
	}

еще раз прошу прочитать про каскады

 

  В 26.01.2016 at 11:18, alexant сказал:

А почему к  !important такое предвзятое отношение? Что с ним не так?

Expand  

потому что !important можно перебить только !important'ом

[savage4pro]

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

всегда надо стараться оставлять место для маневра

[alexant]

  В 26.01.2016 at 11:34, savage4pro сказал:

.navbar - да

#menu - нет

@media (max-width: 767px) {
	#menu {
		border-radius: 4px;
	}

еще раз прошу прочитать про каскады

 

потому что !important можно перебить только !important'ом

Expand  

Ну приведите, пожалуйста, конкретный пример, в нашем случае, как должен выглядеть блок целиком, что бы уж совсем всем глупцам стало ясно как божий день.

[savage4pro]

конкретный пример был выше, при этом указанные строки в css должны быть добавлены после media, можно просто в конец файла дописать

либо если немного заморочиться, то

для #menu указать нулевой радиус в двух местах, собственно где стиль для него задается в первый раз и в media до 767px

для #menu .see-all просто отредактировать уже заданное значение

для .dropdown-menu переопределить радиусы как дочерним элементам #menu

 

еще лучше - подключить свой файл с изменениями, получите небольшой щелбан от расчета гугла, зато оригинал останется девственным

а когда вдруг решите, что надо делать свой шаблон и для этого придется переписывать существенную часть оригинальной таблицы стилей, тогда перенесете необходимые строки и оставите подключенным уже только свой файл стилей с переопределением бутстрапа и стилей модулей

 

[andriks]

Народ...нид хелп...Осваиваю опенкарт, столкнулся с проблемой в топ меню. Первоначально хотел расширить главное меню на всю ширину экрана. С этой задачей справился, благодаря этой темы:) Теперь пытаюсь пункты меню сдвинуть как было раньше, то есть к границам контентента категории (как было до расширения). 

сайт yazon.com.ua

 

п.с. Вроде разобрался. В header.tpl поменял (navbar-collapse на navibar-collapse) на свой класс в строке  <div class="collapse navibar-collapse navbar-ex1-collapse"> .

Далее в стилях в самом конце файла добавил:

.navibar-collapse {
    display: block;
    height: auto;
    padding-bottom: 0;
    overflow: visible;
    margin-left: 20%;
}

 

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