Bootstrap logo over fixed navbar - html

Question

I am trying to push the navbar line (and obviously the content as well) down according to logo height. Here is my HTML code:
<div class="navbar navbar-default navbar-fixed-top custom-header" role="navigation">
<div class="container">
<div class="navbar-header transparent">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<a class="navbar-brand" href="#"><img src="images/logoSmall.png" alt="Page Logo"> Brand Title</a>
<div class="row">
<div class="col-lg-12 custom-navbar-line">
<div class="collapse navbar-collapse">
<ul class="nav nav-pills custom-nav-pills">
<li class="active"><a ng-href="#">Home</a></li>
<li><a ng-href="#">Page1</a></li>
<li><a ng-href="#">Page2</a></li>
<li><a ng-href="#">Page3</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
What I want:
What I get:
Note: Custom css classes have not much to do with the positioning.

Answer 1

You may try something like this:
HTML:
<a class="navbar-brand" href="#"><img src="http://placehold.it/50" alt="Page Logo"> Brand Title</a>
CSS:
a.navbar-brand { /*or add another class instead of changing this*/
display:block;
margin:50px 0 10px 0; /* Adjust the margin : top right bottom left */
}
Just keep some margins on top and bottom of that <a> tag. Don't depend on other elements for margin of that <a> tag, instead apply cssrule on itself for it's margin.
Or just put in inside another .row:
<div class='row'>
<a class="navbar-brand" href="#"><img src="images/logoSmall.png" alt="Page Logo"> Brand Title</a>
</div>

Answer 2

Close your the <div class="container"> and open a new container with a margin top around the second row of the nav bar.
Bootply example
Updated HTML:
<div class="navbar navbar-default navbar-fixed-top custom-header" role="navigation">
<div class="container">
<div class="navbar-header transparent">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<a class="navbar-brand" href="#"><img src="http://placehold.it/50" alt="Page Logo"> Brand Title</a>
</div>
<div class="container new-nav-line">
<div class="row">
<div class="col-lg-12 custom-navbar-line">
<div class="collapse navbar-collapse">
<ul class="nav nav-pills custom-nav-pills">
<li class="active"><a ng-href="#">Home</a></li>
<li><a ng-href="#">Page1</a></li>
<li><a ng-href="#">Page2</a></li>
<li><a ng-href="#">Page3</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
CSS:
.new-nav-line{
margin-top:20px;
}