So I am a beginner in angular and I have to simply make a navbar.I have my bootstrap loaded in the .json file and it looks like this:-
"styles": [
"./node_modules/bootstrap/dist/css/bootstrap.min.css",
"src/styles.css"
],
whereas my code looks like this:-
<ul class=" nav navbar-nav navbar-right">
<ul class="dropdown-menu">
<li >
<a class="nav-link" href="#">Save Data</a>
</li>
<li >
<a class="nav-link" href="#">Fetch Data</a>
</li>
</ul>
</ul>
</div>
</div>
</nav>
`
Output is :-
my save data and fetch data are not appearing on right.what is the reason?
Just replace "navbar-right" with "ml-auto".
But still things are wrong with your code apart from "navbar-right".
It should be -
<ul class="navbar-nav ml-auto">
<li >
<a class="nav-link" href="#">Save Data</a>
</li>
<li >
<a class="nav-link" href="#">Fetch Data</a>
</li>
</ul>
I am familiar with the tutorial you are working with, so I guess you are creating a dropdown menu, this should be the complete code for it-
<ul class = "navbar-nav ml-auto">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown">
Manage
</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Save Data</a>
<a class="dropdown-item" href="#">Fetch Data</a>
</div>
</li>
</ul>
These existing questions might help -
Bootstrap NavBar with left, center or right aligned items
ml-auto is not pushing navbar links to the right
Related
I am using following HTML to create a three level inline list. First Level shows by default on page load. When I click on first level menu i.e. 'Courses' it expands and shows second level menus. But when I click on second level menus i.e. 'Computer Courses' or 'Civil Courses', they do not expand to show third level menus.
Thanks in advance for any help.
<ul class="nav navbar-nav">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-
haspopup="true" aria-expanded="false">Courses <span class="caret"></span></a>
<ul class="dropdown-menu">
<li class="dropdown-submenu">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-
haspopup="true" aria-expanded="false" >Computer Courses<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li class="dropdown-submenu"><a href="#"><i class=" glyphicon glyphicon-menu-
right"></i>IT Advance</a>
</li>
<li class="dropdown-submenu"><a href="#"><i class=" glyphicon glyphicon-menu-
right"></i>Web Designing</a>
</li>
</ul>
</li>
<li class="dropdown-submenu">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-
haspopup="true" aria-expanded="false">Civil Courses<span class="caret"></span></a>
<ul class="dropdown-menu">
<li class="dropdown-submenu"><a href="#"><i class=" glyphicon glyphicon-menu-
right"></i>Civil Survey</a>
</li>
<li class="dropdown-submenu"><a href="#"><i class=" glyphicon glyphicon-menu-
right"></i>Quantity Survey</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
I'm not sure how twitter-bootstrap works exactly, but I can imagine having multiple <a> tags with href="#"s messes this up. Moreover, your html is not valid (you can have <ul> as a child of another <ul>) and perhaps wrapping a <ul> within an <a> is also not good practise.
Use javascript onclick functions for the expand behaviour, or dive a little deeper into twitter-bootstrap, in case they do support something like this.
P.S. Consult https://validator.w3.org/nu/#textarea to see what html is valid.
I have to customize sidebar that is provided by COREUI 4.x theme. Below is the code for my sidebar
<div class="app-body">
<div class="sidebar">
<nav class="sidebar-nav">
<ul class="nav">
<li class="nav-item">
<a
class="nav-link"
routerLink="/dashboard"
[routerLinkActive]="['active']"
[routerLinkActiveOptions]="{ exact: true }"
>
<i class="icon-speedometer"></i> Dashboard
</a>
</li>
<li class="nav-item">
<a
class="nav-link"
href="#"
routerLink="/alerts-configuration"
[routerLinkActive]="['active']"
[routerLinkActiveOptions]="{ exact: true }"
>
<i class="icon-layers"></i> Alert Configuration
</a>
</li>
<li
class="nav-item nav-dropdown"
dropdown
[routerLinkActive]="['active']"
[routerLinkActiveOptions]="{ exact: true }"
>
<a class="nav-link nav-dropdown-toggle">
<i class="icon-puzzle"></i>Administration
</a>
<ul class="nav-dropdown-items">
<li class="nav-item">
<a
class="nav-link"
routerLink="/device-management/devices"
[routerLinkActive]="['active']"
[routerLinkActiveOptions]="{ exact: true }"
>
<i class=""></i>Devices Management
</a>
</li>
<li class="nav-item">
<a
class="nav-link"
routerLink="/sites"
[routerLinkActive]="['active']"
[routerLinkActiveOptions]="{ exact: true }"
>
<i class="icon-settings"></i>Sites Management
</a>
</li>
</ul>
</li>
</ul>
</nav>
<button class="sidebar-minimizer brand-minimizer" type="button"></button>
</div>
</div>
Now when I try to click on Administration, it wont open the dropdown and also when I try to minimize from the arrow on the bottom, this wont work as well. Please help!
I was having this issue also. I figured out that if the JavaScript files that control sidebar animation are added before the page is generated the sidebar doesn't work.
The solution:
Add the CORE UI JavaScript files at the end.
Looks a little like this:
<html>
<body>
{the entire html page}
<script src="https://coreui.io/demo/free/3.4.0/js/main.js" async defer></script>
</body>
</html>
"async defer" may or may not be necessary.
With coreui 4.x and BS 5 you should add data-coreui="navigation" to the sidebar-nav element and it will start working correctly.
Please find below my code that is working.
<li class="nav-item nav-dropdown " [appIsAuthorized]="roleconst.ProductAdminAbove" (click)="status=!status"
[ngClass]="status ? 'open' : ''">
<a class="nav-link nav-dropdown-toggle ">
<i class="nav-icon icon-puzzle"></i> Management
</a>
I'm working on a page in a Node Web app with a subnav that looks like this:
Here's the vanilla HTML for it:
<div class="col-md-8">
<ul class="nav nav-tabs">
<li class="nav-item">
<a class="nav-link active" href="#">Overview</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Comments</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
</div>
Is there a way for me to create live links (e.g. Comments) on those tabs without having to render a whole separate route and EJS template? To me, a process like that would be more efficient and DRY than creating separate templates for each link in the subnav.
Any help would be greatly appreciated. Thanks!
I have tried the following code,
<ul class="nav nav-tabs">
<li class="nav-item" id="web1Tab"><a class="nav-link active" data-toggle="tab" id="w1" href="link_to_website_1">Website1</a></li>
<li class="nav-item" id="web2Tab"><a class="nav-link" data-toggle="tab" id="w2" href="link_to_website_2">Website2</a></li>
</ul>
It did look just like as I expected, however href doesn't work. On the other hand, if I remove the data-toggle="tab" part then href's work properly but active tab doesn't change. I guess that, href in this case only supports inner linking? I am not sure. The code looks very simple but I was unable solve it.
Can you try surrounding your entire list item with a href?
<ul class="nav nav-tabs">
<a style="display:block" href="your_url1_here">
<li class="nav-item" id="web1Tab">Website1</li>
</a>
<a style="display:block" href="your_url2_here">
<li class="nav-item" id="web2Tab">Website2</li>
</a>
</ul>
I have a dropdown menu inside bootstrap nav tabs. But a particular dropdown item only hovers for a limited width.
the code snippet :
<ul class="page-title__nav common-list nav nav-tabs">
<li class="dropdown">
Inventory<b class="caret"></b>
<ul class="dropdown-menu">
<li style="margin-left: 15px;"><a data-toggle="tab" onclick="loadCategories()">Categories</a></li><br>
<li><a data-toggle="tab" onclick="loadItems()">Items</a></li><br>
<li><a data-toggle="tab" onclick="loadModifierGroups()">Modifier Groups</a></li><br>
</ul>
</li>
</ul>
The view :
Have you tried to remove style="margin-left: 15px;" from you first element
ok try this
<ul class="page-title__nav common-list nav nav-tabs">
<li class="dropdown">
Inventory<b class="caret"></b>
<div class="dropdown-menu">
<a data-toggle="tab" onclick="loadCategories()">Categories</a>
<a data-toggle="tab" onclick="loadItems()">Items</a>
<a data-toggle="tab" onclick="loadModifierGroups()">Modifier Groups</a>
</div>
</li>
</ul>