Modify style with b-collapse and css

user_15482465 0
Viewed 205

what I am trying to do is modify the style of my b-collapse since by default it has a vertical style that I think and what I want is to give my menu a horizontal style

This is how I implement it:

<div style="background-color:white;">
      <b-collapse id="collapse-cat-lvl1-469">
        <div data-cat-acc="473" class="grid-item parent-lvl-2">
          <a class="link -1 grid-sty-1" href="#" target="_self" data-menu-item-id="473">
            <span class="text">GTI</span>
          </a>
        </div>
        <div data-cat-acc="474" class="grid-item parent-lvl-2">
          <a class="link sty-1 grid-sty-1" href="#" target="_self" data-menu-item-id="474">
            <span class="text">Pets</span>
          </a>
        </div>
     </b-collapse>
    </div>

You can modify in if this: collapse-cat-lvl1-469 ???

What I intend is to give it better style with CSS, or some way that I can see my menu horizontally and not vertically

I have this:

enter image description here

I want to get to this:

enter image description here

My CSS:

  .navbar-greetings, .login-section{display: none}

  #menu-header.collapse:not(.show){
    display: block;
  }

  #menu-header{
    position: fixed;
    top: 25px;
    max-width: 83%;
    margin: 0 auto;
    left: 8.32%;
    .panel{
      button{
        display: block;
        color: white;
        font-size: 13px;
        font-family: 'VWHead-Bold';
      }
    }
    #accordion-mbl-menu{
      display: flex;
    }
  }

I am really new to this, searching the web I have not been able to solve this problem

bootstrap-vue vue.js css
2 Answers

I believe that you can do this by just CSS without using b-collapse, and maybe using b-dropdown is better than b-collapse but I understand your problem and make a code snippet.

Look at this solution and maybe it'll be useful for you.

new Vue({
  el: '#app',
})
.customHorizontalList {
  list-style: none;
  display: flex;
  flex-direction: row;
}

.customHorizontalList>li {
  margin-right: 1rem;
}
<link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap@4.5.3/dist/css/bootstrap.min.css" />

<script src="https://unpkg.com/vue@2.6.12/dist/vue.min.js"></script>
<script src="https://unpkg.com/bootstrap-vue@2.21.2/dist/bootstrap-vue.min.js"></script>


<div id="app">
    <b-button v-b-toggle.collapse-1 variant="primary">Toggle Collapse</b-button>
  <b-collapse id="collapse-1" class="mt-2">
    <ul class="customHorizontalList">
      <li>ITEM 1</li>
      <li>ITEM 2</li>
      <li>ITEM 3</li>
    </ul>
  </b-collapse>
</div>

user_65955510

Use display: flex on containing element

user_33309810
Related