Bootstrap 4 Beta Navbar Migration - html

Question

<div id="navarea">
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav custom_nav">
<li class="">Home</li>
<li class="dropdown"> Dropdown
<ul class="dropdown-menu" role="menu">
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
<li>Link 4</li>
</ul>
</li>
<li>Store</li>
<li>Media</li>
<li>Partners</li>
</ul>
</div>
</div>
</nav>
I'm migrating an older website to Bootstrap 4 beta and I've somehow destroyed the navbar in the process. I'm fairly confident it has something to do with the change in "toggle" and "expand" but I've been playing with it for several hours with no success.
The navbar should display at the top of the page, as an average navbar. Instead I have a tiny box in the top left corner that expands the menu.

Answer 1

The bootstrap 3 navbar can't be copied and pasted into bootstrap 4. You'll need to do some work to recreate the menu to your liking.
This is an example menu for bootstrap 4 for reference.
<nav class="navbar navbar-expand-lg navbar-default">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample08" aria-controls="navbarsExample08" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Store</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Media</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Partners</a>
</li>
</ul>
</div>
I'd recommend going to the below URL and checking out the example navbars to understand how they work in Bootstrap 4.
https://getbootstrap.com/docs/4.0/examples/