'Overriding element's css in Nebular/Angular

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.

htmlcssangularoverridingnebular


Solution 1:[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

Solution 2:[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;
}

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 wingman Frankie
Solution 2 Nensi Gondaliya

Related Questions