Achieve a main-menu container with a full width dropdown using Bootstrap 4

Question

Achieve a main-menu container with a full width dropdown using Bootstrap 4

I want the dropdown to start from the initial position for all menus and maintain a width of 600px.

Even if I attempt to open the dropdown for "Main Menu 2" or "Main Menu 3" or "Main Menu 4", the dropdown should always start from the position of "Main Menu 1". Here is a screenshot for better understanding. https://i.sstatic.net/Wp8QH.png

PS: This is in ng-Bootstrap 4 and contains some Angular-related codes. The following is the generated HTML.

<ul class="nav justify-content-end">
  <li class="nav-item">
    <div class="d-inline-block dropdown" ngbdropdown="">
      <button aria-haspopup="true" class="nav-link btn btn-link text-uppercase dropdown-toggle" id="dropdownBasic0" ngbdropdowntoggle="" aria-expanded="false">Main Menu 1</button>
      <div aria-labelledby="dropdownBasic0" ngbdropdownmenu="" class="dropdown-menu" x-placement="bottom-left">
        <div class="" ngbdropdownitem="">
          <div class="row">
            <div class="col-lg-4">
              <h2 _ngcontent-c4="">Submenu 1</h2>
              <a routerlink="/" ng-reflect-router-link="/" href="/">Menu A</a>
              <a routerlink="/" ng-reflect-router-link="/" href="/">Menu B</a>
              <a routerlink="/" ng-reflect-router-link="/" href="/">Menu C</a>
            </div>
            <div class="col-lg-4">
              <h2 _ngcontent-c4="">Submenu 2</h2>
              <a routerlink="/" ng-reflect-router-link="/" href="/">Menu D</a>
              <a routerlink="/" ng-reflect-router-link="/" href="/">Menu E</a>
            </div>
            <div class="col-lg-4">
              <h2 _ngcontent-c4="">Submenu 3</h2>
              <a routerlink="/" ng-reflect-router-link="/" href="/">Menu F</a>
              <a routerlink="/" ng-reflect-router-link="/" href="/">Menu G</a>
              <a routerlink="/" ng-reflect-router-link="/" href="/">Menu H</a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </li>

  ... (Remaining HTML code not repeated for brevity)

Below is the Angular Code:

<ul class="nav justify-content-end">
  <li class="nav-item">
    <div ngbDropdown class="d-inline-block">
      <button class="nav-link" id="dropdownBasic0"
              ngbDropdownToggle>Main Menu 1</button>
      <div ngbDropdownMenu aria-labelledby="dropdownBasic0">
        <div class="" ngbDropdownItem>
          <div class="row">
            <div class="col-lg-4">
              <a routerLink="/">Sub Menu 1</a>
              <a routerLink="/">Sub Menu 2</a>
              <a routerLink="/">Sub Menu 3</a>
            </div>
            <div class="col-lg-4">
              <a routerLink="/">Sub Menu 1</a>
              <a routerLink="/">Sub Menu 2</a>
              <a routerLink="/">Sub Menu 3</a>
            </div>
            <div class="col-lg-4">
              <a routerLink="/">Sub Menu 1</a>
              <a routerLink="/">Sub Menu 2</a>
              <a routerLink="/">Sub Menu 3</a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </li>

  ... (Remaining Angular code not repeated for brevity)

css angular twitter-bootstrap bootstrap-4

Answer 1

Answer №1

Considering the use of ngbDropdown, I decided to tackle the question in an Angular context;

Instead of assigning a fixed width of 600px, I utilized BS4 classes to create a responsive solution where 50% of the width is reserved for the logo, and the other 50% for navigation buttons.
Since we needed to reposition the dropdown menu away from its default location (now noted in SB) just below the toggle button, we handled the toggle effect ourselves;
We also applied some styling to achieve the desired effect.
You can view a functional demo here

Relevant HTML code:

<div class="row">
    <div class="col-6">
        LOGO AREA
    </div>

    <div class="col-3 ">
        <div ngbDropdown class="fullWidth">
            <button class="btn btn-outline-primary" id="dropdownBasic1" ngbDropdownToggle (click)="toggleShow1()">dropdown1</button>
    </div>
  </div>

  <div class="col-3 ">
    <div ngbDropdown  class="fullWidth">
      <button class="btn btn-outline-primary" id="dropdownBasic2" ngbDropdownToggle (click)="toggleShow2()">dropdown2</button>
    </div>
  </div>
  </div>
  <div class='row'>
    <div class='col-6'>
    </div>
    <div class='col-6'>
      <div class='dropdown-menu show' *ngIf="show1" >
        <button ngbDropdownItem>Action - 1</button>
        <button ngbDropdownItem>Another Action</button>
        <button ngbDropdownItem>Something else is here</button>
      </div>
      <div class='dropdown-menu show' *ngIf="show2">
        <button ngbDropdownItem>Action - 2</button>
        <button ngbDropdownItem>Another Action</button>
        <button ngbDropdownItem>Something else is here</button>
      </div>
    </div>
</div>

Relevant TS code:

import { Component } from '@angular/core';

@Component({
  selector: 'ngbd-dropdown-basic',
  templateUrl: './dropdown-basic.html',
  styles: [`
  .fullWidth .btn {width:100%;}
  .dropdown-menu.show{ position: initial; width: inherit;}
  `]
})
export class NgbdDropdownBasic {
  show1: boolean = false;
  show2: boolean = false;

  toggleShow1() {
    if (this.show1) { this.show1 = false; }
    else {
      this.show1 = true;
      (this.show2) ? this.show2 = false : '';
    }
  }

  toggleShow2() {
    if (this.show2) { this.show2 = false }
    else {
      this.show2 = true;
      (this.show1) ? this.show1 = false : '';
    }
  }

}

Answer 2

Considering the use of ngbDropdown, I decided to tackle the question in an Angular context;

Instead of assigning a fixed width of 600px, I utilized BS4 classes to create a responsive solution where 50% of the width is reserved for the logo, and the other 50% for navigation buttons.
Since we needed to reposition the dropdown menu away from its default location (now noted in SB) just below the toggle button, we handled the toggle effect ourselves;
We also applied some styling to achieve the desired effect.
You can view a functional demo here

Relevant HTML code:

<div class="row">
    <div class="col-6">
        LOGO AREA
    </div>

    <div class="col-3 ">
        <div ngbDropdown class="fullWidth">
            <button class="btn btn-outline-primary" id="dropdownBasic1" ngbDropdownToggle (click)="toggleShow1()">dropdown1</button>
    </div>
  </div>

  <div class="col-3 ">
    <div ngbDropdown  class="fullWidth">
      <button class="btn btn-outline-primary" id="dropdownBasic2" ngbDropdownToggle (click)="toggleShow2()">dropdown2</button>
    </div>
  </div>
  </div>
  <div class='row'>
    <div class='col-6'>
    </div>
    <div class='col-6'>
      <div class='dropdown-menu show' *ngIf="show1" >
        <button ngbDropdownItem>Action - 1</button>
        <button ngbDropdownItem>Another Action</button>
        <button ngbDropdownItem>Something else is here</button>
      </div>
      <div class='dropdown-menu show' *ngIf="show2">
        <button ngbDropdownItem>Action - 2</button>
        <button ngbDropdownItem>Another Action</button>
        <button ngbDropdownItem>Something else is here</button>
      </div>
    </div>
</div>

Relevant TS code:

import { Component } from '@angular/core';

@Component({
  selector: 'ngbd-dropdown-basic',
  templateUrl: './dropdown-basic.html',
  styles: [`
  .fullWidth .btn {width:100%;}
  .dropdown-menu.show{ position: initial; width: inherit;}
  `]
})
export class NgbdDropdownBasic {
  show1: boolean = false;
  show2: boolean = false;

  toggleShow1() {
    if (this.show1) { this.show1 = false; }
    else {
      this.show1 = true;
      (this.show2) ? this.show2 = false : '';
    }
  }

  toggleShow2() {
    if (this.show2) { this.show2 = false }
    else {
      this.show2 = true;
      (this.show1) ? this.show1 = false : '';
    }
  }

}

Achieve a main-menu container with a full width dropdown using Bootstrap 4

Answer №1

Similar questions

Using Wordpress? Customize your sidebar with three widgets and don't forget to add the "last" class to the third one for a polished look

Troubleshooting Problem with Updating Bootstrap Datepicker in AngularJS

Interactive JavaScript Slider for Customizing Selection

Display a div above the Kendo for Angular Dialog

Is it possible to utilize Bootstrap Icons as bullet points on a website?

Interactive feature allowing all embedded YouTube videos on a webpage to play synchronously, with sound disabled, and on a continuous loop

Using JQUERY to create a smooth sliding transition as images change

Tips for switching out images depending on the time of day

Total aggregate for a variety of Sliders (Bootstrap 4 & jQuery)

Can you tell me the standard font size in Internet Explorer 9?

Is there a hashing algorithm that produces identical results in both Dart and TypeScript?

Is there a way to make the parent elements invisible when there are no child elements present?

items within the grid container are positioned without being constrained to rows and columns

How to make the Bootstrap mobile navigation menu taller?

Creating an organized layout with multiple bootstrap toasts in a grid formation

Checking Email in Angular 2 for Accuracy

Main navigation category as parent and secondary category as a child menu in WordPress

Inherit margins from child elements with fixed positions

The appearance of random instances of the letter "L" within text on Internet Explorer 8

Enhancing Twilio LocalVideoTrack with custom start and stop event handling