I am currently working on developing a website using Angular6, where I aim to have a vertical navbar for large screens and a top navbar with dropdown functionality for mobile devices. While searching online, I came across several examples that seemed overly complex or did not use the desired nav template.
The sample project in ASP.Net Core with Angular has a navbar layout that aligns with my requirements, but it is based on Bootstrap 3. Despite attempting to convert it to Bootstrap 4 without success, I am now seeking assistance in achieving this transition.
In case you have dotnet core installed, running dotnet new angular -o my-new-app can help generate the project template.
HTML
<div class='main-nav'>
<div class='navbar navbar-inverse'>
<div class='navbar-header'>
...
</div>
CSS
li .glyphicon {
margin-right: 10px;
}
...
}
Below is my attempt at converting it using Bootstrap 4 documentation as reference:
<div class="main-nav">
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
...
</nav>
</div>
https://i.sstatic.net/5Z7pg.png
However, I encountered an issue wherein both the title and the navigation content are displayed on the same line instead of separate lines. Can you suggest how I can rectify this?
(As I am focusing on making the desktop view function correctly initially, I have not yet delved into testing the mobile view)