My goal is to design a user interface using Angular on the front end. I have a directive called navbar. Despite using ngRoute, I incorporated this directive in my partial for /home. Everything seems to be functioning properly, but the navbar doesn't align with the top of the page; instead, there's a small pane below from which it starts. What I envision is a navbar layout similar to that of Stack Overflow.
This snippet shows part of my code within index.html
<body>
<ng-view></ng-view>
</body>
I attempted placing ng-view inside a div, yet the issue persists.
In home.html
<nav-bar></nav-bar>
<div class="container">
<div class="row-fluid">
<div class="col-md-12">
<div class="well well-sm">{{flashMessage}}</div>
</div>
</div>
<div class="row-fluid">
...
</div>
</div>
As for navbar.html (which serves as the templateUrl for navBar directive)
<nav class="navbar navbar-default navbar-inverse">
<div class="container-fluid">
...
</div>
</nav>
Additionally, I utilized Twitter bootstrap and a CSS file named signin.css, sourced from an official Bootstrap example - css
The undesired pane at the top needs to be eliminated in favor of a Stack Overflow-like navbar appearance.
To validate my concept, I inserted the navbar directly into the main index.html where it behaved as intended. The extraneous pane only emerges when I utilize it as a directive. I trust this clarifies my query.