导航栏品牌在移动设备上的导航栏之外

时间:2020-11-08 05:28:13

标签: html css

我需要将导航栏品牌(我们的徽标)放到移动设备屏幕的中间(切换开关的选项之外)。

手机上的当前位置:

enter image description here

所需职位:

enter image description here

Codepen:

https://codepen.io/ogonzales/pen/LYZJvBL

代码:

  <ul class="navbar-nav">
    <li style="margin-top: 10%;">
      <a class="navbar-brand" style="margin-top:10%;" href="/">&emsp;&emsp;<img src="https://i.pinimg.com/originals/db/ff/9b/dbff9bfaf1b8dc98835ed1b158445338.png"
        width="20px" height="30px"></a>
    </li>
      <li class="nav-item active">
          <a class="nav-link" href="/stickers">Stickers <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item active">
          <a class="nav-link" href="/packs">Packs <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item active">
          <a class="nav-link" href="/catalogo">Catálogo <span class="sr-only">(current)</span></a>
      </li>
  </ul>

  <ul class="navbar-nav ml-auto">
      
      <li id="shopping-cart" class="nav-item cart_items_li active">
          <a class="nav-link" href="/carrito_de_compras/"><i class="fas fa-shopping-cart"
                  style="color:white !important;"></i> ( <span
                  class="cart_items_counter">0</span> )</a>

      </li>
      <li class="nav-item active">
          <a class="nav-link" href="/ingresar/">Ingresar <i class="fas fa-sign-in-alt"></i></a>
      </li>
      <li class="nav-item active">
          <a class="nav-link" href="/registrarse/">Registrarse <i class="fas fa-user-plus"></i></a>
      </li>


      
  </ul>
</div>

<div class="col-md-6 my_banner_right">
  <div class="">
    <div class="my_home_banner_lef_text">
      <p class="my_home_banner_title stickers-word">PCs personalizadas</p>
      <p class="my_home_banner_title personalizados-word">Tarifa única S/ 70</p>
      <p class="my_home_banner_subtitle my_title"><b>Fáciles de ordenar por internet.</b><br><b>Envíos a todo el
          Perú.</b></p>
    </div>
    <div class="row ">
      <div class="col-md-6">
        <a href="stickers" class="my_home_buttons btn-azul text-white btn-block">Construir PC</a>
      </div>
      <div class="col-md-6">
        <a href="/muestras/"
          class="my_home_buttons btn btn-naranja text-white btn-block">Más vendidos</a>
      </div>
    </div>
  </div>
</div>

0 个答案:

没有答案