Как сделать 3 блока bootstrap поверх бэкграунда?

Question

[enerjze]

Пытаюсь сделать следуещее, 3 блока, слева, по центру, справа.

Как на картинке, получилось пока что только меню сделать по центру

+ при скролле вниз меню не во всю ширину экрана

.ftco-navbar-light.scrolled {
    position: fixed;
    right: 0;
    left: 50%;
transform: translateX(-50%);
    top: 0;
	z-index: 3;
    margin-top: -130px;
    background: #fff !important;
    -webkit-box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1); }

Пытался через width не получается(

Answer 1

[Дмитрий]

Покажите код html
Проще всего положить блок в container-fluid - он расстянется на всю ширину и нужной заливки, к примеру черной.
Дальше в блоке пишет container где будет сосредоточено ваши пункты меню и дать ему background transparent и color Для тегов a белый.

Comments

[enerjze]

<nav class="navbar navbar-expand-lg navbar-dark ftco_navbar bg-dark ftco-navbar-light" id="ftco-navbar">
	    <div class="container">
	      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#ftco-nav" aria-controls="ftco-nav" aria-expanded="false" aria-label="Toggle navigation">
	        <span class="oi oi-menu"></span> Menu </button>
		  <a id="#main"></a>

	      <div class="collapse navbar-collapse" id="ftco-nav">
	        <ul class="nav navbar-nav ml-auto">
	          <li class="nav-item"><a href="#main" class="nav-link">ГЛАВНАЯ</a></li>
	          <li class="nav-item"><a href="#barbers" class="nav-link">МАСТЕРА</a></li>
	          <li class="nav-item"><a href="#prices1" class="nav-link">ЦЕНЫ</a></li>
	          <li class="nav-item"><a href="#contacts" class="nav-link">КОНТАКТЫ</a></li>
	        </ul>
	      </div>
	    </div>
	  </nav>
    <!-- END nav -->
    
   <div class="hero-wrap js-fullheight" style="background-image: url('images/bg_gr.jpg');" data-stellar-background-ratio="0.5">
      <div class="overlay"></div>
      <div class="container">
        <div class="row no-gutters slider-text js-fullheight align-items-center justify-content-start" data-scrollax-parent="true">
        	
          <div class="col-md-6 ftco-animate" data-scrollax=" properties: { translateY: '70%' }">
            <h1 class="mb-5" data-scrollax="properties: { translateY: '30%', opacity: 1.6 }">text</h1>
            <p data-scrollax="properties: { translateY: '30%', opacity: 1.6 }"><a href="#" class="btn btn-primary px-4 py-3 ms_booking">Записаться</a></p>
          </div>
        </div>
      </div>
    </div>

[Дмитрий]

используй navbar-fixed-top вместо position:fixed
убери ftco-navbar-light
id="ftco-navbar"

почитай документацию, там примеры крутые в бустрапе по шапкам
для тех столбцов надо соответственно col-md-4 использовать

Answer 2

[Alexandr59]

У Вас есть возможность оформить песочницу?
Так проще подсказать решение

Comments

[enerjze]

Нет(

Answer 3

[NaN]

У вас 3 блока, так оберните их родительский блок и задайте ему display:flex и align-items: space-between;

Comments

[Дмитрий]

так то оно так, но раз уж взял бустрап 3, то лучше 3 версией и работать, а флексы а ктуальны в 4 уже)

[enerjze]

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

[Дмитрий]

не совсем понял. что значит уходило вниз?
можно сделать

<div class="row">
 <div class="col-md-4">LOGO</div>
 <div class="col-md-4">MENU</div>
 <div class="col-md-4">INFO</div>
</div>

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