Clicking on a toggle bar unable to move the banner image down it is displaying the menu on the banner image.when the user clicks on toggle bar in mobile devices the menu should be displayed and below the menu, banner image should be displayed and if the user clicks on toggle bar again menu should be hidden and header should move up by default.Here is the code which I have used
<link href="css/bootstrap.min.css" rel="stylesheet">
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<div class="slider">
<img src="images/backgroundbanner.jpg" class="img-responsive backgroundbanner" alt="backgroundbanner" >
<img src="images/finalbackgroundbanner.jpg" class="img-responsive mobilebackgroundbanner" alt="backgroundbanner" >
<div class="banner_content home_new_section">
<div class="b_head1"><span style="color:#26237B;font-weight:bold;">ONSHORE</span> <span style="color:#E2011B;font-weight:bold;">OFFSHORE</span> Team on Demand </div>
<div class="b_head">Scale your Engineering&Technology team briskly</div>
<span class="pre_vetted">Pre-vetted, ready to go, $30 / hr</span>
</div>
<div class="get_started">Get Started</div>
<!-- Navigation -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
<div class="container">
<a class="navbar-brand" href="#">
<img src="images/logo1.gif" width="110" height="26" alt="" class="logoimage img-responsive">
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarResponsive" 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 ml-auto navbar-right">
<li class="nav-item">
<a class="nav-link home" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link cost" href="#" >Cost</a>
</li>
<li class="nav-item">
<a class="nav-link offshore" href="http://teknotrait.com/">Offshore Partner</a>
</li>
<li class="nav-item">
<a class="nav-link contactus" href="#contact" >Contact Us</a>
</li>
</ul>
</div>
</div>
</nav>
</div>
<!-- Page Content -->
Here is the website url
Related
I'm just diving into Bootstrap and I've started at navbars, so I've created a navbar that opens as a toggler menu when screen size is mobile. The problem I have is that I press the menu and it opens but when the menu has dropped down it disappears, then when I press the menu again I see the menu slide back up.
The problem seems to be when the menu is fully open it isn't visible.
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous" />
<nav class="navbar navbar-expand-md bg-danger navbar-light">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand">ELectro</a>
<div class="collapse navbar-collapse" id="navbarTogglerDemo01">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="">Portfolio</a>
</li>
<li class="nav-item">
<a class="nav-link" href="">Portfolio</a>
</li>
</ul>
</div>
</nav>
<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#3.4.1/dist/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>
[enter image description here][1]I tried to much to move the image and link button and tried to make the navbar works on mobile but not very good
I used this code to try to move my image and the link:
<td width="500px"><img src="img/amd.jpeg" style=" top: 10%;" align="centre">
<td width="500px"><img src="img/amd.jpeg" >
and this the bootstrap navbar that don't work:
<nav class="navbar navbar-expand-md bg-dark navbar-dark">
<!-- Brand -->
<a class="navbar-brand" href="#">Navbar</a>
<!-- Toggler/collapsibe Button -->
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<!-- Navbar links -->
<div class="collapse navbar-collapse" id="collapsibleNavbar">
<ul class="navbar-nav">
<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" href="#">Link</a>
</li>
</ul>
</div>
</nav>
and I tried to resize the link text by this code but doesn't work too :
<a href="CPU.html" style="
text-decoration: none;
color: black; " ><b size="50">CPU</b></a>
This was a pity
and I tried to make it as I made it in Nicepage
[1]: https://i.stack.imgur.com/gcrt5.png
After setting custom background for the nav-bar in bootstrap 4, I tried to put nav-toggler-icon for small screens. the nav-bar hamburger icon is not displayed but when I click the region it works fine. What can I do for it.
The html code is:
<nav id=header-nav class="navbar navbar-expand-md navbar-custom ">
<a href="index.html" class="navbar-brand">
<h1 class="tagline">Subha</h1>
</a>
<button class="navbar-toggler" data-toggle="collapse" data-target="#hamburger">
<span class=" navbar-dark navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="hamburger">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
Cart</li>
<li class="nav-item">
Login</li>
</ul>
</div>
</nav>
the css code for nav bar is:
.navbar-custom
{
background-color: rgb(144,12,25);
border-radius: 0;
border: 0;
}
Try to change
data-target="#hamburger"
to
data-target="#navbarResponsive"
I hope this helps you! Otherwise take my own navbar template:
<nav class="navbar navbar-expand-md navbar-light bg-light sticky-top">
<div class="container-fluid">
<img src="img/logo.png" alt="Logo" />
<!-- dropdown btn -->
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive">
<span class="navbar-toggler-icon"></span>
</button>
<!-- nav-links -->
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
home
</li>
<li class="nav-item">
about
</li>
<li class="nav-item">
services
</li>
<li class="nav-item">
team
</li>
<li class="nav-item">
connect
</li>
</ul>
</div>
</div>
</nav>
Your <nav> is missing the color scheme color class, Which is what bootstrap uses to add the icon to the button.
The problem is you misplaced it, it should go on the <nav> not the <span>, It's only visible when you click it because the an outline as applied.
Demo
body {
zoom: 2;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
<div class="navbar-light bg-primary">
<span class="navbar-toggler-icon"></span>
</div>
<br>
<div class="navbar-dark bg-primary">
<span class="navbar-toggler-icon"></span>
</div>
Solution
.navbar-custom {
background-color: rgb(144, 12, 25);
border-radius: 0;
border: 0;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
<nav id=header-nav class="navbar navbar-expand-md navbar-dark navbar-custom ">
<a href="index.html" class="navbar-brand">
<h1 class="tagline">Subha</h1>
</a>
<button class="navbar-toggler" data-toggle="collapse" data-target="#hamburger">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="hamburger">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
Cart</li>
<li class="nav-item">
Login</li>
</ul>
</div>
</nav>
So I spent a few hours trying to solve this myself, with the help of other people's posts but had no luck. Allow me to explain my issues first.
My website, www.discoverbugs.org, has a bootstrap navigation menu. It looks fine on the desktop, but on mobile, the drop-down menu disappears when you click on it. What's causing it and how can I fix it?
The second issue is the header image. On mobile, it expands across the entire width of the phone. I'm having this issue with a lot of images on the site. I tried adding max and min widths and it just won't work for me. Can someone please help me edit this? It looks ridiculous.
CSS:
#media screen and (max-width: 420px) { header {
padding: 65px 0 0px; } }
Index.php
<header class="bg-primary text-white">
<div class="container text-center">
<img src="img/header-v6.jpg">
</div>
</header>
Header.php (Navigation menu)
<!-- Navigation -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top" id="mainNav">
<div class="container">
<a class="navbar-brand js-scroll-trigger" href="index.php">Discover Bugs</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">
<a class="nav-link js-scroll-trigger" href="index.php">Home</a>
</li>
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="testimonials.php">Testimonials</a>
</li>
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="collections.php">Collections</a>
</li>
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="form.php">Costs & Booking</a>
</li>
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="faq.php">FAQ</a>
</li>
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="contact.php">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
Javascript coding I have:
<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
The reason is simple: Bootstrap 3 JavaScript is not designed to work with Bootstrap 4.
In other words, for Bootstrap 4 css you also need Bootstrap 4 JavaScript (as well as jQuery 3.2.1 and popper.js).
To fix the header image issue add the img-fluid class to the image like so:
<img class="img-fluid" src="img/header-v6.jpg">
This will make the image responsive.
To fix the first issue, use the css and JavaScript files from the following template (and load them in that order):
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top" id="mainNav">
<div class="container">
<a class="navbar-brand js-scroll-trigger" href="index.php">Discover Bugs</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">
<a class="nav-link js-scroll-trigger" href="index.php">Home</a>
</li>
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="testimonials.php">Testimonials</a>
</li>
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="collections.php">Collections</a>
</li>
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="form.php">Costs & Booking</a>
</li>
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="faq.php">FAQ</a>
</li>
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="contact.php">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
<div class="container mt-5 pt-5">
<div class="row">
<div class="col">
<h1>Hello, world!</h1>
</div>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<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.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>
I've made navbar using Bootstrap4 and when I open website as mobile screen links in menu doesn't work. Here is my code:
<nav class="navbar navbar-expand-sm navbar-dark" style="background-color: #E2BA28">
<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>
<!-- Brand -->
<a class="navbar-brand" href="https://www.example.com"><img src="logo" width="60" class="d-inline-block align-top" alt=""></a>
<!-- Links -->
<div class="collapse navbar-collapse justify-content-end" id="nav-content">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link eak-link" href="https://www.example.com">example</a>
</li>
<li class="nav-item">
<a class="nav-link eak-link" href="https://www.example.com">example</a>
</li>
<li class="nav-item">
<a class="nav-link eak-link" href="#">example</a>
</li>
<li class="nav-item">
<a class="nav-link eak-link" href="https://www.example.com">example</a>
</li>
<li class="nav-item">
<a class="nav-link eak-link eak-abc" href="https://www.example.com">example</a>
</li>
</ul>
</nav>
If it does help I'm using this js:
$(document).ready(function(){
$('.nav-item').hover(function(){
$(this).toggleClass('animated bounceIn')
});
});
Thanks for help !
Apart from adding bootstrap's js code at the footer of your page, you'll need to also includejQuery.
Here's a working pen:
CodePen