Bootstrap 4: Get full width dropdown of the main-menu container - css

Question

I would like to have the dropdown show from the initial position for all menus and maintain the width of say 600px.
So even if i try to open the dropdown of say Main Menu 2 or Main Menu 3 or Main Menu 4, the dropdown should start from Main Menu 1 position. Here's a screen I made to understand better.
PS: This is on ng-Bootstrap 4 and hence some Angular related codes. Also, this 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>
<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="dropdownBasic1" ngbdropdowntoggle="" aria-expanded="false">Main Menu 2</button>
<div aria-labelledby="dropdownBasic1" 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>
<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 2</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>
<a routerlink="/" ng-reflect-router-link="/" href="/">Menu I</a>
<a routerlink="/" ng-reflect-router-link="/" href="/">Menu J</a>
<a routerlink="/" ng-reflect-router-link="/" href="/">Menu K</a>
<a routerlink="/" ng-reflect-router-link="/" href="/">Menu L</a>
</div>
<div class="col-lg-4">
<h2 _ngcontent-c4="">Submenu 3</h2>
<a routerlink="/" ng-reflect-router-link="/" href="/">Menu M</a>
<a routerlink="/" ng-reflect-router-link="/" href="/">Menu N</a>
<a routerlink="/" ng-reflect-router-link="/" href="/">Menu O</a>
</div>
</div>
</div>
</div>
</div>
</li>
</ul>
This 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>
<li class="nav-item">
<div ngbDropdown class="d-inline-block">
<button class="nav-link" id="dropdownBasic1"
ngbDropdownToggle>Main Menu 2</button>
<div ngbDropdownMenu aria-labelledby="dropdownBasic1">
<div class="" ngbDropdownItem>
<div class="row">
<div class="col-lg-12">
<a routerLink="/">Sub Menu 1</a>
<a routerLink="/">Sub Menu 2</a>
<a routerLink="/">Sub Menu 3</a>
<a routerLink="/">Sub Menu 4</a>
<a routerLink="/">Sub Menu 5</a>
<a routerLink="/">Sub Menu 6</a>
</div>
</div>
</div>
</div>
</div>
</li>
<li class="nav-item">
<div ngbDropdown class="d-inline-block">
<button class="nav-link" id="dropdownBasic2"
ngbDropdownToggle>Main Menu 3</button>
<div ngbDropdownMenu aria-labelledby="dropdownBasic2">
<div class="" ngbDropdownItem>
<div class="row">
<div class="col-lg-6">
<a routerLink="/">Sub Menu 1</a>
<a routerLink="/">Sub Menu 2</a>
<a routerLink="/">Sub Menu 3</a>
</div>
<div class="col-lg-6">
<a routerLink="/">Sub Menu 1</a>
<a routerLink="/">Sub Menu 2</a>
<a routerLink="/">Sub Menu 3</a>
</div>
</div>
</div>
</div>
</div>
</li>
</ul>

Answer 1

Since you are using ngbDropdown - i thought about going about the question in Angular;
instead of fixed width to an arbitary 600px, i am using BS4 classes so that we get a responsive solution where 50% of width is for logo, the other 50% for our navigation buttons
Since we had to take the contents of the dropdown menu away from the default position (which is now commented in SB) of just under the toggle button, we had to manage the toggle effect ourselves;
also did some styling to get the effect that we wanted
You can see a working 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 : '';
}
}
}