Whenever I click on the hamburger menu icon it collapses with the nav-items! what should I do to fix this issue now?
Navbar
<header>
<div class="container-fluid">
<div class="row">
<div class="col-12 col-sm-12">
<nav class="navbar navbar-toggleable-md fixed-top d-flex justify-content-center">
<a class="navbar-brand animated heartBeat delay-.5s" href="#home"><img class="img-fluid logo"
src="./Assets/Logos/LogoMakr_8A9Y2n.png" alt=""></a>
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse"
data-target="#vesco-menu" aria-controls="vesco-menu" aria-expanded="false"
aria-label="Toggle navigation">
<span class="navbar-toggler-icon"><i class="fas fa-bars"
style="color:#fff; font-size: 30px; "></i>
</span>
</button>
<div class="collapse navbar-collapse justify-content-end" id="vesco-menu">
<div class="navbar-nav nav nav-pills animated fadeInRight delay-1s">
<a class="nav-item nav-link active" href="#home">Home <span
class="sr-only">(current)</span></a>
<a class="nav-item nav-link" href="#project">portfolios</a>
<a class="nav-item nav-link" href="#skills">skills</a>
<a class="nav-item nav-link" id="downlink" href="./Assets/RESUME.docx"
download>Resume</a>
<a class="nav-item nav-link" href="#testimonials">Testimonials</a>
<a class="nav-item nav-link" href="#contact">CONTACT ME</a>
</div>
</div>
</nav>
</div>
</div>
</div>
</header>
In my machine it works fine, I think the problem is in your custom CSS but I show one class that not exist in bootstrap 4 so I suggest you to replace it.
Replace navbar-toggleable-md with navbar-expand-md
Related
There was a problem with extra padding in the navbar after the site icon. Initially, the idea was to place links that are located to the left of the icon closer to the left edge using me-3, but then the icon of the site is shifted to the right, which I basically don’t need.Therefore, I have a question. Is it possible to make the same indents from the site icon and links without shifting this icon from the center or how to remove the indent between the icon and links on the right side of the navbar.
<nav class="navbar navbar-expand-lg navbar-dark fixed-top" id="scroll">
<div class="container-fluid">
<div class="collapse navbar-collapse order-1 order-lg-0 dual-collapse2" id="navbarNavAltMarkup">
<ul class="navbar-nav ms-auto">
<li class="nav-item mx-auto">
<a class="nav-link" aria-current="page" href="#articles">기사들</a>
</li>
<li class="nav-item mx-auto">
<a class="nav-link" aria-current="page" href="#mission">우리의 임무</a>
</li>
</ul>
</div>
<a class="navbar-brand order-0" href="#">
<img src="img/marslogo.png" alt="" width="30" height="30">
</a>
<div>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
</div>
<div class="collapse navbar-collapse order-3 dual-collapse2" id="navbarNavAltMarkup"
>
<ul class="navbar-nav">
<li class="nav-item mx-auto">
<a class="nav-link" aria-current="page" href="#">사진들</a>
</li>
<li class="nav-item mx-auto">
<a class="nav-link" aria-current="page" href="#">문의하기</a>
</li>
</ul>
</div>
</div>
</nav>
I am trying to float a logo to the left side of a nav bar, and have the text float to the right of the nav bar. I am trying to accomplish this through bootstrap. I have tried adding float and text align classes to outer divs and specific elements. I have shown my code below, keep in mind it is not meant to be run.
//not meant to be run
//bootstrap is not hooked up
<div class = "row col-12">
<div class = "float-left col-3">
<img>
</div>
<div class = "float-right col-9">
<nav class = "nav text-right">
<a class = "homen" href="home.html">Home</a>
<a class = "aboutn" href="about.html">About</a>
<a class = "teamn" href="team.html">Team</a>
<a class = "contactn" href="contact.html">Contact Us</a>
</nav>
</div>
</div>
You can use Flexbox utilitys. For example use justify-content-end on the collapse menu:
<html>
<head>
<!-- CSS only -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse justify-content-end" id="navbarNavAltMarkup">
<div class="navbar-nav">
<a class="nav-link active" aria-current="page" href="#">Home</a>
<a class="nav-link" href="#">About</a>
<a class="nav-link" href="#">Team</a>
<a class="nav-link" href="#">Contact Us</a>
</div>
</div>
</div>
</nav>
<!-- JavaScript Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta3/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script>
</body>
Also note, as of Bootstrap 5 ml-auto has been replaced with ms-auto
This is from official Bootstrap documentation. It uses display: flex design and if you want to align menu to left again, you can change mr-auto with me-auto. This is also responsive code with hidden button which can only come with mobile screens.
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#"><img src="logo.svg" alt="logo" /></a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse justify-content-end" id="navbarText">
<ul class="navbar-nav mr-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
</ul>
</div>
</div>
</nav>
I started to edit my web and I added second logo in navbar. It looks okay on pc but when I try it on mobile, navbar is covering image.. I am using bootstrap 4 so I would like to know how that navbar is up the image and not in image... Thanks.
<nav id="menu" class="navbar fixed-top navbar-toggleable-sm bg-faded px-5 stin">
<button class="navbar-toggler navbar-toggler-right mr-3" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="row d-flex align-items-end">
<div class="col-1 col-md-2 mr-1 mr-sm-0">
<a class="navbar-brand" href="#"> <img src="img/logo_barva.svg" height="90" class="pb-1"></a>´
</div>
</div>
<div class="collapse navbar-collapse prava pr-3" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto ">
<li class="nav-item active">
<a class="nav-link" href="#">DOMŮ<span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="uklid.html">ÚKLIDOVÉ SLUŽBY</a>
</li>
<li class="nav-item">
<a class="nav-link" href="pece.html">DOMA PÉČE</a>
</li>
<!--<li class="nav-item dropdown">
SLUŽBY<span class="caret"></span>
<ul class="dropdown-menu col-xs-12" >
<li><a class="dropdown-item" href="uklid.html">Úklidové služby</a></li>
<li><a class="dropdown-item" href="pece.html">Domácí péče</a></li>
</ul>
</li>-->
<li class="nav-item">
<a class="nav-link" href="kariera.html">KARIÉRA</a>
</li>
<li class="nav-item">
<a class="nav-link" href="kontakt.html">KONTAKT</a>
</li>
</ul>
</div>
<div class="logo2">
<div class="col-5 col-md-2 mr-1 mr-sm-0">
<a class="navbar-brand pr-5" href="pece.html"> <img src="img/doma_pece.png" height="65" class="pb-1"></a>´
</div>
</div>
Well, I managed to do it.
If someone needed it:
#media screen and (max-width: 768px) {
body {
padding-top: 15.3rem;
padding-bottom: 0rem;
color: #5a5a5a;
}
}
This question already has an answer here:
Center Navbar links without brand pushing it to the right in Bootstrap 4?
(1 answer)
Closed 3 years ago.
Im Trying to center my links right under the h1, but nothing works. Here's what i have right now, i would love any help or pointers!
This is my h1-tag
<div class="container-fluid p-5 bg-success header-body text-center">
<h1 id="high-credit-top-text">
<a class="text-white" style="font-family: 'Lexend Deca', sans-serif;" href="hogkostnadskredit.php">Playaround.se</a>
</h1>
<nav class="navbar navbar-expand-lg navbar-light bg-success">
<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">
<div class="container justify-content-center">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link text-white" href="playaround.php"><i class="fas fa-home"></i></a>
</li>
<li class="nav-item">
<a class="nav-link text-white" href="nyheter.php">Nyheter</a>
</li>
<li class="nav-item">
<a class="nav-link text-white" href="information.php">Infomartion</a>
</li>
</ul>
</div>
</div>
</nav>
If you are trying to center the .nav-item links horizontally, then add the bootstrap class justify-content-center to the ul tag with class navbar-nav
<ul class="navbar-nav justify-content-center">
<li class="nav-item active">
<a class="nav-link text-white" href="playaround.php"><i class="fas fa-home"></i></a>
</li>
<li class="nav-item">
<a class="nav-link text-white" href="nyheter.php">Nyheter</a>
</li>
<li class="nav-item">
<a class="nav-link text-white" href="information.php">Infomartion</a>
</li>
</ul>
Example
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<div class="container-fluid p-5 bg-success header-body text-center">
<h1 id="high-credit-top-text">
<a class="text-white" style="font-family: 'Lexend Deca', sans-serif;" href="hogkostnadskredit.php">Playaround.se</a>
</h1>
</div>
<nav class="navbar navbar-expand-lg navbar-light bg-success">
<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">
<div class="container justify-content-center">
<ul class="navbar-nav justify-content-center">
<li class="nav-item active">
<a class="nav-link text-white" href="playaround.php"><i class="fas fa-home"></i></a>
</li>
<li class="nav-item">
<a class="nav-link text-white" href="nyheter.php">Nyheter</a>
</li>
<li class="nav-item">
<a class="nav-link text-white" href="information.php">Infomartion</a>
</li>
</ul>
</div>
</div>
</nav>
Having issues with the collapsing menu still. According to the way bootstrap is set up, when it collapses, it should go into a straight vertical nav instead of still stretching horizontal. It only seems to end up vertically correct when at the lowest screen size and even though only displays correctly on one of the menus. Thank you Gary for pointing out and helping fix the first issue with the buttons and ID's
first image is how it's supposed to look
Correct Display
My Display
Here's the Snippet of code I put up on codely
<nav class="navbar navbar-expand-xl navbar-light bg-dark" id="topbar">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAlt" aria-controls="navbarNavAlt" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavAlt">
<ul class="nav nav-navbar">
<li class="nav-item nav-link">
<a href="tel:1-702-555-5555">
<img src="image/phone.svg" height="15px" alt="Telephone"> (702)555-5555
</a>
</li>
<li class="nav-item nav-link">
<a href="mailto:mail#mail.com">
<img src="image/email.svg" height="15px" alt="Email"> mail#mail.com
</a>
</li>
<li class="nav-item nav-link" href="#">Premier Face Punching</li>
<li class="nav-item nav-link">
<a href="https://www.linkedin.com/company/Stuffnthings/">
<img src="image/linkedin.png" height="15px">
</a>
<a href="https://www.facebook.com/stuffnthings">
<img src="image/facebook.png" height="15px">
</a>
<a href="https://www.twitter.com/stuffnthings">
<img src="image/twitter.png" height="15px">
</a>
</li>
<li>
<input class="form-control border-secondary py-2" type="search" value="search">
</li>
</ul>
</div>
</nav>
<nav class="navbar navbar-expand-md navbar-light bg-light sticky-top" id="mainnav">
<a class="navbar-brand" href="#">
<img src="image/VC-Logo.png" height="192px" alt="VC Logo">
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse ml auto" id="navbarNavAltMarkup">
<div class="nav nav-pills">
<a class="nav-item nav-link active" href="#">Home <span class="sr-only">(current)</span></a>
<a class="nav-item nav-link" href="#">Web Design</a>
<a class="nav-item nav-link" href="#">Graphic Design</a>
<a class="nav-item nav-link" href="#">About US</a>
<a class="nav-item nav-link" href="#">Contact US</a>
</div>
</div>
</nav>
Your target attribute for both the navbar is same. Just replace the target attribute and the button works for different nav bar. And the navbar seems to become vertical when the width of the browser is less.
<!DOCTYPE html>
<html>
<head>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-expand-xl navbar-light bg-dark" id="topbar">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAlt" aria-controls="navbarNavAlt" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavAlt">
<ul class="nav-navbar">
<li class="nav-item nav-link">
<a href="tel:1-702-555-5555">
<img src="image/phone.svg" height="15px" alt="Telephone"> (702)555-5555
</a>
</li>
<li class="nav-item nav-link">
<a href="mailto:mail#mail.com">
<img src="image/email.svg" height="15px" alt="Email"> mail#mail.com
</a>
</li>
<li class="nav-item nav-link" href="#">Premier Face Punching</li>
<li class="nav-item nav-link">
<a href="https://www.linkedin.com/company/Stuffnthings/">
<img src="image/linkedin.png" height="15px">
</a>
<a href="https://www.facebook.com/stuffnthings">
<img src="image/facebook.png" height="15px">
</a>
<a href="https://www.twitter.com/stuffnthings">
<img src="image/twitter.png" height="15px">
</a>
</li>
<li>
<input class="form-control border-secondary py-2" type="search" value="search">
</li>
</ul>
</div>
</nav>
<nav class="navbar navbar-expand-md navbar-light bg-light sticky-top" id="mainnav">
<a class="navbar-brand" href="#">
<img src="image/VC-Logo.png" height="192px" alt="VC Logo">
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse ml auto" id="navbarNavAltMarkup">
<div class="nav-pills">
<a class="nav-item nav-link active" href="#">Home <span class="sr-only">(current)</span></a>
<a class="nav-item nav-link" href="#">Web Design</a>
<a class="nav-item nav-link" href="#">Graphic Design</a>
<a class="nav-item nav-link" href="#">About US</a>
<a class="nav-item nav-link" href="#">Contact US</a>
</div>
</div>
</nav>
</body>
</html>