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>
Related
I'm a junior web developer and I'm struggling with my dropdown button. When I resize the screen to test it, it won't drop down. Thank you!
<nav class="navbar navbar-expand-lg navbar-dark bg-dark static-top">
<div class="container">
<a class="navbar-brand" href="#">
<img src="http://placehold.it/150x50?text=Logo" alt="">
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home
<span class="sr-only">(current)</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="about.html">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="services.html">Services</a>
</li>
<li class="nav-item">
<a class="nav-link" href="contact.html">Contact</a>
</li>
<li class="nav-item">
<a class="nav-link" href="form.html">Sign In/Sign Up</a>
</li>
</ul>
</div>
</div>
</nav>
Did you declare this?
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
I'm building a site in Bootstrap and my hamburger menu is not collapsing. Here is the HTML code:
<section>
<div class="container-fluid main-banner">
<div class="row">
<div class="col-12">
<nav class="navbar navbar-expand-lg navbar-light bg-light main-nav">
<a class="navbar-brand" href="#"><img src="images/logo.png"></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="custom-toggler" role="button" ><i class="fa fa-bars" aria-hidden="true"></i></span>
</button>
<div class="collapse navbar-collapse">
<ul class="navbar-nav ml-auto">
<li class="nav-item"> <a class="nav-link" href="#">Home</a> </li>
<li class="nav-item"> <a class="nav-link" href="#">Our Culture</a> </li>
<li class="nav-item"> <a class="nav-link" href="#">Our Curriculum</a> </li>
<li class="nav-item"> <a class="nav-link" href="#">News</a> </li>
<li class="nav-item"> <a class="nav-link see-through-button" href="#">Apply</a> </li>
</ul>
</div>
</nav>
</div>
</div>
<div class="row main-banner-text">
<div class="col-lg-6">
<h1>Know Your Greatness.</h1>
<h3>Develop your passion and align your education with real world needs.</h3>
<div class="top-padding">Your future starts now</div>
</div>
<div class="col-lg-6"></div>
</div>
</div>
</section>
I would appreicate any feedback as I am pretty much stumped at this point. I've tried looking on other threads but haven't found anything yet.
You need to call id used in data-target="#navbarSupportedContent" for show hide navbar div please check below code
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script><section>
<div class="container-fluid main-banner">
<div class="row">
<div class="col-12">
<nav class="navbar navbar-expand-lg navbar-light bg-light main-nav">
<a class="navbar-brand" href="#"><img src="images/logo.png"></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="custom-toggler" role="button" ><i class="fa fa-bars" aria-hidden="true"></i></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ml-auto">
<li class="nav-item"> <a class="nav-link" href="#">Home</a> </li>
<li class="nav-item"> <a class="nav-link" href="#">Our Culture</a> </li>
<li class="nav-item"> <a class="nav-link" href="#">Our Curriculum</a> </li>
<li class="nav-item"> <a class="nav-link" href="#">News</a> </li>
<li class="nav-item"> <a class="nav-link see-through-button" href="#">Apply</a> </li>
</ul>
</div>
</nav>
</div>
</div>
<div class="row main-banner-text">
<div class="col-lg-6">
<h1>Know Your Greatness.</h1>
<h3>Develop your passion and align your education with real world needs.</h3>
<div class="top-padding">Your future starts now</div>
</div>
<div class="col-lg-6"></div>
</div>
</div>
</section>
I'm trying to get the image "travel.png" to be at the left side of my navbar, like it's hugging the left side of the screen.
(https://imgur.com/a/I0xFOWc)
<nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
<div class="container">
<a class="navbar-brand" href="travelindex.html">
<img src="travel.png" width="30" height="30" class="d-inline-block align-top" alt="">
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link" href="travelindex.html">Home
<span class="sr-only">(current)</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="reservations.html">Reservations</a>
</li>
<li class="nav-item">
<a class="nav-link" href="aboutus.html">About Us</a>
</li>
</ul>
</div>
</div>
I'm not really clear and what the issue is; testing your code it looks like the image is where its supposed to be, however, if you are referring to the image being somewhat centered on the screen, its because of the .container element you have inside the navbar, removing this would cause the navbar to use the full available width of the screen.
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
<div class="container">
<a class="navbar-brand" href="travelindex.html">
<img src="https://via.placeholder.com/30" class="" alt="">
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link" href="travelindex.html">Home
<span class="sr-only">(current)</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="reservations.html">Reservations</a>
</li>
<li class="nav-item">
<a class="nav-link" href="aboutus.html">About Us</a>
</li>
</ul>
</div>
</div>
</nav>
Without container
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<!-- Without container -->
<nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
<a class="navbar-brand" href="travelindex.html">
<img src="https://via.placeholder.com/30" class="" alt="">
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link" href="travelindex.html">Home
<span class="sr-only">(current)</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="reservations.html">Reservations</a>
</li>
<li class="nav-item">
<a class="nav-link" href="aboutus.html">About Us</a>
</li>
</ul>
</div>
</nav>
Basically my col's don't work or i am not doing something right?
Here's an image i attached bellow
P.S.: I am a newbie with bootstrap just got started with it so please don't get mad at small mistakes.
I am using Bootstrap version 4
Img here with the problem
Here's my code
<body>
<header>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand" href="#"><img src="images/amf-logo.jpg"
alt="amfLogo"
width="130px" height="40px"></a>
<button class="navbar-toggler" 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="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Galerie</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</nav>
<div class="container">
<div class="row">
<div class="col-md-3 col-sm-4"> <!-- you must close this -->
<p>
acxzcxzcxzcxzvcxzvcxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxz
</p>
</div>
<div class="col-md-3 col-sm-4"
<p> azcxxxxxxxxxxxxxxxxxxxxsdazcxxxxx </p>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
integrity="sha384-
KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
crossorigin="anonymous"></script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js"
integrity="sha384-
vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh"
crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-
beta.2/js/bootstrap.min.js" integrity="sha384-
alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ"
crossorigin="anonymous"></script>
I put the code into codepen and the page displays properly there. See for yourself:
https://codepen.io/dakata911/pen/mqagWO
I think this works fine. :)
Try this out...
If this doesn't work tell me what size screen you are viewing this on.
<body>
<header>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand" href="#"><img src="images/amf-logo.jpg"
alt="amfLogo"
width="130px" height="40px"></a>
<button class="navbar-toggler" 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="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Galerie</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</nav>
<div class="container-fluid">
<div class="row">
<div class="col-md-3 col-sm-4"> <!-- you must close this -->
<p>
acxzcxzcxzcxzvcxzvcxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxz
</p>
I am using this code :
<nav class="navbar navbar-expand-md navbar-light bg-faded">
<a class="navbar-brand nav-space" href="#top">
<img src="img/favicon.png" width="30" height="30" class="d-inline-block align-top" alt="random image">
title
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarCollapse">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#top">random <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">random</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">random</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">random</a>
</li>
</ul>
</div>
</nav>
for my project. However, the color of the navbar is all white, while the examples on https://getbootstrap.com has a greyish navbar. I have already included all bootstrap files.What am I doing wrong? and also, would it be possible to acquire the previous bootstrap 3 navbar styling?
https://imgur.com/a/kXrn4
Use bg-light as a class in the nav tag.