Working on a .Net 6 Web App for a client and have a problem with the dropdown code that I have actually copied partially from Bootstrap web page. I have copied the entire code from bootstrap web page without any modification and it does not work. It behaves like a normal link-item even though it has all characteristics of a dropdown menu. I have also tried to move the nav bar to the top, but it uses a 150 px margin from the top and I cannot find any css code for this behavior. Any hints will be very much appreciated.
<header >
<nav class="navbar navbar-expand-lg navbar-light border-bottom">
<div id="navigation" class="container-fluid">
<a class="navbar-brand" asp-area="" asp-page="/Index"><img id="logo" src="/img/logo.png" height="102" width="95"/></a>
<button
class="navbar-toggler"
type="button"
data-mdb-toggle="collapse"
data-mdb-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent"
aria-expanded="false"
aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<a
class="nav-link dropdown-toggle"
href="#"
id="navbarDropdown"
role="button"
data-mdb-toggle="dropdown"
aria-expanded="false"
>
Company Name
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="#"><span style="color:white; font-family:Montserrat;">Pictures</span></a></li>
<li><a class="dropdown-item" href="#"><span style="color:white; font-family:Montserrat;">Videos</span></a></li>
<li><a class="dropdown-item" asp-area="" asp-page="/Privacy"><span style="color:white; font-family:Montserrat;">Privacy</span></a></li>
</ul>
</div>
</div>
</nav>
I copied the entire nav bar code from bootstrap and it still does not work.
Related
In Bootstrap 4 within the toggler hamburger menu is active clicking it will show HomeAbout on the one line, not sure why these aren't on separate lines.
Code:
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
Example
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav flex-row ml-md-auto d-md-flex">
<li class="nav-item">
Home
</li>
<li class="nav-item dropdown">
About
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Feedback</a>
</div>
</li>
</ul>
</div>
</nav>
Fiddle: https://jsfiddle.net/StoogeMate/qts6gamk/
There's no obvious answer I've been able to find through using Bootstrap itself particularly for the first problem without overriding the .css itself and applying !important tags
Does Bootstrap have this capability?
By default, a dropdown menu is automatically positioned 100% from the top and along the left side of its parent. Add .dropdown-menu-right to a .dropdown-menu to right align the dropdown menu.
https://getbootstrap.com/docs/4.0/components/dropdowns/#menu-alignment
Remove dropdown from the About menu item
Wrap the About menu item in a div.btn-group
Use dropdown-menu-right on div.dropdown-menu
<li class="nav-item">
<div class="btn-group">
About
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Feedback</a>
</div>
</div>
</li>
🎁
Remove flex-row to show the menu items on two lines.
<ul class="navbar-nav ml-md-auto d-md-flex">
----
</ul>
I am new to Bootstrap. Using latest version 4.5.0, I want to create a multilevel menu, with three levels. There are various instances of these in Bootstrap 4.4.1 however the model for navbar and dropdowns has changed in 4.5.0.
There is an explanation of Navbar in the official documentation and this demonstrates a two level menu. I can't seem to find an example of how to extend this to three levels or understand how this can be constructed. I tried the following which is a simple extension of the two levels to three but it doesn't work. It fails when clicking on the link to the third level labelled 2 Dropdown link.
The original navbar documentation uses a click based approach to viewing the menu. It would also be advantageous to see how a 4.5.0 menu can be made to work on hover.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown link
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="#">2 Action</a>
<a class="dropdown-item" href="#">2 Another action</a>
<div class="dropdown-item">
<a class="dropdown-toggle" href="#" id="navbarDropdownMenuLink3" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
2 Dropdown link
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink3">
<a class="dropdown-item" href="#">3 Action</a>
</div>
</div>
</div>
</li>
</ul>
</div>
</nav>
</div>
Any suggestions as to correct code, enabling documentation or functioning examples welcome.
Ok! I am not using Primefaces/Omnifaces or Bootfaces, the requirement is to do it using Bootstrap only.
What I am trying to achieve is creating nested menu dynamically, I have been able to achieve only one level Menu.
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">LAS</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<ui:repeat value="#{menuViewModel.parentMenu}" var="parentMenuItem">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
#{parentMenuItem.menuLabel}
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<ui:repeat value="#{menuViewModel.generateChildMenu(parentMenuItem.menuName)}" var="childMenuItem">
<a class="dropdown-item" href="#">#{childMenuItem.menuLabel}</a>
</ui:repeat>
</div>
</li>
</ui:repeat>
</ul>
<button class="btn btn-outline-success my-2 my-sm-0 dropdown">
<span class="glyphicon glyphicon-user"></span> User
</button>
</div>
</nav>
Now, as there may be many number of children (though we have only 3 level of nested menu items yet) the problem starts. How I have to change my xhtml to generate nested menus.
The attached image shows first level of Menu.
As you can see, the menu item Host Configuration has another sub items but I am not able to understand how I can show it on my view.
Do I have to use recursive logic or something or there is a need to write some EL?
Thanks
I am having issues aligning a dropdown menu on the navbar-brand portion of the Bootstrap 4 Navbar. For some reason it is aligning to the top left of the page.
I have tried the following code below and am not sure how to go from there.
<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
<div class="container">
<a class="navbar-brand dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
WebsiteName
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="/>WebsiteName</a>
<div class="dropdown-divider"></div>
<h6 class="dropdown-header">Popular Subdomains</h6>
<a class="dropdown-item" href="/">Subdomain 2</a><a class="dropdown-item" href="/">Subdomain 3</a> <div class="dropdown-divider"></div>
<a class="dropdown-item" href="/">All Subdomains</a>
</div>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarColor01" aria-controls="navbarColor01" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarColor01">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href="/">Home Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/two-link/">Two Link</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0" action="/search">
<input class="form-control mr-sm-2" type="text" name="q" placeholder="Search">
</form>
</div>
</div>
</nav>
just curiosity , are you tring to make your brand is dropdown cause its a big mistake try to read this docs to see how its work
https://getbootstrap.com/docs/4.2/components/navbar/
you can also position your navbar by using float or flex alignment as you wish
I am using ng-sidebar to animate and implement the collapsable sidebar on smaller mobile screens.
This is my first time using Angular so I apologize if the question is simple for everyone else.
I have installed using npm install ng-sidebar and tried the working demo, but I have difficulty adjusting it to my needs.
In my app.component.html I have this code taken from the demo :
<ng-sidebar-container>
<ng-sidebar
[(opened)]="_opened"
[mode]="_MODES[_modeNum]"
[closeOnClickOutside]="_closeOnClickOutside"
[closeOnClickBackdrop]="_closeOnClickBackdrop"
[showBackdrop]="_showBackdrop"
[animate]="_animate">
<button (click)="_toggleOpened()">Close sidebar</button>
<p><a closeSidebar>This will close the sidebar too</a></p>
<hr>
<ul class="nav nav-pills flex-column">
<li class="nav-item collapsed side" data-toggle="collapse" data-target="#home">
<a class="nav-link" routerLinkActive="active" routerLink="/home" [routerLinkActiveOptions]="{exact: true}">Home</a>
</li>
<ul class="sub-menu collapse" id="home">
<li class="nav-item list-unstyled"> <a class="nav-link" routerLinkActive="active" routerLink="/home/submenu">Submenu</a>
</li>
<li class="nav-item list-unstyled">
<a class="nav-link" routerLinkActive="active" routerLink="/home/submenu2">Submenu2</a>
</li>
<li class="nav-item side">
<a class="nav-link" routerLinkActive="active" routerLink="/secondMenu"MenuItem>/a>
</li>
</ul>
</ng-sidebar>
<div ng-sidebar-content>
<header class="demo-header">
<button class="navbar-toggler " type="button" (click)="_toggleOpened()" data-toggle="collapse" data-target="#sidebar" aria-controls="navbarsExampleDefault"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
<span>ng-sidebar</span>
</header>
<section class="demo-contents">
<router-outlet></router-outlet>
</section>
</div>
What I do not understand is, how to put a :
<button class="navbar-toggler " type="button" data-toggle="collapse" data-target="#sidebar" aria-controls="navbarsExampleDefault"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
That when clicked, called
_toggleOpened() and [mode]="_MODES[_modeNum]"
mode should be push
Example link
And have it on the top bar as in the example. Because no css style is applied on my document when trying the demo.
How do I make that button and sidebar to only push the content as in the link when clicking mode-push, and also add transparent background ?
So the button should push the content, add background and when clicking anywhere outside on the screen to be closed. ?
I'm very sorry again, I just need a simple layout to help me get started :| To understand it
Thank you in advance!