[Vuejs]-Place part of the navbar brand outside the bar

by

1👍

✅

Change positioning of your logo to absolute and position it with top/left properties as you want:

.logo-home{
  width:50px;
  height:50px;
  position: absolute;
  top: 20px;
}

And don’t forget to move down menu items for mobile mode. Add class (e.g. menu-items) to your b-navbar-nav (like <b-navbar-nav class="ml-auto menu-items">) with the following styles:

@media (max-width: 991px) {
  .menu-items {
    margin-top: 40px;
  }
}

new Vue({
  el: "#app"
});
.logo-home{
        width:60px;
        height:60px;
        background-color: blue;
        position: absolute;
        top: 20px;
    }

@media (max-width: 991px) {
   .menu-items{
        margin-top: 40px;
    }
}
<link href="https://unpkg.com/bootstrap@4.1.3/dist/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://unpkg.com/bootstrap-vue@2.0.0-rc.11/dist/bootstrap-vue.css" rel="stylesheet"/>
<script src="https://unpkg.com/vue@2.5.17/dist/vue.min.js"></script>
<script src="https://unpkg.com/bootstrap-vue@2.0.0-rc.11/dist/bootstrap-vue.min.js"></script>

<div id="app">
  <b-navbar toggleable="lg" type="light" variant="secondary" class="navbar-fh">
    <b-navbar-brand to="/">
      <div class="logo-home"></div>
    </b-navbar-brand>

    <b-navbar-toggle target="nav-collapse"></b-navbar-toggle>
    <b-collapse id="nav-collapse" is-nav>
      <!-- Right aligned nav items -->
      <b-navbar-nav class="ml-auto menu-items">
        <b-nav-item to="/">Home</b-nav-item>
        <b-nav-item to="/two">Page Two</b-nav-item>
      </b-navbar-nav>
    </b-collapse>
 </b-navbar>
</div>
👤Lana

Leave a comment