Overriding element's css in Nebular/Angular

Question

So I am trying to change the css of the header element of the nebular theme in angular

It looks like so

I want it to look like this

I am trying to separate the two elements (the "MyApp" and the actions bar). Through the console I found that I had to change the "justify-content" of the nav element embeded in the nb-header-layout to "space-between". Here is what I did

html:

<nb-layout-header class="header1">
    <app-header></app-header>
    <app-actions-bar></app-actions-bar>
</nb-layout-header>

css:

.header1 nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem;
}

But the changes doesn't apply. Why? And how should I do it?

I looked into not using Nebular’s layout header but it seems like nebular is forcing you to use it otherwise it is not displayed.

Answer 1

did you make sure the CSS loading order is correct? If one component has shared CSS in two different files, the older one will rewrite by the newer one

Answer 2

I think your CSS not applying can you please replace your CSS like this:

.header1 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem;
}

Answer 3

I'm a little late, but try using ::ng-deep

It can be used to force your styles down to a child element, useful in this case because the element you want to apply styling to, the nav, is not included in your markdown. For example:

::ng-deep nb-layout-header nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem;
}

Relevant StackOverflow post here.

Answer 4

The solution is like Laurence said

::ng-deep nb-layout-header nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem;
}