MDB 8 - navbar width - Material Design for Bootstrap

Topic: MDB 8 - navbar width

itay pro asked 5 years 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

Add comment

itay pro answered 5 years ago

0 0 Best answer

This is what I use. Most of it is for RTL support:

::ng-deep {
  .mr-auto {
    margin-left: auto !important;
    margin-right: 0 !important;
  }

  .ml-auto {
    margin-right: auto !important;
    margin-left: 0 !important;
  }

  .double-nav {
    padding-right: 240px !important;
    padding-left: 16px !important;
  }

  .double-nav .breadcrumb-dn p {
    margin: 0;
    padding-top: 0;
    padding-right: 1rem;
    font-weight: 300;
  }
}

Damian Gemza staff commented 5 years ago

I have tried to reproduce your problem, nested styles are working fine for mdb-navbar. I have tested it on Double Navigation with fixed SideNav & fixed Navbar example.

That's my code which is working fine:

mdb-navbar .ie-double-nav { margin-left: 0 !important; margin-right: auto !important; }

itay pro commented 5 years ago

Perhaps your styles are global as mine are in the components .scss

Damian Gemza staff commented 5 years ago

If you want to use global, use the line which I have you provided. And it will work fine.

itay pro commented 5 years ago

I want to use local styles, within the component only

Add comment

itay pro answered 5 years ago

0 0 Best answer

mdb-navbar .navbar works on the main mdb-navbar element, not on his children

 .mr-auto
 .ml-auto
 .double-nav
 .double-nav .breadcrumb-dn p

Arkadiusz Idzikowski staff commented 5 years ago

Please provide more information. What exactly did you try to overwrite and what css selector did you try to use in this case?

Add comment

Damian Gemza staff answered 5 years ago

0 0 Best answer

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

Add comment

itay pro answered 5 years ago

0 0 Best answer

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 5 years ago

Did setting containerInside to false resolve your problem?

itay pro commented 5 years ago

Yes, adding it resolve the problem

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

Add comment

itay pro answered 5 years ago

0 0 Best answer

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

Add comment

ak.leimrey pro answered 5 years ago

0 0 Best answer

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

Add comment

Write

Create snippet

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Resolved

Specification of the issue

ForumUser: Pro
Premium support: No
Technology: MDB Angular
MDB Version: 8.0.0
Device: NA
Browser: NA
OS: NA
Provided sample code: No
Provided link: Yes

itay

Pro User 2474Support score
150Questions 196Answers 0Snippets