Как перенести поле поиска и корзину

конечно неправильно. Абсолютное позиционирование стилями, это не для бутстрапа.
По примеру с первых страниц должно получится. Посмотрите еще раз, да и про бутстрап можете почитать что это.

 

Сейчас выглядит вот так.

Подскажите пожалуйста что не так?

Сделал вот так:
header.tpl

Код:

      </div>
   
      </div>
      <div class="col-sm-3 pull-right"><?php echo $cart; ?></div>
    </div>
  </div>
</header>
<?php if ($categories) { ?>
<div class="container">
  <nav id="menu" class="navbar">
    <div class="navbar-header"><span id="category" class="visible-xs"><?php echo $text_category; ?></span>
      <button type="button" class="btn btn-navbar navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse"><i class="fa fa-bars"></i></button>
    </div>
    <div class="collapse navbar-collapse navbar-ex1-collapse">
     <div class="col-sm-5 pull-left"><?php echo $search; ?></div>
      <ul class="nav navbar-nav">
        <?php foreach ($categories as $category) { ?>
        <?php if ($category['children']) { ?>
        <li class="dropdown"><a href="<?php echo $category['href']; ?>" class="dropdown-toggle" 

common.js

Код:

/* Search */
    $('#search input[name=\'search\']').parent().find('button').on('click', function() {
        url = $('base').attr('href') + 'index.php?route=product/search';

        var value = $('#top input[name=\'search\']').val();

        if (value) {
            url += '&search=' + encodeURIComponent(value);
        }

        location = url;
    });

    $('#search input[name=\'search\']').on('keydown', function(e) {
        if (e.keyCode == 13) {
            $('#top input[name=\'search\']').parent().find('button').trigger('click');
        }
    });

stylesheet.css добавлено вот это:

Код:

.navbar-collapse.collapse {
    text-align: center;
}
.navbar-nav {
    margin: 0 auto;
    padding: 0;
    display: inline-block;
    margin-bottom: -4px;
    text-align: left;
    float: none;
}

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

 

видимо потому что вы вышли из блока #top
Про это уже выше было написано несколько раз, что скрипт нужно править согласно коду html

 

Решено. Спасибо большое!
Разобрался.

#top input заменил на #menu и все встало на свои места, осталось только выровнять по центру....

 

Спасибо за тему, сделал как вы описали.

PHP:

<div class="container">
  <nav id="menu" class="navbar">
    <div class="col-sm-3 pull-right"><?php echo $cart; ?></div>
    <div class="navbar-header"><span id="category" class="visible-xs"><?php echo $text_category; ?></span>
      <button type="button" class="btn btn-navbar navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse"><i class="fa fa-bars"></i></button>
    </div>

и в итоге получил следующий вид:

Кнопка прижата к верхней части меню, редактировал padding в файле stylesheet.css

Код:

.btn-lg {
    padding: 5px 20px;
    font-size: 9px;
}

но это не дало ожидаемого эффекта. Подскажите как сделать кнопку слева по центру(отступ сверху и с низу одинаковый)

 

ссылку на сайт напишите.

 

К сожалению сайт еще не заливал на хостинг и веду разработку локально. Если нужно могу выслать нужные файлы.
Кстати на скринах vagan28 такая же ситуация, только с поиском. Он тоже прижат к верхней части меню.

 

Неужели ни кто не сталкивался с такой проблемой?

 

с какой? С незнанием основ css и html? Конечно каждый с этим сталкивается, но люди стараются и обучаются, ведь информации наверно больше чем по любой другой тематики.
В чем проблема добавить вверху отступ для #cart ??

 

В этом случае просто расширяется все меню. Это было бы действительно проще, не так не удалось решить данную проблему.

 

ну а вы посмотрите почему расширяется? Неужели не видно отступ внизу ?

 

Именно его я найти и не смог, может не тот объект смотрю конечно:

Код:

.btn-lg {
    padding: 5px 20px;
    font-size: 9px;
}

отступ по 5 пикселей сверху и снизу.

 

конечно не тот. Узнайте что такое инспектор элементов у браузера и жизнь наладится. А то вы в слепую все делаете.
Да я уже выше показал где отступ снизу #cart

 

Спасибо большое, действительно все получилось, выставил

Код:

#cart {
    margin-top: 5px;
}

и все стало отображаться корректно.

 

Вопрос таков, ранее было описано поиск и корзина друг над другом, а если в одну строку, то как правильно в коде?

 

А какой на данный момент у вас код, шаблон и т.д. Или же дайте ссылку на сайт свой, что бы хоть знать с чем работать ...

 

Сайт в разработке, шаблон дефаулт, версия опенкарт 2.3 вот код сейчас, а куда поместить выделено желтым на снимки

<div class="container">

<div class="col-sm-8">
<div class="row">
<div class="col-sm-6 pull-right"><?php echo $search; ?></div>
<nav class="menu-bottom-bg4">
<div class="CMS_Header_banner2">
<a href="http://название_сайта/главная.html" title="Главная"><span class="hidden-xs hidden-sm hidden-md">Главная<span</a>
<a href="http://название_сайта/главная.html" title="Компания"><span class="hidden-xs hidden-sm hidden-md">Компания</span></a>
<a href="http://название_сайта/главная.html" title="Портфолио"><span class="hidden-xs hidden-sm hidden-md">Портфолио</span></a>
<a href="http://название_сайта/главная.html" title="Услуги"><span class="hidden-xs hidden-sm hidden-md">Услуги</span></a>


</nav>

</div>
</div>


</div>
</div>

 

margin-left: #%; не пробовали ?

 

Поиск вправо и влево без проблем, мне корзину надо ту даже засунуть в одну линию с поиском
<div class="col-sm-3"><?php echo $cart; ?></div>

 

Дайте ссылку в ЛС на свой сайт.