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
Related
I'm running into an issue with scrollspy on Bootstrap v5.1. I am following along with the examples within the docs (listed below) however I can't get it to work; nothing seems to change upon scrolling.
When the user scrolls on the page, depending on which section they are viewing I want the corresponding link on the navbar to be active.
docs: https://getbootstrap.com/docs/5.1/components/scrollspy/
test site: https://Test-Site.thatsliams.repl.co
site code: https://replit.com/#ThatsLiamS/Test-Site
HTML Outline
<body data-bs-spy="scroll" data-bs-target="#navbar">
...
<nav id="navbar" class="menu">
<ul class="nav flex-column">
<li class="nav-item active"><a class="nav-link" href="#about">About me</a></li>
<li class="nav-item"><a class="nav-link" href="#skills">Skills</a></li>
<li class="nav-item"><a class="nav-link" href="#services">Services</a></li>
<li class="nav-item"><a class="nav-link" href="#projects">Projects</a></li>
</ul>
</nav>
...
<section id="about"> ... </section>
<section id="skills"> ... </section>
<section id="services"> ... </section>
<section id="projects"> ... </section>
</body>
It looks like your code is actually working, its just that the .active class is added to the .nav-link anchor tag instead of the .nav-item list item.
Your CSS is targeting the li.active instead of a.active
.sidebar .nav li a:hover, .sidebar .nav li.active a {
color: #1d93e4;
opacity: unset;
}
try this instead:
.sidebar .nav li a:hover, .sidebar .nav li a.active {
color: #1d93e4;
opacity: unset;
}
Here is the example of how to structure the nav (with the .active class in the .nav-link)
<ul class="nav">
<li class="nav-item">
<a class="nav-link active" aria-current="page" 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">Disabled</a>
</li>
</ul>
https://getbootstrap.com/docs/5.1/components/navs-tabs/#base-nav
Or like this...
<nav class="nav">
<a class="nav-link active" aria-current="page" href="#">Active</a>
<a class="nav-link" href="#">Link</a>
<a class="nav-link" href="#">Link</a>
<a class="nav-link disabled">Disabled</a>
</nav>
My element has to be clicked on for CSS to work.
I tried using bootstrap for a nav bar. With 1 logout link on the top right.
I used navbar-nav ml-auto for it.
After that, I tried to override spacing of bootstrap by adding margin-right: 50% !important;
When I refresh the page, it is not applied immediately. If I clicked on the link, it will "jump" to the left as I expected.
Here is what I've tried:
<nav class="navbar navbar-expand-sm bg-light">
<!-- Links -->
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Category</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Blog posts</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Role Management</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">User Management</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">File and Folder Management</a>
</li>
</ul>
<ul class="navbar-nav ml-auto">
<li>
<a class="nav-item" id="logout-btn" href="#"> Logout </a>
</li>
</ul>
</nav>
CSS:
* {
/*display: none;*/
box-sizing: border-box;
}
#logout-btn.nav-item {
margin-right: 50% !important;
}
Can you help me explain why, or is it my browser's fault?
I find it quite weird, already cleared cached.
Remove css style for logout-btn.nav-item which you override. this get applied to the anchor tag. we need to add margin to the ul tag not to a tag. so we have bootstrap 4 in-built margin classes, so we can make use of it. so remove overrided styles and add mr-4 class to the second ul which contains the logout link.The modified code is given below.
<nav class="navbar navbar-expand-sm bg-light">
<!-- Links -->
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Category</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Blog posts</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Role Management</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">User Management</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">File and Folder Management</a>
</li>
</ul>
<ul class="navbar-nav ml-auto mr-4">
<li>
<a class="nav-item" id="logout-btn" href="#"> Logout </a>
</li>
</ul>
</nav>
I'm currently working on an one-pager with a nav by bootstrap. Since I don't know a way to scroll to certain div's ids with routerLink, I'm using href=#id, which works fine so far. I'm currently trying that onWindowScroll the class active shall swap it owner according to the current div which is displayed.
So when the user for instance scrolls to about, the active class shall be assigned to the associated nav-link, which in this case obviously is about us.
#HostListener('document:scroll', [])
onWindowScroll() {
}
<div class="container-fluid">
<a class="nav-link logo float-left" href="#">peak design</a>
<ul class="nav justify-content-end">
<li class="nav-item">
<a class="nav-link active" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#about">About us</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Our work</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact us</a>
</li>
</ul>
</div>
I'd like 2 rows of Navbar to appear like this
CompanyLogo link link link
-----------------------------------------------------------------------
link(dropdown) link link link link link
company logo (centered), upper 3 links (align right).
the upper 3 links should collapse into the logo.
entire 2nd row align center and collapsible. Here is my code:
<html>
<div class="header" style="margin-bottom:0">
<a class="logo" href="#default">CompanyLogo</a>
<div class="header-right">
country
language
<a href="#signup">
<img border="0" alt="signup" src="Sign up icon png.png" width="30"
height="30">
</a>
<a href="#signin">
<img border="0" alt="signup" src="Sign in icon png.png" width="30"
height="30">
</a>
</div>
</div>
<nav class="nav navbar">
<ul class="nav justify-content-center">
<li class="nav-item">
<a class="nav-link" href="#">Categories</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Live Auction</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Make Your Wish</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">How it Works</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Purchase Bid Credits</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact us</a>
</li>
</ul>
</nav>
</html>
Note: I don't know what you mean by "the upper 3 links should collapse into the logo" so I just put them along with the other navbar items on small screens.
HTML
The navbar HTML should be straight forward. You can take a look at the Bootstrap documentation.
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a href="#" class="navbar-brand">
CompanyLogo
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".collapse">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse">
<ul class="navbar-nav upper-controls">
<li class="nav-item">
<a class="nav-link" href="#">Country</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Language</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Sign up | Sign in</a>
</li>
</ul>
<ul class="navbar-nav">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown">
Categories
</a>
<div class="dropdown-menu">
<a class="dropdown-item">Cat 1</a>
<a class="dropdown-item">Cat 2</a>
<a class="dropdown-item">Cat 3</a>
<a class="dropdown-item">Cat 4</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Live Auction</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Make Your Wish</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">How it works</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Purchase Bid Credits</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact us</a>
</li>
</ul>
</div>
</nav>
On small screens
Again, I don't know what you meant by 3 links collapsing into the logo, so I just put them before the other navbar items.
The tricky part here is to center the logo. To do that, beside setting justify-content: center; on the navbar, I also need to change the button toggler to absolute positioning so that it won't take up any space to prevent the logo from staying in the center.
CSS
/* center the logo */
.navbar {
justify-content: center;
}
/* in order to center the logo */
.navbar .navbar-toggler {
position: absolute;
right: 1rem;
top: .5rem;
}
/* center all navbar items */
.navbar-nav {
align-items: center;
}
Result
On larger screens (> 992px)
We can change navbar's flex-flow to column so that 2 rows would be displayed. Also we can change the upper 3 links (I assigned a custom css class "upper-controls" to it) to absolute positioning for the same reason we did on the button toggler above.
CSS
/* since it's expanding at lg */
#media(min-width: 992px) {
/* in order to display in 2 rows */
.navbar-expand-lg {
flex-flow: column nowrap;
}
/* same logic as the navbar-toggler above */
.navbar-nav.upper-controls {
position: absolute;
right: 1rem;
top: .5rem;
font-size: 85%;
}
}
Result
fiddle: https://jsfiddle.net/aq9Laaew/257205/
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