<nav class="navbar navbar-expand-sm navbar-light">
<button
class="navbar-toggler"
type="button"
data-bs-toggle="collapse"
data-bs-target="#navbarNav"
aria-controls="navbarNav"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav mx-auto">
<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="#">
products
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
gallery
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
order
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
contact
</a>
</li>
</ul>
</div>
</nav>
I can't center the nav-items. It would align to the right even when I put mx-auto. I tried margin-left but then it wouldn't be responsive. It would only center navbar-nav but not the item inside of them. How would I fix this? Thank you
You can these classes,
text-center or container-fluid or use flex box flex justify-center
You can use "display: flex" and "justify-content: center" which might help you to solve this issue. If you want to align the text, you can use "text-align: center".
Related
I'm working on my first html/css project ever, and I'm using bootstrap. I have a little html experience using Blogger in the past.
When my navbar is expanded, I want the first li item (a button) to float to the left of the page, and the rest of it to float right.
I can get all the items to float one way or the other using flex-start or flex-end but I can't seem to apply it to this single element. I tried using the margin-right property to force it as well, but the results were pretty inconsistent.
I've gone through a bunch of codeply samples as well, and the only other solution I found was treating the button like a logo, which wouldn't collapse into the navigation menu when it became a hamburger.
<nav class="navbar navbar-expand-md">
<button class="navbar-toggler navbar-dark" type="button" data-bs-toggle="collapse" data-bs-target="#main-navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="main-navigation">
<ul class="navbar-nav">
<li>
<a id="resumebutton" class="btn btn-outline-primary" href="ResumeWeb.pdf" target="_blank">Download Resumé</a>
</li>
<li class="nav-item">
<a class="nav-link" href="index.html">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Projects</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
</div>
</nav>
Any custom CSS I wrote to override bootstrap was just for colors and fonts, so I don't think it would affect anything, but I can add it if anyone needs to double check.
Thanks in advance.
This code seems to place the 'Download Resume' button to the left on medium size screens and larger
<nav class="navbar navbar-expand-md">
<button class="navbar-toggler navbar-dark collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#main-navigation" aria-expanded="false">
<span class="navbar-toggler-icon"></span>
</button>
<div id="main-navigation" style="" class="navbar-collapse justify-content-between collapse">
<div>
<a id="resumebutton" class="btn btn-outline-primary" href="ResumeWeb.pdf" target="_blank">Download Resumé</a>
</div>
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="index.html">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Projects</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
</div>
</nav>
You can set the first li's width: 100% so that it takes all the available spaces from the left.
And use flex-end on the parent (ul) element to make the rest of the child move to the right.
.navbar-nav{
display: flex;
justify-content: flex-end;
}
.navbar-nav li:first-child{
width: 100%;
}
<nav class="navbar navbar-expand-md">
<button class="navbar-toggler navbar-dark" type="button" data-bs-toggle="collapse" data-bs-target="#main-navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="main-navigation">
<ul class="navbar-nav">
<li>
<a id="resumebutton" class="btn btn-outline-primary" href="ResumeWeb.pdf" target="_blank">Download Resumé</a>
</li>
<li class="nav-item">
<a class="nav-link" href="index.html">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Projects</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
</div>
</nav>
Using Bootstrap I created a navbar. I wanted to have the navbar collapse after a clicking on a link. When adding the data-bs-toggle & data-bs-target the navbar does revert , but it breaks the link. If anyone can point out what I am doing wrong I would greatly appreciate it.
here is a demo JsFiddle
<div class="container">
<a class="navbar-brand" href="#home"><span class="logo great-vibes">Drip N Dip</span> </a>
<div class="nav-button">
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
</div>
<div class="collapse navbar-collapse justify-content-end" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#home" data-bs-toggle="collapse" data-bs-target=".navbar-collapse.show">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#about" data-bs-toggle="collapse" data-bs-target=".navbar-collapse.show">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#menu">Menu</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#gallery">Gallery</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#" tabindex="-1" aria-disabled="true">Contact</a>
</li>
</ul>
</div>
</div>
</nav>```
Had the same problem and found a workaround. Simply wrap your link names with a span-tag and the needed data-attributes.
<a class="nav-link" href="#home">
<span data-bs-toggle="collapse" data-bs-target=".navbar-collapse.show">
Home
</span>
</a>
Find the original here: Adding data-toggle & data-target breaks Nav links
I can't seem to find a way to make my image appear in the navbar. Any tips on whether I should add a div tag or an extra class? What should I do in terms of CSS? I'm new to Bootstrap, thanks!
<nav class="navbar navbar-b navbar-trans navbar-expand-md fixed-top" id="mainNav">
<div class="container-fluid">
<a class="navbar-brand js-scroll" href="#page-top" >
<img src="img/Signature2.png" id="brand-image" class="img-fluid"/>
</a>
<button class="navbar-toggler collapsed" type="button" data-toggle="collapse" data-target="#navbarDefault" aria-controls="navbarDefault" aria-expanded="false" aria-label="Toggle navigation">
<span></span>
<span></span>
<span></span>
</button>
<div class="navbar-collapse collapse justify-content-end" id="navbarDefault">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link js-scroll active" href="index.html">Home</a>
</li>
<li class="nav-item">
<a class="nav-link js-scroll" href="#about">About</a>
</li>
<li class="nav-item">
<a class="nav-link js-scroll" href="#work">Projects</a>
</li>
<li class="nav-item">
<a class="nav-link js-scroll" href="#blog">Art</a>
</li>
<li class="nav-item">
<a class="nav-link js-scroll" href="#contact">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
I copied your code and replaced it with another image (since I cannot access yours) and it works. So the problem may be in the path you're providing.
Is the img folder in the same level as the html you linked? Are you sure you named the folder and image correctly?
so I would like to move nav items closer to the center of my navbar with Bootstrap but am having trouble. I don't want them all the way to the outside but also not all the way to the center. For instance I would like the left elements to be center left and the right to be center right. I have included a picture and my code. Is there anyway to do this Bootstrap? Already tried offset and it messes up the nav elements.
Picture
<nav class="navbar navbar-expand-lg sticky-top" id="navbar">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<a class="navbar-brand active" href="/"><img src="../static/img/123.png"></a>
<li class="nav-item">
<a class="nav-link" href="#">Why Our Site<span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#test">How it works</a>
</li>
<li class="nav-item">
<a class="nav-link" href="support">FAQ</a>
</li>
<li class="nav-item">
<a class="nav-link" href="blog">Blog</a>
</li>
</ul>
<ul class="nav navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="#">Login</a>
<li class="nav-item">
<span>Sign up</span>
</ul>
</div>
</nav>
Thanks for any help.
You could use container class. For example:
<nav class="container navbar navbar-expand-lg sticky-top" id="navbar">
or check the grid system here.
I'm just starting to get to grips with bootstrap.
I'm trying to create a vertical-navbar on the left of the page after the user has scrolled past the full-page 'intro' using bootstrap 4. The code below produces the navbar on the left side of the page, however there is a problem with it
The navbar stays in a collapsed state, even after resizing the window small and large again
Why does the code cause the navbar to start closed?
Thanks, Jeff
<header id="home" class="jumbotron h-100vw w-100vw">
...
</header>
<div class="container-fluid">
<div class="row">
<div class="col-md-2">
<nav class="navbar navbar-expand-md navbar-light">
<a class="navbar-brand" href="#home">
<img src="img/logo.png" class="img-fluid" alt="Home">
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#nav-content" aria-controls="nav-content"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse-md flex-column" id="nav-content">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#about"></a>About Me</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#work">My Work</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#connect">Stay Connected</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#contact">Get In Touch</a>
</li>
</ul>
</div>
</nav>
</div>
<main class="col-md-10">
REST OF MY CONTENT ON THE RIGHT
</main>
</div>
There is no navbar-collapse-md class. Change it to just navbar-collapse.
<div class="collapse navbar-collapse flex-column" id="nav-content">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#about"></a>About Me
</li>
<li class="nav-item">
<a class="nav-link" href="#work">My Work</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#connect">Stay Connected</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#contact">Get In Touch</a>
</li>
</ul>
</div>