Перейти к содержанию

Рекомендуемые сообщения

Добрый вечер уважаемые гуру.

Как можно переместить мню таким образом как на скрине?

Opencart 3.0.2.0 стандартный шаблон.

http://opencart.wordpress.q97876x3.beget.tech/

как оранжевую строку меню, поиск и корзину сделать напротив логотипа?? иначе там получается очень много пустого места

спасибо

2019-01-08_18-34-36.thumb.png.2bd332c022fc4fe2b3ff4327796b45e6.png

Изменено пользователем mitandaster

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

поменять разметку сетки блока, который выше )

 

сейчас у вас схема такая

 

<div class="container">
        <div class="row">
            <div class="col-sm-4">лого</div>
            <div class="col-sm-5">поиск</div>
            <div class="col-sm-3">корзина</div>
        </div>
</div>
<div class="container">
        меню
</div>

 

а нужно как-то так

<div class="container">
        <div class="row">
            <div class="col-sm-4">лого</div>
            <div class="col-sm-8">
            <div class="row">
            <div class="col-sm-7">поиск</div>
            <div class="col-sm-5">корзина</div>
            <div class="col-sm-12">меню</div>
            </div>
            </div>
        </div>
</div>

 

  • +1 1

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

catalog/view/theme/default/template/common/header.twig
Кусок кода:
<header>
  <div class="container">
    <div class="row">
      <div class="col-sm-4">
        <div id="logo">{% if logo %}<a href="{{ home }}"><img src="{{ logo }}" title="{{ name }}" alt="{{ name }}" class="img-responsive" /></a>{% else %}
          <h1><a href="{{ home }}">{{ name }}</a></h1>
          {% endif %}</div>
      </div>
      <div class="col-sm-5">{{ search }}</div>
      <div class="col-sm-3">{{ cart }}</div>
    </div>
  </div>
</header>
{{ menu }}
  
  Заменить на:
  
  <header>
  <div class="container">
    <div class="row">
      <div class="col-sm-4">
        <div id="logo">{% if logo %}<a href="{{ home }}"><img src="{{ logo }}" title="{{ name }}" alt="{{ name }}" class="img-responsive" /></a>{% else %}
          <h1><a href="{{ home }}">{{ name }}</a></h1>
          {% endif %}</div>
      </div>
      <div class="col-sm-6">
      {{ search }}
      {{ menu }}
      </div>
      <div class="col-sm-2">{{ cart }}</div>
    </div>
  </div>
</header>

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
1 час назад, Medialine сказал:

catalog/view/theme/default/template/common/header.twig
Кусок кода:
<header>
  <div class="container">
    <div class="row">
      <div class="col-sm-4">
        <div id="logo">{% if logo %}<a href="{{ home }}"><img src="{{ logo }}" title="{{ name }}" alt="{{ name }}" class="img-responsive" /></a>{% else %}
          <h1><a href="{{ home }}">{{ name }}</a></h1>
          {% endif %}</div>
      </div>
      <div class="col-sm-5">{{ search }}</div>
      <div class="col-sm-3">{{ cart }}</div>
    </div>
  </div>
</header>
{{ menu }}
  
  Заменить на:
  
  <header>
  <div class="container">
    <div class="row">
      <div class="col-sm-4">
        <div id="logo">{% if logo %}<a href="{{ home }}"><img src="{{ logo }}" title="{{ name }}" alt="{{ name }}" class="img-responsive" /></a>{% else %}
          <h1><a href="{{ home }}">{{ name }}</a></h1>
          {% endif %}</div>
      </div>
      <div class="col-sm-6">
      {{ search }}
      {{ menu }}
      </div>
      <div class="col-sm-2">{{ cart }}</div>
    </div>
  </div>
</header>

сделала. вообще никаких изменений не последовало :(

меню так и осталось на своем месте

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

обновите кеш модификаторов.

  • +1 1

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
19 минут назад, Vetroff сказал:

обновите кеш модификаторов.

обновила, но все уехало не туда, куда нужно... поехало вниз, а не рядом с лого...

посмотрите что не так?

<header>
  <div class="container">
    <div class="row">
      <div class="col-sm-4">
        <div id="logo">{% if logo %}<a href="{{ home }}"><img src="{{ logo }}" title="{{ name }}" alt="{{ name }}" class="img-responsive" /></a>{% else %}
          <h1><a href="{{ home }}">{{ name }}</a></h1>
          {% endif %}</div>
          <div class="col-sm-8">
        <div class="row">
      </div>
      <div class="col-sm-7">{{ search }}</div>
      <div class="col-sm-5">{{ cart }}</div>
      <div class="col-sm-12">menu</div>
        </div>
  </div>
</header>
{{ menu }}

 

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Всё

  • +1 1

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Вот так попробуйте

<header>
  <div class="container">
    <div class="row">
      <div class="col-sm-4">
        <div id="logo">{% if logo %}<a href="{{ home }}"><img src="{{ logo }}" title="{{ name }}" alt="{{ name }}" class="img-responsive" /></a>{% else %}
          <h1><a href="{{ home }}">{{ name }}</a></h1>
          {% endif %}</div>
        </div>
        <div class="col-sm-8">
            <div class="row">
                <div class="col-sm-7">{{ search }}</div>
                <div class="col-sm-5">{{ cart }}</div>
                <div class="col-sm-12">{{ menu }}</div>
            </div>
        </div>
    </div>
</div>
</header>

 

  • +1 1

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
7 минут назад, Vetroff сказал:

Вот так попробуйте


<header>
  <div class="container">
    <div class="row">
      <div class="col-sm-4">
        <div id="logo">{% if logo %}<a href="{{ home }}"><img src="{{ logo }}" title="{{ name }}" alt="{{ name }}" class="img-responsive" /></a>{% else %}
          <h1><a href="{{ home }}">{{ name }}</a></h1>
          {% endif %}</div>
        </div>
        <div class="col-sm-8">
            <div class="row">
                <div class="col-sm-7">{{ search }}</div>
                <div class="col-sm-5">{{ cart }}</div>
                <div class="col-sm-12">{{ menu }}</div>
            </div>
        </div>
    </div>
</div>
</header>

 

 

почти отлично!! спасибо! с как укоротить розовую сроку меню???

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

там лишний контейнер вылезает.

 

вырежьте в шаблоне menu.twig вторую и предпоследнюю строку.

  • +1 1

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Для публикации сообщений создайте учётную запись или авторизуйтесь

Вы должны быть пользователем, чтобы оставить комментарий

Создать учетную запись

Зарегистрируйте новую учётную запись в нашем сообществе. Это очень просто!

Регистрация нового пользователя

Войти

Уже есть аккаунт? Войти в систему.

Войти

  • Последние посетители   0 пользователей онлайн

    Ни одного зарегистрированного пользователя не просматривает данную страницу

×

Важная информация

На нашем сайте используются файлы cookie и происходит обработка некоторых персональных данных пользователей, чтобы улучшить пользовательский интерфейс. Чтобы узнать для чего и какие персональные данные мы обрабатываем перейдите по ссылке. Если Вы нажмете «Я даю согласие», это означает, что Вы понимаете и принимаете все условия, указанные в этом Уведомлении о Конфиденциальности.