Fit all nav items in nav with equal width and no wrap - html

I am trying to make a nav menu with 15 elements. The elements must have equal width (which I achieved using nav-justified but when I resize the window, the menu keeps shrinking (expected behavior) until one point it stops and goes out of the screen.
Code (jsFiddle):
<ul class="nav nav-justified flex-nowrap">
<li class="nav-item"><a class="nav-link">Item 1</a></li>
<li class="nav-item"><a class="nav-link">Item 2</a></li>
<li class="nav-item"><a class="nav-link">Item 3</a></li>
<li class="nav-item"><a class="nav-link">Item 4</a></li>
<li class="nav-item"><a class="nav-link">Item 5</a></li>
<li class="nav-item"><a class="nav-link">Item 6</a></li>
<li class="nav-item"><a class="nav-link">Item 7</a></li>
<li class="nav-item"><a class="nav-link">Item 8</a></li>
<li class="nav-item"><a class="nav-link">Item 9</a></li>
<li class="nav-item"><a class="nav-link">Item 10</a></li>
<li class="nav-item"><a class="nav-link">Item 11</a></li>
<li class="nav-item"><a class="nav-link">Item 12</a></li>
<li class="nav-item"><a class="nav-link">Item 13</a></li>
<li class="nav-item"><a class="nav-link">Item 14</a></li>
<li class="nav-item"><a class="nav-link">Item 15</a></li>
</ul>


If you applay min-width for example with 1px the elements should shrink more
li, a {
min-width: 1px;
}
Also set overflow to no horicontal scrolling

Related

Changing alignment for links using bootstrap scrollyspy

I am struggling to justify the scrollyspy links to the center of the navbar. Can someone please help? Thanks!
<ul class="nav nav-pills">
<li class="nav-item">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Services</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Portfolio</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
The alignments on this site are funky, but on VSC they are normal.
Here is my css:
.nav-pills {
display: flex;
align-content: center;
justify-items: center;
}
I tried going with the flex approach.
Thanks for the help.

Make the width of the ul element 100%. If it isn't it can't center from its own width

fragments in Thymeleaf

I have created this fragment html page in Thymeleaf
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<ul th:fragment="top-menu" class="nav navbar-nav mai-top-nav">
<li class="nav-item"><a class="nav-link nav-link-selected" href="pages-my-ppt.html">My PPT</a></li>
<li class="nav-item"><a class="nav-link" href="pages-all-ppt.html">All PPT</a></li>
<li class="nav-item"><a class="nav-link" href="pages-my-wallets.html">Wallets</a></li>
<li class="nav-item"><a class="nav-link" href="pages-purchases.html">Purchases</a></li>
<li class="nav-item"><a class="nav-link" href="pages-alarms.html">Alarms</a></li>
</ul>
</html>
I use this fragment in another template:
<ul th:replace="bonanza/common/top-menu :: top-menu" />
but I got this error message: No end tag (</ul>).

Just wrap your ul fragment with a <div> and add th:fragment notation to that div.
For example:
<div th:fragment="top-menu">
<ul class="nav navbar-nav mai-top-nav">
<li class="nav-item"><a class="nav-link nav-link-selected" href="pages-my-ppt.html">My PPT</a></li>
<li class="nav-item"><a class="nav-link" href="pages-all-ppt.html">All PPT</a></li>
<li class="nav-item"><a class="nav-link" href="pages-my-wallets.html">Wallets</a></li>
<li class="nav-item"><a class="nav-link" href="pages-purchases.html">Purchases</a></li>
<li class="nav-item"><a class="nav-link" href="pages-alarms.html">Alarms</a></li>
</ul>
</div>
and use a div at another template:
<div th:replace="bonanza/common/top-menu :: top-menu"></div>
or you can just add a closing tag to your ul(but i am not sure with this, above is better)
<ul th:replace="bonanza/common/top-menu :: top-menu"></ul>

nav-pills not working in my code (Bootstrap 4)

I'm trying to add nav-pills to tag but it's not working, why?
I really tried everything but nothing works!
<ul class="nav nav-pills flex-column">
<li class="nav-item">
<a class="nav-link" href="dashboard.php">Dashboard</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Add New Post</a>
</li>
</ul>

Pills require the active class.
<ul class="nav nav-pills flex-column">
<li class="nav-item">
<a class="nav-link active" href="">Dashboard</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Add New Post</a>
</li>
</ul>
https://www.codeply.com/go/xrln5uphko

Nav tabs' bottom border can't removed like given in official site

On the official page of agular for the nav tabs we have no bottom border for the selected tab
official page
But when I am using the same code , I get a border even on the selected nav-item
myTab example
Here is my HTML Code
<ul class="nav nav-tabs">
<li class="nav-item">
<a class="nav-link active" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">tab 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">tab 2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">tab 3</a>
</li>
</ul>`
And My CSS :
.nav-item .active
{
background-color: rgb(119, 218, 218) !important;
border-bottom: 0px;
color:rgb(168, 19, 168);
}
Could someone tell me to remove the border bottom from active nav-item ???

Edit: I previously made a mistake. Here's the correct code (notice the corresponding css file):
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css">
<ul class="nav nav-tabs">
<li class="nav-item">
<a class="nav-link active" href="#">Active</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
So, it's important that you link the correct css file in your header. Once you do that, no additional custom css is required to make it work. Also, make sure that none of the other custom css you potentially have interferes with this code.

Remove the nav-tabs class and will work

Bootstrap apply nav-stacked if small screen

Let's say we have a simple navigation bar like this:
http://getbootstrap.com/components/#nav-pills
<ul class="nav nav-pills">
<li role="presentation" class="active">Home</li>
<li role="presentation">Profile</li>
<li role="presentation">Messages</li>
</ul>
How can I add the class "nav-stacked" to it when the window or parent element is smaller than say 940px. Or even better: as soon as the navigation bar can't fit all elements in the same line anymore.
This would be pretty straight forward in javascript, but I'd like to see a pure css/html solution, but without adding #media queries to the bootstrap source code.

Found the solution. There is a class called "nav-justified". It simply stacks the navigation pills as soon as they don't fit into a single row anymore.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<ul class="nav nav-pills nav-justified">
<li role="presentation" class="active">Home</li>
<li role="presentation">Profile</li>
<li role="presentation">Messages</li>
</ul>

Try to add this CSS to your solution. Please check the result. Is it what you want to achieve?
#import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css');
#media (min-width: 768px) {
.nav-justified > li {
display: inline-block;
width: auto;
}
}
<ul class="nav nav-pills nav-justified">
<li role="presentation" class="active">Home</li>
<li role="presentation">Profile</li>
<li role="presentation">Messages</li>
<li role="presentation">Profile</li>
<li role="presentation">Messages</li>
<li role="presentation">Profile</li>
<li role="presentation">Messages</li>
<li role="presentation">Profile</li>
<li role="presentation">Messages</li>
<li role="presentation">Profile</li>
<li role="presentation">Messages</li>
<li role="presentation">Profile</li>
<li role="presentation">Messages</li>
<li role="presentation">Profile</li>
<li role="presentation">Messages</li>
<li role="presentation">Profile</li>
<li role="presentation">Messages</li>
<li role="presentation">Profile</li>
<li role="presentation">Messages</li>
<li role="presentation">Profile</li>
<li role="presentation">Messages</li>
<li role="presentation">Profile</li>
<li role="presentation">Messages</li>
<li role="presentation">Profile</li>
<li role="presentation">Messages</li>
<li role="presentation">Profile</li>
<li role="presentation">Messages</li>
<li role="presentation">Profile</li>
<li role="presentation">Messages</li>
<li role="presentation">Profile</li>
<li role="presentation">Messages</li>
<li role="presentation">Profile</li>
<li role="presentation">Messages</li>
<li role="presentation">Profile</li>
<li role="presentation">Messages</li>
<li role="presentation">Profile</li>
<li role="presentation">Messages</li>
<li role="presentation">Profile</li>
<li role="presentation">Messages</li>
<li role="presentation">Profile</li>
<li role="presentation">Messages</li>
<li role="presentation">Profile</li>
<li role="presentation">Messages</li>
<li role="presentation">Profile</li>
<li role="presentation">Messages</li>
<li role="presentation">Profile</li>
<li role="presentation">Messages</li>
</ul>