Navbar brand

  1. MDB Home Page
  2. Support Main Page
  3. MDB Angular
Topic: Navbar brand

szczerbo pro asked 7 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 7 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

szczerbo pro answered 7 years ago

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 7 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
Write
Create snippet
Please insert min. 20 characters.

FREE CONSULTATION

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

Answered

Specification of the issue
  • User: Pro
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No
About author
szczerbo
Pro User
18Support score
8Questions 5Answers
0Snippets likes 0Snippets