как передвинуть главное меню?

[mitandaster]

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

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

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

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

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

спасибо

Змінено 8 січня 2019 користувачем mitandaster

[Vetroff]

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

 

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

 

<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>

 

[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>

[mitandaster]

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>

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

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

[Vetroff]

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

[mitandaster]

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 }}

 

[Vetroff]

Всё

[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>

 

[mitandaster]

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>

 

 

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

[Vetroff]

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

 

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

[mitandaster]

супер! спасибо!