Nebular: nb-layout-header actions align left or right

[theFallen78]

there is no documentation regarding the top navigation
just like in the demo

company logo is on the left and user icon is on the far right
how do i archive this or should use css

[ArtemRomanovsky]

hi @theFallen78!
Yes, you need to use CSS to place the company's logo/user' icon in the upper left/right corner

[kaiwalyag]

not able to align left / right using css. any update on this issue?

[theFallen78]

@kaiwalyag
`

    <div class="header-container another-header">
      <nb-actions size="small">


        <!--<nb-action   class="control-item"  [routerLink]="['/profile']" >Profile</nb-action> -->
        <nb-action   class="control-item"  [routerLink]="['/referral/personal']">Personal</nb-action> 
        <nb-action   class="control-item"  [routerLink]="['/referral/agency']">Agency</nb-action> 

          <nb-action>

              <button (click) = "authService.SignOut()" size="small" outline status="info"nbButton>
                  logout
                </button>
          </nb-action>

      </nb-actions>
    </div>

`

[theFallen78]

then the s/css was like this
`@import '~bootstrap/scss/mixins/breakpoints';
@import '~@nebular/theme/styles/global/_breakpoints';
@import './styles/themes';

@include nb-install-component() {
display: flex;
justify-content: space-between;
width: 100%;

.logo-container {
display: flex;
align-items: center;
width: calc(#{nb-theme(sidebar-width)} - #{nb-theme(header-padding)});
}

nb-action {
height: auto;
display: flex;
align-content: center;
}

nb-user {
cursor: pointer;
}

::ng-deep nb-search button {
padding: 0!important;
}

.header-container {
display: flex;
align-items: right;
width: auto;

.sidebar-toggle {
  @include nb-ltr(padding-right, 1.25rem);
  @include nb-rtl(padding-left, 1.25rem);
  text-decoration: none;
  color: nb-theme(text-hint-color);
  nb-icon {
    font-size: 1.75rem;
  }
}

.logo {
  padding: 0 1.25rem;
  font-size: 1.75rem;
  @include nb-ltr(border-left, 1px solid nb-theme(divider-color));
  @include nb-rtl(border-right, 1px solid nb-theme(divider-color));
  white-space: nowrap;
  text-decoration: none;
}

}

@include media-breakpoint-down(sm) {
.control-item {
display: none;
}
.stickey-footer{
display: block;
}
.user-action {
border: none;
padding: 0;
}
}

@include media-breakpoint-down(is) {
nb-select {
display: none;
}
}
}
.logo img{
height:56px;
}
nb-layout{
width:100%;
}
.control-item{
margin-left: auto;
}
.another-header{
margin-left: auto!important;
}

nb-layout-header{
z-index: 100;
}
nb-layout-header{
box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.05);
background-color:rgb(87, 231, 195);
}
nb-action{
color:#ffffff !important;
}
nb-icon{
color:#ffffff !important;
}
.control-item{
color:#ffffff !important;
}
::ng-deep nb-action nb-icon {
color:#ffffff !important;
}
::ng-deep nb-action{
cursor: pointer;
}
`

[theFallen78]

@kaiwalyag am not sure if the above will work for you just take what you can. my end result was

[kaiwalyag]

@theFallen78 Thanks mate!

[HackPoint]

@theFallen78 can you make a stackblitz with example of this?

It's seems to be that I'm unable to use your css

[ambativamsi]

@theFallen78 pls make an stackblitz..

[theFallen78]

here is the stackblit https://stackblitz.com/edit/nebular-66urxc @ambativamsi @HackPoint
its a little hacky but it works .

am sorry if its not comprehensive. as am not sure about your uses cases
send me your stackblitz so that i can have a look

[arturoml]

I just tried using class "pull-right" and worked perfectly. Here is an example:
<nb-actions size="small" class="pull-right"> <nb-action icon="plus-outline" ></nb-action> <nb-action icon="plus-outline"></nb-action> <nb-action icon="plus-outline"></nb-action> </nb-actions>

[sgClaudia98]

I tried playing whit flex, so, try this simple thing that worked for me:
_first of all sorry for my English, hope you understand_

I din't use nb-actions, just use the .row class from bootstrap, but if you put the
display: flex;
on the container of the elements (this contains the BRAND we want to align left, and ICONS we want to align right)

next I create an <span> element
<span class="flex-expand"></span>
with this Style
.flex-expand { flex: 1 1 auto; }

this span element place were you want the space to be
BRAND
<span class="flex-expand"></span>
ICONS

here is my code:

<nb-layout-header>
<div class="container-fluid">
      <div class="row">
          <a [routerLink]="['/home']" class="brand">My Brand</a>
          <span class="flex-expand"></span> <!--This is the magic-->
          <a (click)="buscar()">
            <nb-icon [icon]="'search-outline'" pack="eva" [attr.aria-label]="'Buscar'">
            </nb-icon>
          </a>
          <a (click)="doSomething()">
            <nb-icon [icon]="'person-outline'" pack="eva" [attr.aria-label]="'Testing'">
            </nb-icon>
          </a>
      </div>
</div>
</nb-layout-header>

Style

.flex-expand {
  flex: 1 1 auto;
}

happyCodding