Issues with the CSS styling

Struggling with styling my menu and can't seem to get it right. Feeling a bit lost as 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">Accessories</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>

Have tried searching for solutions online but nothing seems to be working.

Desired output:

https://i.sstatic.net/yMtbZ.png

Current output:

https://i.sstatic.net/4U8jT.png

  1. Dropdown menu (white) should align directly below Div (blue)
  2. The dropdown menu should cover the entire width of the screen
  3. The top buttons should remain fixed, without moving the main menu when clicked
  4. The selected menu option should be underlined

Any advice or recommendations?

cssvue.js

Answer №1

Utilizing CSS Grid is the key to achieving this layout. Below, you'll find a code snippet example.

The intention is not for you to simply copy and paste this styling into your project, but rather to demonstrate the power of CSS grid (which also makes it easy to create a fully mobile-responsive design!)

If you're interested, feel free to check out this helpful Youtube video that I personally found beneficial when learning about 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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Using an array input in a Vue.js v-for loop

Creating a form to collect information about multiple persons can be challenging. Let's say we have 3 people to gather info on, and we need to structure the data in JSON format like this: { persons[0].surname: '', persons[0].name: &apos ...

vue.jsv-forv-model

What is the best way to link a search field and a datatable in separate views using VUEJS?

I have added a search field in the navbar section of my application and I'm looking to link it with the datatables located in another file. Should I use pops or events for this connection, and what would be the appropriate code structure? This is ho ...

vue.jseventssearchdatatable

The method options.domAPI is not a valid function in this context

While attempting to customize global variables using stylus config in Vuetify, I discovered that it is no longer supported. To address this issue, I executed the following command to install the necessary loaders: npm i --save-dev stylus stylus-loader css ...

javascriptvue.jsnpmvuetify.js

What could be causing the paragraph margins to overlap and not display properly?

Two pages with identical layout and CSS stylesheets. One page displays correctly, while the other has overlapping margins for paragraphs. Unable to share entire source code due to length. Seeking insight into potential causes of this issue. https://i.sst ...

htmlcss

Tips for changing the default height of Elastic UI dropdown menus

I am attempting to adjust the height of the Task combobox to match that of the Date Picker, but the styling is not being applied when done through a class or inline. https://i.sstatic.net/3Cua1.png I have tried inline styling the element as: <EuiForm ...

cssreactjssass

Excessive content spilling over the div container

Hello everyone I've been trying to set up a div that includes an image, a title, and some text. I want the image to be aligned on the left side, with the title and text following on the right. However, I'm having an issue where the text is overf ...

htmlcssoverflow

Having trouble getting the Vue.js sample app to run using "npm run dev"? The error message "Error: Cannot find module 'node:url'" may

As a beginner in vuejs, I am currently following the steps below to create my vue js app on my local system: Step: npm init vue@latest ✔ Project name: … VueDemo ✔ Add TypeScript? … No / Yes ✔ Add JSX Support? … No / Yes ✔ Add Vue Router f ...

javascriptvue.js

Creating side panels on the left and right using CSS and HTML

I am looking to design a website where users can open sidepanes from both the left and right sides. I am not proficient in JavaScript and would prefer a solution using only CSS and HTML. While browsing, I came across a website that achieves what I want thr ...

csshtml

Guide on incorporating a loading screen for a Single Page Application crafted in Vue.js?

Just diving into the world of Vue.js after using AngularJS 1. Looking for suggestions on how to incorporate a loading screen like the one at PleaseWait. Any ideas? ...

vue.jsvuejs2

Generate a fresh array using the information extracted from a JSON file

I need assistance in extracting a new array from JSON data. The desired output should be an array containing "itog" values. [12860498,20156554,19187309] [ { "0": { "itog": 12860498, "return": ...

javascriptvue.js

Can we stop a specific container from resizing on mobile devices?

My goal is to have the entire page scale down, except for the navigation container. I'm adjusting some CSS rules to improve accessibility on smartphones, but the issue arises with the multiple images it uses. I need these images to display in their or ...

cssmobile

Code Snippet: Adjust Table Column Alignment using CSS

Apologies for the basic question, as I am new to CSS. Below is the UI that I am working with: https://i.stack.imgur.com/crAYE.png Here is the code that corresponds to the UI: <div class="row centered-form center-block"> <div cla ...

htmlcsstwitter-bootstrap

Avoiding the inclusion of special characters in symfony css selectors, or utilizing wildcard characters for more

Currently, I am utilizing the Symfony\Component\DomCrawler\Crawler component in order to locate a form that contains a name with various CSS special characters. <input name="myfield[0].thing"> In my code, I have: $messageElement = $ ...

csssymfony

AngularJS remove a row from a table disrupts the formatting

Hello! I am attempting to delete rows from a table in Angular. I want the first two rows to have a red background and the rest to have a white background. If I try to delete the last row, it gets deleted but the color remains for the first row only (it sh ...

javascriptjqueryangularjshtmlcss

Determine the index of a row in a Vuetify v-data table

Hi there! I'm just starting out with vue js and vuetify. In my editProductSave function, I need to pass an additional variable which is the index of the row in the table. Here is my current code, how can I accomplish this? The table is generated using ...

vue.jsvuetify.jsv-data-table

Exploring the power of Vue.js reactivity using Object.defineProperty in a TypeScript environment

Currently, I am in the process of developing a TypeScript class to manage form submissions and handle server errors: export default class Form<Model> { private readonly original: Model private changes: Partial<Model> constructor(d ...

typescriptvue.jsvuejs2vue-reactivity

What is the best way to execute Laravel mix using a custom URL?

I am currently working on an application that needs to be deployed on a staging server due to its dependencies on other servers within the network. Building it locally is not feasible in this case. The application is developed using Vue.js and Laravel. Du ...

node.jslaravelvue.jsnpmlaravel-mix

What is the best way to eliminate unexplained spacing at the bottom of a webpage using CSS?

I am struggling to create a basic webpage using Bootstrap and D3, and I can't seem to figure out how to remove the excess whitespace at the bottom. Any tips on how to resolve this issue would be greatly appreciated. I attempted to set the min-height ...

cssd3.jsbootstrap-5whitespace

"Customize Bootstrap layout to have a stable width for desktop screens and a flexible width for

I received a psd design with a background for html5-bootstrap development that needed to be responsive. The original psd had a width of over 1200px, with the main container around 900px wide and the background displaying correctly. When converting to HTML ...

csshtmltwitter-bootstrapresponsive-design

Methods to prevent images from spilling over into divs?

I am looking to implement a unique functionality that involves three images sliding out of the page to the right, fading in the process, and not overflowing. Simultaneously, three other images slide in to take their place. If you want to see the Framework ...

htmlcssanimationoverflow