I am trying to make a webpage using Bootstrap. I am using .container-lg so that the content get 100% width when max-width is 767px. But is it not getting 100% width on screens with width less than 768px.
My Code:
<!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.0">
<title>Module 09 - Panda Ecommerce usign Bootstrap</title>
<!-- Bootstrap CSS CDN -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<!-- My Custom CSS Link -->
<link rel="stylesheet" href="./style.css">
</head>
<body>
<div class="container-lg">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">
<img src="./images/logo.png" alt="Panda-ECommerce-Logo">
</a>
<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">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#home">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#shoes">Shoes</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#backpack">Backpack</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#contact">Contact Us</a>
</li>
</ul>
</div>
</div>
</nav>
</div>
<!-- Bootstrap JavaScript CDN-->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
crossorigin="anonymous"></script>
</body>
</html>
How to fix this problem?
How can I get 100% width on screens less than 768px?
in Bootstrap we have this CSS style:
.container, .container-fluid, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
width: 100%;
padding-right: var(--bs-gutter-x,.75rem);
padding-left: var(--bs-gutter-x,.75rem);
margin-right: auto;
margin-left: auto;
for getting 100% width you should remove the padding, so you should use padding: 0 in your CSS style
I hope this solve your problem
Fixed this with the code below (SASS) so we can keep the padding.
/* Fix for bootstrap container */
.container-lg{
#include media-breakpoint-down(lg){
width: auto;
}
}
Related
The navbar works fine on the big screen but when you go to a mobile screen the collapse closes back after pressing the collapse icon.
<!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://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body style="background-color: #7e9094;">
<nav style="background-color: #213239;" class="navbar navbar-expand-lg navbar-dark">
<a class="navbar-brand active" href="index.html">Home</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button>
<div class="collapse navbar-collapse" data-target="#demo" id="navbarText">
<ul class="navbar-nav" id="demo">
<li class="nav-item">
<a class="nav-link" href="shop/shop.html">Shop</a>
</li>
<li class="nav-item">
<a class="nav-link" href="projects/projects.html">Projects</a>
</li>
</ul>
<span class="navbar-text"><a class="nav-link" href="index.html"><img style="float: right;" width="10%" src="img/image.img"></a></span>
</div>
</nav>
</body>
</html>
Just update the CDN link for your JavaScript to match the CSS. Both need to be on the 4.x version.
<!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://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body style="background-color: #7e9094;">
<nav style="background-color: #213239;" class="navbar navbar-expand-lg navbar-dark">
<a class="navbar-brand active" href="index.html">Home</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button>
<div class="collapse navbar-collapse" data-target="#demo" id="navbarText">
<ul class="navbar-nav" id="demo">
<li class="nav-item">
<a class="nav-link" href="shop/shop.html">Shop</a>
</li>
<li class="nav-item">
<a class="nav-link" href="projects/projects.html">Projects</a>
</li>
</ul>
<span class="navbar-text"><a class="nav-link" href="index.html"><img style="float: right;" width="10%" src="img/image.img"></a></span>
</div>
</nav>
</body>
</html>
it is just a supplement to the answer of #isherwood and #MrUpsidown.
Indeed, you have incompatible css, jquery and bootstrap versions in your code.
If you want to use the latest version of Bootstrap, you should do like in an example from the answer above. It means you need the same version of css as the version of bootstrap is, 4.3.1. It is also recommended to use jquery slim build. You could read more on the 'Getting started' guide for Bootstrap 4.3.
If you actually need the bootstrap 3.4.1 (that actually was a typo in your code, I believe), you need different css and jquery for it as it follows from the 'Getting started' guide for Bootstrap 3.4 An example of navbar for that version of bootstrap you can find here.
In this case your code will be something like this:
<!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://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"
integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body style="background-color: #7e9094;">
<nav style="background-color: #213239;" class="navbar navbar-expand-lg navbar-default">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbarText"
aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Home</a>
</div>
<div class="collapse navbar-collapse" data-target="#demo" id="navbarText">
<ul class="navbar-nav" id="demo">
<li class="nav-item">
<a class="nav-link" href="shop/shop.html">Shop</a>
</li>
<li class="nav-item">
<a class="nav-link" href="projects/projects.html">Projects</a>
</li>
</ul>
<span class="navbar-text">
<a class="nav-link" href="index.html"><img style="float: right;" width="10%" src="img/image.img"></a>
</span>
</div>
</nav>
</body>
</html>
But be careful. 3.4.1 and 4.3.1 are actually different versions :) Good luck with that!
I am unfamiliar with javascript but I would like to change the color of my navbar icon. Right now, my navbar is black color with white navbar icon. When I scroll the page, my navbar changes background color to white and the font color changes to black. However, the navbar icon is still white so it disappears when I scroll the page. I can fix this by changing the navbar class from 'navbar-dark' to 'navbar-light'. However, I am not sure how to do this using javascript.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8" />
<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>
<style>
.navbar{
background-color: black !important;
}
div.navbar.scrolled {
background-color: white !important;
}
div.navbar.scrolled .navbar-brand{
color: black !important;
}
</style>
</head>
<body>
<header>
<div class="container-fluid">
<div class="navbar navbar-dark navbar-expand-md fixed-top">
<a class="navbar-brand" href="#">Brand</a>
<button
class="navbar-toggler"
data-toggle="collapse"
data-target="#uniqueIdentifier"
>
<span class="navbar-toggler-icon"></span>
</button>
<div id="uniqueIdentifier" 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="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Skills</a>
</li>
</ul>
</div>
</div>
</div>
<div class="content" style="height:200vh;"></div>
</header>
<script>
$(window).scroll(function() {
$("div.navbar").toggleClass('navbar-dark');
$("div.navbar").toggleClass('navbar-light');
$("div.navbar").toggleClass("scrolled", $(this).scrollTop() > 200);
});
</script>
</body>
</html>
You can toggle dark and light based on the scroll possition
$("div.navbar").toggleClass('navbar-light', $(this).scrollTop() > 200).toggleClass('navbar-dark', $(this).scrollTop() <= 200);
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8" />
<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>
<style>
.navbar{
background-color: black !important;
}
div.navbar.scrolled {
background-color: white !important;
}
div.navbar.scrolled .navbar-brand{
color: black !important;
}
</style>
</head>
<body>
<header>
<div class="container-fluid">
<div class="navbar navbar-dark navbar-expand-md fixed-top">
<a class="navbar-brand" href="#">Brand</a>
<button
class="navbar-toggler"
data-toggle="collapse"
data-target="#uniqueIdentifier"
>
<span class="navbar-toggler-icon"></span>
</button>
<div id="uniqueIdentifier" 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="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Skills</a>
</li>
</ul>
</div>
</div>
</div>
<div class="content" style="height:200vh;"></div>
</header>
<script>
$(window).scroll(function() {
$("div.navbar").toggleClass("scrolled", $(this).scrollTop() > 200);
$("div.navbar").toggleClass('navbar-light', $(this).scrollTop() > 200).toggleClass('navbar-dark', $(this).scrollTop() <= 200);
});
</script>
</body>
</html>
what is wrong with this code before all my hair fallout.
<img src="logo.png" alt="Ask a local" class="img-fluid w-35">"The most trusted local community"
<button class=" navbar-toggler" type="button" data-toggle="collapse" data-target="#myTogglerNav" aria-controls="myTogglerNav" aria-expanded="false" aria-label="Toggle navigation" id="zeropadding">
<span class="d-md-none" id="zeropadding"><i class="fas fa-align-left " >Menu </i></span> </button></div> <!-- A grey horizontal navbar that becomes vertical on small screens -->
<nav class="navbar navbar-expand-sm bg-light"> <!-- Links --> <ul class="navbar-nav">
<li class="nav-item"> <a class="nav-link" href="top10questions.php">Latest questions</a> </li>
<li class="nav-item"> <a class="nav-link" href="contactus.php">Contact Us</a> </li>
</ul></nav>
Here's a responsive Bootstrap collapsible navigation bar.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li class="nav-item"> <a class="nav-link" href="top10questions.php">Latest questions</a> </li>
<li class="nav-item"> <a class="nav-link" href="contactus.php">Contact Us</a> </li>
</ul>
</ul>
</div>
</div>
</nav>
</body>
</html>
</body>
</html>
I'm sorry... but your code is really terrible! Same ID twice, </div> never open, text without tag... really terrible! (^_^;)
I do not know where to start... maybe it's better if you read the bootstrap documentation http://getbootstrap.com/docs/4.1/getting-started/introduction/.
Now your menu works (I cleaned your HTML as best as I could), but you have to use HTML&CSS better because as it is, it is not a good work, sorry.
BTW, hope it helps you to improve your web designer techniques.
Cheers :)
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<nav class="navbar navbar-expand-lg">
<a href="index.php"><img src="logo.png" alt="Ask a local" class="img-fluid w-35">
"The most trusted local community"</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#myTogglerNav" id="zeropadding">
<i class="fas fa-align-left">Menu</i>
</button>
<div class="collapse navbar-collapse bg-light" id="myTogglerNav"> <!-- Links -->
<ul class="navbar-nav">
<li class="nav-item"> <a class="nav-link" href="top10questions.php">Latest questions</a> </li>
<li class="nav-item"> <a class="nav-link" href="contactus.php">Contact Us</a> </li>
</ul>
</div>
</nav>
I need a menu, html+jquery where it must show all the menu in normal mode, when i go to responsive more only some menu must be visible and other menu must be under more where it must be generated automatically similar to this link
https://www.amazon.com/stores/Ozeri/node/2598028011
Suppose if zoom in or zoom out of browser I need to add some menu automatically to that more option generated.
PS: [If link does not work please copy paste it]
Check My source Code
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Ozeri :: Ozeri Pro II Digital Kitchen Scale with Removable Glass Platform and Countdown Kitchen Timer (1 g to 12 lbs Capacity) </title>
<link rel="icon" type="image/ico" href="img/favicon.png" />
<!-- web-fonts -->
<link href="http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,700italic,300,400,700" rel="stylesheet" type="text/css">
<!-- font-awesome -->
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet">
<!-- Bootstrap -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<!-- Style CSS -->
<link href="css/ozeri-style.css" rel="stylesheet">
<link href="css/quick-view-img.css" rel="stylesheet">
<!-- slider -->
<link href="css/thumbs2.css" rel="stylesheet" />
<link href="css/thumbnail-slider.css" rel="stylesheet" />
<script src="css/thumbnail-slider.js" type="text/javascript"></script>
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<style>
.popup-big-img { width: auto; height: 500px; text-align: center}
.popup-big-img img{ width: auto; height: 100%; }
.popup-small-img{width: 50px;height: 50px; margin:5px;float: left; border: 2px solid #ccc;}
.popup-small-img img{ width: 100%; height: 100%}
.modal-dialog.pro-popup{ width: 95%}
.popup-small-img:hover{border: 2px solid #004b91; cursor: pointer}
.popup-small-img-test{border: 2px solid #ff8f00;}
.modal-header.no-border{ border: none;}
h4.modal-title{ color: #000; font-size: 16px; font-weight: 400; margin: 10px 5px}
.a-row {margin-left: 0px; margin-top: 0px;margin-right: 10px;float: left; }
.color-select{float: left; width: 70%}
.a-form-label {font-weight: 700;}
.manufacturer img{ text-align: center; display: inline-table;}
.product-color{ width: 100%;}
</style>
</head>
<body>
<div class="container-inner">
<nav class="navbar m-menu navbar-default">
<div class="container-fluid container-inner">
<div class="search-input hidden-mobile" style="display: none">
<input class="form-control top-search-box" placeholder="Search" aria-label="Search" type="text">
</div>
<!-- Brand and toggle get grouped for better mobile display -->
<!--<a class="navbar-brand" href="index.html"><img src="img/logo.png" alt=""></a>-->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="#navbar-collapse-1">
<ul class="nav navbar-nav navbar-left main-nav">
<li>Barware</li>
<li class="dropdown dropdown-toggle"><a href="category.html" data-toggle="dropdown" title="Glassware">Glassware <span><i class="fa fa-angle-down"></i>
</span></a>
<ul class="dropdown-menu">
<li>Moderna Artisan Glassware</li>
<li>Serafina Artisan Glassware</li>
<li>Curva Artisan Glassware</li>
</ul>
</li>
<li>Kitchen Scales</li>
<li>Kitchen Accessories</li>
<li class="dropdown dropdown-toggle">
<a href="category.html" data-toggle="dropdown" title="Cookware">Cookware <span><i class="fa fa-angle-down"></i>
</span></a>
<ul class="dropdown-menu">
<li>Ceramic Earth Series</li>
<li>Stone Earth Series</li>
<li>Stainless Steel Series</li>
<li>Professional Series</li>
</ul>
</li>
<li>Oscillatting Fans</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
More <b class="caret"></b>
<ul class="dropdown-menu dropdown-menu-right">
<li>Bath and Personal Care</li>
<li>Novelty</li>
</ul>
</li>
</ul>
</div>
<!-- .navbar-collapse -->
</div>
</nav>
</div>
</body>
</html>
try to
$(document).ready(function(){
var item_width = $('#menu_ul li').width();
var item_count = ($( "#menu_ul li" ).length);
var nav_width_og = $('.menu').width();
var nav_width = $('.menu').width();
if ((item_width*(item_count+1)) > nav_width ){
$('#more').appendTo('body');
$('#more').hide();
}
for(var i = 0; i < item_count; i++) {
nav_width = $('.menu').width();
item_width = $('#menu_ul li').width();
item_count = ($( "#menu_ul li" ).length);
if (nav_width<(item_width*item_count)){
$('#menu_ul li').not('#more').last().appendTo($('.overflow'));
$('#more').appendTo($('#menu_ul'));
$('#more').show();
}
}
$(window).resize(function(){
nav_width = $('.menu').width();
item_width = $('#menu_ul li').width();
item_count = ($( "#menu_ul li" ).length);
if (nav_width<(item_width*item_count)){
$('#menu_ul li').not('#more').last().appendTo($('.overflow'));
$('#more').appendTo($('#menu_ul'));
$('#more').show();
}
if (nav_width>(item_width*item_count)+(item_width-1)){
$('.overflow li').last().appendTo($('#menu_ul'));
$('#more').appendTo($('#menu_ul'));
}
if (nav_width == nav_width_og ){
$('#more').appendTo('body');
$('#more').hide();
}
});
$('#more').click(function(){
$('.overflow').slideToggle();
});
});
.menu{
position:relative;
max-width:600px;
margin:0 auto;
background:red;
font-size:0px;
}
ul{
list-style:none;
padding:0;
}
li{
display:inline-block;
background:green;
font-size:16px;
width:100px;
text-align:center;
}
.overflow{
position:absolute;
right:0;
display:none;
}
.overflow li{
display:block;
background:yellow;
}
#more{
background:blue;
display:none;
float:right;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="menu">
<ul id="menu_ul">
<li>item1</li>
<li>item2</li>
<li>item3</li>
<li>item4</li>
<li>item5</li>
<li>item6</li>
<li>item7</li>
<li>item8</li>
<li>item9</li>
<li>item10</li>
<li>item11</li>
<li>item12</li>
<li id="more">more</li>
</ul>
<ul class="overflow">
</ul>
</div>
As like in your given amazon link, it has a menu named 'MORE'. 'MORE' has sub-menu 'Novelty' while in large screen/desktop.
If it goes in smaller screen like for mobile/tab screen sizes, if we click on 'MORE', a modal menu bar comes.
I think, you want like this.
To do this, you will need JS/jQuery.
Step 1: for large screen/desktop sizes, just CSS dropdown menu is OK. Just have that 'MORE' with sub-menu using ul/li, you might be using bootstarp.
Step 2: You can have a hidden div with a modal(bootstarp modal or any other modal) having menu items inside and a 'close' button to close the modal. On clcik 'MORE' link, just call the modal by JS.
You need to check smaller screen sizes by JS. Bootstap modal has both HTML tag attribute way or some methods to call and close.
bootstrap 4 modal doc: https://getbootstrap.com/docs/4.0/components/modal/
You can style that modal by CSS as you need. There are many jQuery modal plugin or can use bootstrap modal.
As you have asked for any dropdown for item2 and others.
this will work:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
<!-- Brand -->
<!-- Links -->
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Barware</a>
</li>
<!-- Dropdown -->
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown">
Glassware</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Link 1</a>
<a class="dropdown-item" href="#">Link 2</a>
<a class="dropdown-item" href="#">Link 3</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Kitchen Scales</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Kitchen Accessories</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown">
cookware<div class="dropdown-menu">
<a class="dropdown-item" href="#">Link 1</a>
<a class="dropdown-item" href="#">Link 2</a>
<a class="dropdown-item" href="#">Link 3</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Osciallating Fans</a>
</li>
</ul>
</nav>
<br>
</div>
</body>
</html>
https://jsfiddle.net/sugandhnikhil/kdbnq2tx/
I'm trying to create a navbar using bootstrap that collapses at a certain viewport width. Now, what I'd like to see is that if the navbar is collapsed the navbar-brand disappears and the current active nav item (e.g 'Home', 'About' etc) will be visible on the left, thus enabling the visitor to see at which page they are.
I'm a total bootstrap noob, I had sort of expected to see a css class to be added when the navbar is collapsed/expanded but it doesn't work that way.
<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">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Project name</a>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="../../assets/js/vendor/jquery.min.js"><\/script>')</script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</body></html>
Not exactly "out of the box", but a little CSS will work with Bootstrap 4 (no jquery or dup markup)...
https://www.codeply.com/go/5T4icATKjl
This overrides the navbar collapse behavior to use visibility instead of display. This way we can control display of the active nav-item.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" ></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<style>
.navbar .collapse {
visibility: hidden;
display: block;
}
.navbar .collapse.show {
visibility: visible;
}
#media (max-width: 767px) {
.navbar-nav .nav-link.active {
visibility: visible;
}
.collapsing {
transition: all 0.35s ease;
height: 40px !important;
}
.collapse:not(.show) .navbar-nav .nav-item:not(.active) {
display: none;
}
}
#media (min-width: 768px) {
.navbar .collapse .navbar-nav .nav-item {
visibility: visible;
}
}
</style>
<body>
<nav class="navbar navbar-expand-md fixed-top navbar-dark bg-dark">
<div class="container">
<div class="collapse" id="navbar1">
<div class="navbar-nav flex-md-row">
<a class="nav-item navbar-brand" href="#">Project name</a>
<a class="nav-item nav-link" href="#">Home</a>
<a class="nav-item nav-link" href="#">About</a>
<a class="nav-item nav-link active" href="#">Contact</a>
</div>
</div>
<button class="navbar-toggler align-self-start" type="button" data-toggle="collapse" data-target="#navbar1">
<span class="navbar-toggler-icon"></span>
</button>
</div>
</nav>
</body>
Notice the #media queries go along with the navbar-expand-md breakpoint of 768px. You can change that to use a diffferent breakpoint if needed.
navbar-expand-sm - 576px
navbar-expand-lg - 992px
navbar-expand-xl - 1200px
There is another solution using duplicate navbar-nav links, but that would require extra markup and I think the CSS only solution above is cleaner.
Have a try of this solution. Although this needs to be advanced to make able nav menu links be clickable.
<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">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Project name</a>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="../../assets/js/vendor/jquery.min.js"><\/script>')</script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script>
$ = window.jQuery
$(document).ready(function(){
$('.navbar-brand').attr('data-brand',$('.navbar-brand').text())
var txtMenu = $('#navbar ul.navbar-nav .active').text();
$('.navbar-brand').text(txtMenu)
$('nav.navbar').on('hide.bs.collapse', function(){
var txtM = $('#navbar ul.navbar-nav .active').text();
$('.navbar-brand').text(txtM)
})
$('nav.navbar').on('show.bs.collapse', function(){
var txtB = $('.navbar-brand').attr('data-brand');
$('.navbar-brand').text(txtB)
})
})
</script>
</body></html>
Not available directly in bootstrap but you can write a small Javascript code here:
function displayActiveMenu() {
if ($(window).width() >= 768) {
// do nothing if we are not collapsed
return;
}
var element = $('li.active', '#navbar').clone();
$('#active-navbar').html(element);
}
displayActiveMenu(); // for the first time
$(window).on('resize', displayActiveMenu);
#media (max-width: 767px) {
#active-navbar {
float: right;
margin: 0;
}
#active-navbar>li>a {
padding-top: 15px;
padding-bottom: 15px;
}
}
<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">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<!-- this is the new element -->
<ul class="nav navbar-nav visible-xs" id="active-navbar">
</ul>
<a class="navbar-brand" href="#">Project name</a>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
</nav>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
window.jQuery || document.write('<script src="../../assets/js/vendor/jquery.min.js"><\/script>')
</script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</body>
</html>