Hi -- I am using bootstrap to create a basic navbar on my share NavMenu.razor page but the navbar only expands as far as the links and does not expand across the page -- code:
<div class="container">
<nav class="navbar bg-dark navbar-dark navbar-expand-sm">
<div class="container">
<div class="navbar-nav">
<a class="nav-item nav-link" href="#">Schedule</a>
<a class="nav-item nav-link" href="#">Other Stuff</a>
</div>
</div>
</nav>
</div>This is being linked from the MainLayout.razor page -- code:
@inherits LayoutComponentBase
<div>
<NavMenu />
</div>
<div class="content px-4">
@Body
</div>I am wondering why the navbar code is behaving differently than it would from another IDE -- such as sublime...
The outer div has the "container" class in it, which is a Bootstrap class, so that's going to limit the width of the outer div. If you remove that outer div, your navbar will stretch across the screen. You can learn more about Bootstrap at https://getbootstrap.com/docs/4.5/getting-started/introduction
Thanks for the reply -- However a am learning that in Blazor, the <div> tap in MainLayout.razor determines how the <div> behaves in NavMenu.razor... I am learning how this works now...If i adjust the
<div>
<NavMenu />
</div>code to :
<div class="Container-fluid">
<NavMenu />
</div>This affects the page design much differently
You can learn more about the Bootstrap navbar styling specifically at https://getbootstrap.com/docs/4.5/components/navbar/
Thanks -- I do have a decent understanding of Bootstrap and the navbar -- but in this case the I need to understand how the MainLayout.razor page effects the NavMenu.razor page. If I take the code contained in the NavMenu.razor page, it works as planned as stand alone code. However, the <div> tag referencing it from the MainLayout.razor page changes the appearance of the code in NavMenu.razor page.
Actually if you look at the template for the MainLayout.razor page in Visual Studio when you create a blazor webassembly template, they create custom css for their class "sidebar" -- I am wondering why they needed to create a custom class for this and could not do what they needed to do within bootstrap using navbar techniques...
@NavMenuCssClass is there so the classes can be added/removed based on certain conditions. The idea is to accomplish the menu dropdown with Blazor instead of JavaScript. So, when you click the toggler button, it fires the ToggleNavMenu method. That changes the collapseNavMenu property value to false, then NavMenuCssClass changes from "collapse" to null (so it's no longer collapsed).