Hi im trying to make a navbar with 3 link in container class.I tried justify content between on navbar but it doesnt work justify content center works but between class doesnt work on navbar links displays like block.
<nav class="navbar navbar-expand-lg navbar-dark bg-dark d-flex ">
<div class="container justify-content-between ">
<ul class="navbar-nav">
<li class="nav-item">
About
</li>
<li class="nav-item">
Contact
</li>
<li class="nav-item">
About
</li>
</ul>
</div>
</nav>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container">
<ul class="navbar-nav d-flex flex-row align-items-center justify-content-between w-100">
<li class="nav-item">
About
</li>
<li class="nav-item">
Contact
</li>
<li class="nav-item">
About
</li>
</ul>
</div>
</nav>
You can try this.
that is because you are using flex on different element and justify-content in different element,
my suggestion is to use this
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container d-flex justify-content-between ">
<ul class="navbar-nav">
<li class="nav-item">
About
</li>
<li class="nav-item">
Contact
</li>
<li class="nav-item">
About
</li>
</ul>
</div>
</nav>
also as a bonus suggestion use header instead of nav and replace the first div with nav for SEO purpose by using right semantic elements
Related
I am trying everything in the Tailwind docs, but I can't seem to change how wide my first li element is.
<section class="overflow-hidden">
<ul class="bg-gray-200 flex flex-row items-center overflow-scroll w-full">
<li class="bg-white px-4 text-left w-96">Why won't this thing change width?</li>
<li class="px-4">Google</li>
<li class="px-4">Microsoft</li>
<li class="px-4">Netflix</li>
<li class="px-4">Facebook</li>
<li class="px-4">Marvel</li>
<li class="px-4">Disney</li>
</ul>
</section>
I have tried adding these tags to the first li element in the list
w-full
w-screen
w-96
basis-1/2
basis-full
basis-80
Elements inside a flex div will try to fit in the available space. It's a natural behavior and that's why your div is not able to grow.
To change this behavior, you'll need to add a flex-shrink: 0, or, in a tailwind way, add a shrink-0 class.
Here is an example:
<section class="overflow-hidden">
<ul class="bg-gray-200 flex flex-row items-center overflow-scroll w-full">
<li class="bg-white px-4 text-left w-96 shrink-0">Why won't this thing change width?</li>
<li class="px-4">Google</li>
<li class="px-4">Microsoft</li>
<li class="px-4">Netflix</li>
<li class="px-4">Facebook</li>
<li class="px-4">Marvel</li>
<li class="px-4">Disney</li>
</ul>
</section>
how do I have to configure the "Wayfinder" in MODx to get a Bootstrap 5 output. specifically for the "Dropdown Submenue".
<div class="collapse navbar-collapse" id="navbarCollapse">
<ul class="navbar-nav me-auto mb-2 mb-md-0">
<li class="nav-item active">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" role="button" data-bs-toggle="dropdown" aria-expanded="false" href="#">Project</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link" href="#">How-To</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</div>
I think it has to be the innerTpl and the innerRowTpl. The normal (level 1 menu) works. Just not the submenu.
How do I have to configure that?
The Wayfinder call:
[[Wayfinder? &startId=`0` &level=`2` &outerClass=`navbar-nav me-auto mb-2 mb-md-0` &rowTpl=`tpl_navigation-menu` &rowClass=`nav-item` &innerTpl=`innerTpl` &innerRowTpl=`innerRowTpl`]]
&rowTpl:
<li[[+wf.id]][[+wf.classes]]><a href="[[+wf.link]]" class="nav-link" title="[[+wf.title]]" [[+wf.attributes]]>[[+wf.linktext]]</a>[[+wf.wrapper]]</li>
&innerTpl and innerRowTpl is still blank.
Did someone have an Idea?
Wayfinder often confusing here unfortunately, please take a look at snippet documentation diagram, it will help you to understand which chunks are used to form menu child elements.
OK,
here is the final solution. (For those who struggels with the Wayfinder-Stuff as me)
[[Wayfinder?
&startId=`0`
&level=`2`
&outerClass=`navbar-nav me-auto mb-2 mb-md-0`
&innerClass=`dropdown-menu`
&rowTpl=`tpl_row`
&parentRowTpl=`tpl_parentrow`
&innerRowTpl=`tpl_innerrow`
]]
Chunk for tpl_row:
<li class="nav-item [[+wf.classnames]]">
<a class="nav-link" href="[[+wf.link]]">[[+wf.linktext]]</a>
[[+wf.wrapper]]
</li>
Chunk for tpl_parentrow:
<li class="nav-item dropdown [[+wf.classnames]]">
<a class="nav-link dropdown-toggle" role="button" data-bs-toggle="dropdown" aria-expanded="false" href="[[+wf.link]]">[[+wf.linktext]]</a>
[[+wf.wrapper]]
</li>
Chunk for tpl_innerrow:
<li class="[[+wf.classnames]]">
<a class="dropdown-item" href="[[+wf.link]]">[[+wf.linktext]]</a>
[[+wf.wrapper]]
</li>
I have created a layout page which has a top menu and a side navbar. My problem is when I've created a new razor view (content page). It seems to be centering from the whole page not taking into account the sidebar. Also my div container in my content page does not user all the screen. Am I missing something. I thought if I create my layout page with a side bar the content page would use the remaining page.
Thanks for any help,
Layout Code:-
<body>
<nav id="menuBar" class="navbar navbar-expand-sm">
<a class="navbar-brand" href="#" style="color:white;">Building ********</a>
<button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="collapsibleNavbar">
<ul class="navbar-nav">
#if (signInManager.IsSignedIn(User) && User.IsInRole("Admin"))
{
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink"
data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Manage
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" asp-controller="Administration"
asp-action="ListUsers">Users</a>
<a class="dropdown-item" asp-controller="Administration"
asp-action="ListRoles">Roles</a>
</div>
</li>
}
</ul>
<ul class="navbar-nav ml-auto">
#if (signInManager.IsSignedIn(User))
{
<li class="nav-item">
<form method="post" asp-controller="account" asp-action="logout">
<button type="submit" class="nav-link btn btn-link py-0" style="width:auto;">
Logout #User.Identity.Name
</button>
</form>
</li>
}
else
{
#if (signInManager.IsSignedIn(User) && User.IsInRole("Admin"))
{
<li class="nav-item">
<a asp-controller="account" asp-action="register" class="nav-link">Register</a>
</li>
}
<li class="nav-item">
<a asp-controller="account" asp-action="login" class="nav-link">Login</a>
</li>
}
</ul>
</div>
</nav>
#*Sidebar*#
<div id="sidebar-wrapper">
</div>
<div class="container mt-3 mb-3">
#RenderBody()
</div>
#RenderSection("Styles", required: false)
#RenderSection("scripts", required: false)
</body>
I've added an image of the layout I am trying to achieve.
You can try this code below:
<div class="row">
<div class="col-md-3">
<nav id="menuBar" class="navbar navbar-expand-sm">
<a class="navbar-brand" href="#" style="color:white;">Building ********</a>
<button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="collapsibleNavbar">
<ul class="nav nav-pills flex-column">
#if (signInManager.IsSignedIn(User) && User.IsInRole("Admin"))
{
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink"
data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Manage
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" asp-controller="Administration"
asp-action="ListUsers">Users</a>
<a class="dropdown-item" asp-controller="Administration"
asp-action="ListRoles">Roles</a>
</div>
</li>
}
#if (signInManager.IsSignedIn(User))
{
<li class="nav-item">
<form method="post" asp-controller="account" asp-action="logout">
<button type="submit" class="nav-link btn btn-link py-0" style="width:auto;">
Logout #User.Identity.Name
</button>
</form>
</li>
}
else
{
#if (signInManager.IsSignedIn(User) && User.IsInRole("Admin"))
{
<li class="nav-item">
<a asp-controller="account" asp-action="register" class="nav-link">Register</a>
</li>
}
<li class="nav-item">
<a asp-controller="account" asp-action="login" class="nav-link">Login</a>
</li>
}
</ul>
</div>
</nav>
</div>
<div class="col-md-9">
#RenderBody()
</div>
</div>
Result:
I can't figure out how I have to configure Wayfinder (or pdoMenue) to get this output:
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="index.html">
<p>Home</p>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="articles.html">
<p>Articles</p>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="about.html">
<p>About</p>
</a>
</li>
</ul>
Can anybody help me out?
Edit: I have a dropdown too:
<li class="nav-item dropdown">
<a href="index.html#" class="nav-link dropdown-toggle" id="navbarDropdownMenuLink" data-toggle="dropdown">
<i class="now-ui-icons files_paper" aria-hidden="true"></i>
<p>Sections</p>
</a>
<div class="dropdown-menu dropdown-menu-right" aria- labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="sections.html#headers">
<i class="now-ui-icons shopping_box"></i>
Headers
</a>
<a class="dropdown-item" href="sections.html#features">
<i class="now-ui-icons ui-2_settings-90"></i>
Features
</a>
</div>
</li>
It is the free Template Now UI-Kit, and based on bootstrap 4.
[[pdoMenu?
&parents=`0`
&level=`1`
&tplOuter=`#INLINE <ul[[+classes]]>[[+wrapper]]</ul>`
&tpl=`#INLINE <li[[+classes]]><a class="nav-link" href="[[+link]]" [[+attributes]]><p>[[+menutitle]]</p></a>[[+wrapper]]</li>`
&outerClass=`navbar-nav ml-auto`
&rowClass=`nav-link`
]]
Something like this in pdoMenu. Untested, you may have to play around with how the classes get assigned. If you need first and last classes, or a you-are-here class, those are available too and well-documented. https://docs.modx.pro/en/components/pdotools/snippets/pdomenu
I'm trying to place the icon before the text in the navigation button. However, it always appears above.
Also, the icon must be aligned vertically with the text.
This must be really easy to correct but can not figure it out.
Any feedback is highly appreciated.
What should look like:
What happens:
.nav-link {
display: inline-block;
}
<ul class="navbar-nav mx-auto w-100">
<li class="nav-item">
<a class="nav-link" routerLink="/backoffice/jobs" routerLinkActive="active">
<img src="/assets/icons/B_Hammer_Gray.svg" class="iconos " alt="hammer">
<h4>Test 1</h4>
</a>
</li>
<li class="nav-item">
<a class="nav-link" routerLink="/backoffice/contractors" routerLinkActive="active" style="display:block">
<img src="/assets/icons/B_Toolbox_Gray.svg" class="iconos" alt="toolbox">
<h4>Test 2</h4>
</a>
</li>
<li class="nav-item">
<a class="nav-link" routerLink="/backoffice/jobs" routerLinkActive="active">
<img src="/assets/icons/B_Hammer_Gray.svg" class="iconos " alt="hammer">
<h4>Test 3</h4>
</a>
</li>
</ul>
You need to add class="d-inline" to your h4 elements like so:
<ul class="navbar-nav mx-auto w-100">
<li class="nav-item">
<a class="nav-link" routerLink="/backoffice/jobs" routerLinkActive="active">
<img src="/assets/icons/B_Hammer_Gray.svg" class="iconos " alt="hammer">
<h4 class="d-inline">Test 1</h4>
</a>
</li>
<li class="nav-item">
<a class="nav-link" routerLink="/backoffice/contractors" routerLinkActive="active" style="display:block">
<img src="/assets/icons/B_Toolbox_Gray.svg" class="iconos" alt="toolbox">
<h4 class="d-inline">Test 2</h4>
</a>
</li>
<li class="nav-item">
<a class="nav-link" routerLink="/backoffice/jobs" routerLinkActive="active">
<img src="/assets/icons/B_Hammer_Gray.svg" class="iconos " alt="hammer">
<h4 class="d-inline">Test 3</h4>
</a>
</li>
</ul>
h4s (and h1s etc.) are normally block level elements that's why they wrap.