MDB 8 - navbar width


Topic: MDB 8 - navbar width

mdb2 pro asked 5 days ago

Q: max-width: none; is missing for .navbar making the navbar not filling entire width

A: mdb-navbar component will take 100% of free space (if you place it inside .container, it won't take 100% width of the screen). Take a look at screenshot - in the app there's only mdb-navbar without any containers etc: https://screenshots.firefox.com/k8Lo2PKPkaQzUiVi/localhost

--

mdb-navbar is indeed inside a container that I cannot remove so I had to add

  .navbar>.container,
  .navbar>.container-fluid {
    max-width: none;
  }

Should be like: https://imgur.com/a/8dcDtPF

But is like: https://imgur.com/a/yEgVhLM


ak.leimrey pro answered 4 days ago

The Navbar has an input directive value that goes like this

[containerInside]="false"

The default state is "true", so if you put it to false, the container inside the navbar won't be created and the navbar will be at full length.

Refer to this example: https://mdbootstrap.com/docs/angular/navigation/navbar/#containers


mdb2 pro answered 4 days ago

Didn't know that Thanks as it works It broke when converting for containerless <nav> to <mdb-navbar>


mdb2 pro answered 4 days ago

Since now the component is inside mdb-navbar, its scss must be wrapped with ::ng-deep for its rules to access its elements


Arkadiusz Idzikowski staff commented 4 days ago

Did setting containerInside to false resolve your problem?


mdb2 pro commented 4 days ago

Yes, adding it resolve the problem

Do I have to wrap the scss with ::ng-deep or if there a better way ?


Damian Gemza staff answered 20 hours ago

Dear @mdb2

You don't have to use ::ng-deep. You can simply target the mdb-navbar element by using an mdb-navbar prefix on every style which you want to overwrite in the navbar.

Here's the sample styling:

mdb-navbar .navbar {
 background-color: red !important;
}

Best Regards,

Damian


Please insert min. 20 characters.
Status

Resolved

Specification of the issue
  • User: Pro
  • Premium support: No
  • Technology: Angular
  • MDB Version: 8.0.0
  • Device: NA
  • Browser: NA
  • OS: NA
  • Provided sample code: No
  • Provided link: Yes
Tags