Problems with css styles

user_15482465 0
Viewed 44

I'm working on styling my menu, but I can't get the format I expect, I don't really know what I'm doing wrong, I'm new to this

.customHorizontalList {
    list-style: none;
    display: flex;
    flex-direction: row;
  }

  .customHorizontalList>li {
    margin-right: 1rem;
  }

  .divmenu{
    padding-left: 0 !important;
    padding-right: 0 !important;
    width: 100% !important;
    background-color: white;
    font:400 20px/20px sans-serif;
  }

  .ButtonsMenu{
    color: white;
    background-color: #001e50;
    border:none;
    font-family: 'VWHead-Bold';
    font-size: 13px;
  }

  .textTitleSubMenu {
    padding-left: 12px;
    color: #000000;
    font-size: 17px;
    font-family: "VWText-Regular";
  }

  .textSubMenu{
    padding-left: 12px;
    color: #001e50;
    font-size: 15px;
    font-family: "VWText-Regular";
  }
<div class="scroll-wrapper scrollbar-outer" style="position: relative;">
     <div id="menu-mobile-cats" class="scrollbar-outer scroll-content scroll-scrolly_visible">
    <div class="panel-group" id="accordion-mbl-menu">
        <!-- ===Menu Desktop=== -->
        <div id="app" class="large">
          <b-button v-b-toggle.collapse-1 class="ButtonsMenu">Accesorios</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>

Searching the web I tried to fix the problem but so far nothing has worked

I look for this:

enter image description here

I have until now this:

enter image description here

  1. Dropdown menu (white) must be exactly below Div (blue)
  2. The drop-down menu that covers the entire width of the screen
  3. The upper buttons have to be fixed, when I press one the whole main menu moves
  4. the selected menu must be underlined

any help or recommendation?

vue.js css
1 Answers

This can be created using CSS Grid. I will give an example code snippet below.

This styling isn't designed for you to just copy/paste into your project, but rather show you how powerful CSS grid is (It's easy to make completely mobile-responsive as well!)

If you are interested, here is a Youtube video you can watch that I personally found helpful. When getting to learn CSS Grid.

header {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  background: #001E50;
  padding: 20px;
  border: 4px solid #C85171;
  margin-bottom: 2em;
  align-content: center;
}
header > * {
  color: white;
}
#b1 {
  grid-column: -3/-2;
}

main {
  display: grid;
  grid-template-columns: repeat(4, 2fr) repeat(2, 1fr);
}
main > * {
  width: 100px;
  height: 100px;
  background: red;
}
<header>
  <div id="n1">Lorem Ipsum</div>
  <div id="n2">Lorem Ipsum</div>
  <div id="n3">Lorem Ipsum</div>
  <div id="n4">Lorem Ipsum</div>
  <button id="b1"></button>
  <button id="b2"></button>  
</header>

<main>
  <div id="m1"></div>
  <div id="m2"></div>
  <div id="m3"></div>
  <div id="m4"></div>
</main>

user_134359230
Related