• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

Hamburger Menu for mobile not working

Participant ,
Mar 16, 2021 Mar 16, 2021

Copy link to clipboard

Copied

Hamburger menu not working, no doubt, because my coding if flawed...I would really appreciate help resolving code issues on this index, https://jeniferenterprises.com

TOPICS
Bootstrap , Code

Views

485

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines

correct answers 1 Correct answer

Community Expert , Mar 16, 2021 Mar 16, 2021

Holy cow!!

You really need to optimize those images in your slide show, they're absolutely huge.

8076x2265 pixels and 9.79 MB each is ridiculously large for the internet. I'm guessing these were print pieces at one point in their lives?

Just scaling down to 2000 pixels wide, and keeping it at the highest quality, dropped the size to just over 800 KB. That's going to be whole lot nicer for people without superfast connections or limited data (think mobile) and will look exactly the same as the colos

...

Votes

Translate

Translate
Community Expert ,
Mar 16, 2021 Mar 16, 2021

Copy link to clipboard

Copied

1. Bootstrap 3 and jQuery 1 are outdated.   The current release version of Bootstrap is 4.x and version 5.2 is in beta release.  jQuery 3 has been out for quite a while.  You have some catching up to do. 

 

2. Your navbar is broken because it was not built correctly.

 

Start over with this as your base.  

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap 4.5 Starter</title>

<link rel="stylesheet" href="
https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">

</head>
<body>
<nav id="topNav" class="navbar navbar-top navbar-expand-lg navbar-dark bg-dark"> <a class="navbar-brand mx-auto" href="index.html"> 
<!--Your logo goes here--> 
<img class="shadow-sm rounded-circle" src="https://dummyimage.com/250x110" alt="logo/brand"> </a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".navbar-collapse"> <span class="navbar-toggler-icon"></span></button>
<div class="navbar-collapse collapse">
<ul class="navbar-nav ml-auto">
<li class="nav-item current"><a class="nav-link" href="#">Home</a></li>
<li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Services</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown"> <a class="dropdown-item" href="#">sub-1a</a> <a class="dropdown-item" href="#">sub-1b</a> <a class="dropdown-item" href="#">sub-1c</a> </div>
</li>
<li class="nav-item"><a class="nav-link" href="#">About</a></li>
<li class="nav-item"><a class="nav-link" href="#">Contact</a></li>
</ul>
</div>
</nav>
<div class="jumbotron jumbotron-fluid text-center">
<h1 class="display-5">Bootstrap 4.5  with Dreamweaver 2021</h1>
<p class="lead">Easily build your page using the Bootstrap components from the Insert panel.</p>
<hr class="my-4">
<p>This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
<p class="lead"> <a class="btn btn-dark btn-lg" href="https://getbootstrap.com/docs/4.0/components/jumbotron/" role="button">Learn more</a> </p>
</div>
<div class="container-fluid">
<div class="row text-center">
<div class="col-md-6 col-lg-3">
<h3>Heading 3</h3>
<img class="img-fluid" src="https://dummyimage.com/900x600" alt="placeholder">
<p>Lorem ipsum dolor...</p>
 
</div>
<div class="col-md-6 col-lg-3">
<h3>Heading 3</h3>
<img class="img-fluid" src="https://dummyimage.com/900x600" alt="placeholder">
<p>Lorem ipsum dolor...</p>
</div>
<div class="col-md-6 col-lg-3">
<h3>Heading 3</h3>
<img class="img-fluid" src="https://dummyimage.com/900x600" alt="placeholder">
<p>Lorem ipsum dolor...</p>
</div>
<div class="col-md-6 col-lg-3">
<h3>Heading 3</h3>
<img class="img-fluid" src="https://dummyimage.com/900x600" alt="placeholder">
<p>Lorem ipsum dolor...</p>
</div>

</div>
<hr class="my-4">
<div class="row">
<footer class="col"> <small>© 2021 Footer goes here</small> </footer>
</div>
</div>


<!--first jQuery then popper then Bootstrap js--> 
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
</body>
</html>

 

NOTE:  Beginning with Bootstrap 4, float layouts were replaced with newer flexbox layouts.  Old utility classes were removed and new classes were added. 

 

Hope this helps.  Post back if you have any questions.

 

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Participant ,
Mar 16, 2021 Mar 16, 2021

Copy link to clipboard

Copied

First of all - Thank you so very much for taking the time to look at my mess!

Yikes, I hope I can figure all this out and get current!

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Mar 16, 2021 Mar 16, 2021

Copy link to clipboard

Copied

Holy cow!!

You really need to optimize those images in your slide show, they're absolutely huge.

8076x2265 pixels and 9.79 MB each is ridiculously large for the internet. I'm guessing these were print pieces at one point in their lives?

Just scaling down to 2000 pixels wide, and keeping it at the highest quality, dropped the size to just over 800 KB. That's going to be whole lot nicer for people without superfast connections or limited data (think mobile) and will look exactly the same as the colossal images to anyone on a normal 20-something inch monitor.

It will drop the size of your home page by a good ~27 MB.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Participant ,
Mar 24, 2021 Mar 24, 2021

Copy link to clipboard

Copied

LATEST

Thanks for you input. I got rid of all those huge images and the phone experience for the website is much simplier now. Customer is pleased!

 

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines