Navbar brand

Topic: Navbar brand

szczerbo pro asked 6 years ago

Hello, how to move to the left side navbar brand? On higher resolution navbar brand is centered a little, and can't find a way to move it to the left side (class="text-left" do not works). I suppose its something easy, but can't deal with it...:/ Ofcourse I'm using Angular 5 version of mdb:)

Damian Gemza staff commented 6 years ago

Dear Szczerbo, Please try adding [containerInside]="false" to your element. If it's your expected behavior, problem is solved. If not, let me know. Best Regards, Damian

Add comment

szczerbo pro answered 6 years ago

0 0 Best answer

Hello,

still doesn't work - after adding suggested piece of code, whole navbar disappeared.

here You have simple code, of working navbar, but with a little centered logo. I need to stick LOGO to left margin/side of navbar.
<div>
<div><mdb-navbar SideClass="navbar navbar-expand-lg navbar-dark indigo fixed-top scrolling-navbar"></div>
<div>   <logo><a class="navbar-brand mx-4"href="#"mdbRippleRadius>Navbar</a></logo></div>
<div>
<div>
<div></mdb-navbar></div>
</div>
</div>
</div>
<div></div>
<div></div>
<div>What's more, if i use style class for mdb jquery, navbar seems to work properly - example below:</div>
<div></div>
<div>
<div><mdb-navbar class="navbar navbar-expand-lg navbar-dark indigo fixed-top scrolling-navbar"></div>
<div>   <logo><a class="navbar-brand mx-4"href="#"mdbRippleRadius>Navbar</a></logo></div>
<div>
<div>
<div></mdb-navbar></div>
</div>
</div>
</div>
<div></div>
<div></div>
<div>So my additional questions are:</div>
<div>1. what is the difference between "class" and "SideClass"?</div>
<div>2. If we use "class" for styling, elements will work properly or not?</div>
<div>
<div></div>
</div>

Please insert min. 20 characters.

Hello, still doesn't work - after adding suggested piece of code, whole navbar disappeared. here You have simple code, of working navbar, but with a little centered logo. I need to stick LOGO to left margin/side of navbar.

<mdb-navbar SideClass="navbar navbar-expand-lg navbar-dark indigo fixed-top scrolling-navbar">

<logo><a class="navbar-brand mx-4"href="#"mdbRippleRadius>Navbar</a></logo>

</mdb-navbar>

What's more, if i use style class for mdb jquery, navbar seems to work properly - example below:

<mdb-navbar class="navbar navbar-expand-lg navbar-dark indigo fixed-top scrolling-navbar">

<logo><a class="navbar-brand mx-4"href="#"mdbRippleRadius>Navbar</a></logo>

</mdb-navbar>

So my additional questions are:

1. what is the difference between "class" and "SideClass"?

2. If we use "class" for styling, elements will work properly or not?

Damian Gemza staff commented 6 years ago

This code won't work to you? For me works perfectly. <mdb-navbar class="navbar navbar-dark indigo" [containerInside]="false"> <logo> <a class="navbar-brand" href="#"> <img src="<a href="https://mdbootstrap.com/img/logo/mdb-transparent.png&quot" rel="nofollow">https://mdbootstrap.com/img/logo/mdb-transparent.png&quot</a>; height="30" alt=""> </a> </logo> </mdb-navbar> 1st question: SideClass is only a container for other classes. It works like class. 2nd question: It won't work, because navbar markup for Angular needs SideClass. If my code won't work to you, please try to use this ready-to-use navbars: <a href="<a href="https://mdbootstrap.com/angular/layout/navigation/&quot" rel="nofollow">https://mdbootstrap.com/angular/layout/navigation/&quot</a>; rel="nofollow"><a href="https://mdbootstrap.com/angular/layout/navigation/</a&gt" rel="nofollow">https://mdbootstrap.com/angular/layout/navigation/</a&gt</a>; Let me know how the problem looks like. Best Regards, Damian

This code won't work to you? For me works perfectly.

<mdb-navbar class="navbar navbar-dark indigo" [containerInside]="false">
  <logo>
      <a class="navbar-brand" href="#">
          <img src="<a href="https://mdbootstrap.com/img/logo/mdb-transparent.png&quot" rel="nofollow">https://mdbootstrap.com/img/logo/mdb-transparent.png&quot</a>; height="30" alt="">
      </a>
  </logo>
</mdb-navbar>

1st question: SideClass is only a container for other classes. It works like class.
2nd question: It won't work, because navbar markup for Angular needs SideClass.

If my code won't work to you, please try to use this ready-to-use navbars: <a href="<a href="https://mdbootstrap.com/angular/layout/navigation/&quot" rel="nofollow">https://mdbootstrap.com/angular/layout/navigation/&quot</a>; rel="nofollow"><a href="https://mdbootstrap.com/angular/layout/navigation/</a&gt" rel="nofollow">https://mdbootstrap.com/angular/layout/navigation/</a&gt</a>;
Let me know how the problem looks like.
Best Regards,
Damian

Please insert min. 15 characters.

Add comment

Write

Create snippet

FREE CONSULTATION

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

Status

Answered

Specification of the issue

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

szczerbo

Pro User 18Support score
8Questions 5Answers 0Snippets