Menu Design - Add More menu option

Menu Design - Add More menu option - javascript

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/

Related

Bootstrap v5.0 'container-lg' is not working properly

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;
}
}

Why isn't my Hamburger menu example code working?

I'm trying to get this hamburger menu to work
Here is the example code source
https://www.jqueryscript.net/menu/responsive-multi-level-hamburger-nav.html
I'm using Visual Studio 2019 and am not sure why this is giving me so much trouble? The menu either is expanded completely as text at code launch or it is 3 lines that do not respond when I click on it. The example seems pretty simplistic, but I haven't been able to get it to work like shown in the example.
[
$(document).ready(function () {
//alert("Menu");
var display_width = $(window).width();
var hamburger = $("#hambuger_menu");
var menu = $("#menubody");
$(hamburger).click(function (e) {
menu.toggleClass("open");
hamburger.toggleClass("open");
});
$(".menu_body__item_wrapper li.has_child").each(function (index) {
$(this).click(function (event) {
$('.sub-menu').eq(index).slideToggle();
event.preventDefault();
event.stopImmediatePropagation();
});
$('.sub-menu').click(function (e) {
e.stopPropagation();
e.stopImmediatePropagation();
})
})
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<style>
body {
/*background-image: url('../../images/grandOpening1.jpeg');*/
}
/*<script type="text/javascript" >
$(document).ready(function() {
alert("ready");
});
</script >*/
/*<script type="text/javascript" src="/wherever/whatever.js" / >*/
</style>
<link href="~/Content/bootstrap.css" rel="stylesheet" />
<link href="~/Content/bootstrap.min.css" rel="stylesheet" />
<link href="~/Content/main.css" rel="stylesheet" />
<link href="~/Content/Site.css" rel="stylesheet" />
<link href="~/Content/style.css" rel="stylesheet" />
<script src="/Scripts/modernizr-2.8.3.js"></script>
<div class="humburger" id="hambuger_menu">
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
</div>
<section class="menu_body" id="menubody">
<div class="menu_body__item_wrapper">
<!-- menu list-->
<ul class="menu_list">
<li>Home</li>
<!-- have submenu-->
<li class="has_child">
About
<ul class="sub-menu">
<li>Who We Are</li>
<li>Managment</li>
</ul>
</li>
<!-- have submenu-->
<li class="has_child">
Projects
<ul class="sub-menu">
<li>Ongoing</li>
<li>Complete</li>
</ul>
</li>
<li>Brochure</li>
<li>FAQ</li>
<li>Contact Us</li>
</ul>
</div>
</section>
#*<script src="/path/to/cdn/jquery.min.js"></script>*#
<script src="~/Scripts/jquery-3.4.1.min.js"></script>
<script src="~/Scripts/jquery-3.4.1.js"></script>
<script src="~/Scripts/bootstrap.js"></script>
<script src="~/Scripts/JavaScript.js"></script>
#*<div class="jumbotron">
<h1>ASP.NET</h1>
<p class="lead">ASP.NET is a free web framework for building great Web sites and Web applications using HTML, CSS and JavaScript.</p>
<p>Learn more »</p>
</div>

For anyone else that is having a hard time getting this to work in a project, here is what I did to get it to work in Visual Studio 2019, you'll of course need to match my file/folder structure for the links and scripts, or alter those to match your own file/folder structure inside your project.
The index.cshtml file contents
<!doctype html>
<html class="no-js" lang="">
<head>
<meta charset="utf-8">
<title>Responsive Multi-level Hamburger Nav Example</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://www.jqueryscript.net/css/jquerysctipttop.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="css/style.css">
<link href="~/Content/style.css" rel="stylesheet" />
<link href="~/Content/Site.css" rel="stylesheet" />
<link href="~/Content/bootstrap.css" rel="stylesheet" />
<link href="~/Content/bootstrap.min.css" rel="stylesheet" />
<style>
body {
background: #f7f7f7;
}
.lead {
font-size: 1.5rem;
font-weight: 300;
}
.container {
margin: 0 auto;
max-width: 960px;
text-align: center;
}
</style>
</head>
<body>
<div class="container">
<h1>Responsive Multi-level Hamburger Nav Example</h1>
<p class="lead">A responsive, mobile-friendly, multi-level hamburger navigation system (also called offcanvas menu) written in JavaScript (jQuery) and CSS/CSS3.</p>
</div>
<!-- hamburger section-->
<div class="humburger" id="hambuger_menu">
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
</div>
<!--main menu body-->
<section class="menu_body" id="menubody">
<div class="menu_body__item_wrapper">
<!-- menu list-->
<ul class="menu_list">
<li>Home</li>
<!-- have submenu-->
<li class="has_child">
About
<ul class="sub-menu">
<li>Who We Are</li>
<li>Managment</li>
</ul>
</li>
<!-- have submenu-->
<li class="has_child">
Projects
<ul class="sub-menu">
<li>Ongoing</li>
<li>Complete</li>
</ul>
</li>
<li>Brochure</li>
<li>FAQ</li>
<li>Contact Us</li>
</ul>
</div>
</section>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="~/Scripts/jquery-3.4.1.min.js"></script>
<script src="~/Scripts/jquery-3.4.1.js"></script>
<script src="~/Scripts/modernizr-2.8.3.js"></script>
<script src="~/Scripts/JavaScript.js"></script>
</body>
</html>
And in the local javascript file
$(document).ready(function () {
//alert("Menu");
console.log("in (document).ready function");
var display_width = $(window).width();
var hamburger = $("#hambuger_menu");
var menu = $("#menubody");
$(hamburger).click(function (e) {
menu.toggleClass("open");
hamburger.toggleClass("open");
});
$(".menu_body__item_wrapper li.has_child").each(function (index) {
$(this).click(function (event) {
$('.sub-menu').eq(index).slideToggle();
event.preventDefault();
event.stopImmediatePropagation();
});
$('.sub-menu').click(function (e) {
e.stopPropagation();
e.stopImmediatePropagation();
})
})
});

Grab this, it may help.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<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">
<ul class="navbar-nav">
<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="#">Test 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Test 2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Test 3</a>
</li>
</ul>
</div>
</nav>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" crossorigin="anonymous"></script>

How to change class name using js to change navbar icon color?

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>

How to remove the white circling box upon clicking in Firefox on Bootstrap navbar

I have the following code:
.navbar.navbar-inverse .navbar-brand {
color: #fff;
}
.navbar.navbar-inverse .navbar-nav > li > a {
color: #fff;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Case</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<div>
<ul class="nav navbar-nav">
<li class="active">About
</li>
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1 <span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Help
</li>
<li><a href="#">Contact/a>
</li>
</ul>
</li>
<li>Page 2
</li>
<li>Page 3
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><span class="glyphicon glyphicon-user"></span> Sign Up
</li>
<li><span class="glyphicon glyphicon-log-in"></span> Login
</li>
</ul>
</div>
</div>
</nav>
<div class="container">
<h3>Right Aligned Navbar</h3>
<p>some text.</p>
</div>
</body>
</html>
Now if you execute the above code in Firefox and click on About. You'll see something like this:
How can I remove the white circling box?
On Safari or Chrome there is no issue.

This is caused by the default Bootstrap CSS rule:
a:focus {
outline: thin dotted;
outline-offset: -2px;
}
You need to set outline: 0 on focus. If you want to remove it specifically on the navbar item, you can use the code in the snippet.
Otherwise, overwrite it for all the links with a:focus { outline: 0 none; } Check that the custom CSS priority order is higher i.e. placed after Bootstrap file.
.navbar.navbar-inverse .navbar-brand {
color: #fff;
}
.navbar.navbar-inverse .navbar-nav > li > a {
color: #fff;
}
/* Added code */
.navbar-inverse .navbar-nav > .active > a:focus {
outline: 0;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Case</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<div>
<ul class="nav navbar-nav">
<li class="active">About
</li>
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1 <span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Help
</li>
<li><a href="#">Contact/a>
</li>
</ul>
</li>
<li>Page 2
</li>
<li>Page 3
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><span class="glyphicon glyphicon-user"></span> Sign Up
</li>
<li><span class="glyphicon glyphicon-log-in"></span> Login
</li>
</ul>
</div>
</div>
</nav>
<div class="container">
<h3>Right Aligned Navbar</h3>
<p>some text.</p>
</div>
</body>
</html>

Dotted borders around links are an accessibility feature most browsers
have by default. It's for users who must or choose to navigate by
keyboard, there is a visual style applied to those links when "tabbed"
to. These borders also show up when the link is clicked (in it's
"active" state), and can be an eyesore depending on the design
(especially when using something like CSS image replacement, the
borders span the length of the screen).
To remove do this:
FIREFOX
input::-moz-focus-inner {
border: 0;
}
FOR ALL
a, a:hover, a:active, a:focus {
outline:0;
}

Bootstrap dropdown will not respond

Enclosed is the code for the index.html I am using to build a personal website. I am experimenting with bootstrap and am not well versed in how it works. I have encountered a problem which after much research I have not been able to solve thus my posting it here. I am using a bootstrap navbar with links and dropdowns, the links work, but the dropdowns do not open when they are clicked on, they plain do not respond. what is strange is that they were working, but somehow I have done something and now they don't. Any guidance would be really helpful. What am I doing wrong?
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>Ryan Pace Sloan</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<script>
$('.dropdown-toggle').dropdown()
</script>
<style>
body{
background: #0000ff url('blue-texture-circle.jpg') no-repeat top left;
}
#name{
color: whitesmoke;
font-size: 65px;
margin-left: 25px;
}
#starImg{
color: gold; /*#ccddff;*/
font-size: 45px;
}
#imgDiv{
border-radius: 100%;
background-color: lightblue;
height: 300px;
width: 350px;
margin-top: 77px;
margin-left: 777px;
border: 2px solid cadetblue;
}
#imgDiv img {
border-radius: 100%;
height: 280px;
width: 330px;
margin: 7px 7px 10px 10px;
padding: 0px;
}
#goldA{
color: gold;
margin-top: 70px;
margin-left: 555px;
}
</style>
</head>
<body>
<header>
<nav class="navbar navbar-inverse" role="navigation">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-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>
<a class="navbar-brand" href="#"><strong id="starImg">&ast;</strong></a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse bs-example-js-navbar-collapse" id="collapseNavBar">
<ul class="nav navbar-nav">
<li class="active"><a href="https://github.com/ryanpsloan" target="_blank">>
GitHub<span class="sr-only">(current)</span></a></li>
<li><a href="https://www.linkedin.com/profile/view?id=85723107&trk=spm_pic" target="_blank">>
LinkedIn</a></li>
<li>>Resume</li>
<li>>Location</li>
<li>>WebGL &starf;</li>
<li class="dropdown">
<a id="portfolio" href="#" class="dropdown-toggle" data-toggle="dropdown" role="button"
aria-haspopup="true" aria-expanded="false">
Web Dev Portfolio <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu" aria-labelledby="portfolio">
<li role="presentation"><a role="menuitem" tabindex ="-1"
href="http://www.easyconversiontools.com">Easy Conversion
Tools</a></li>
<li role="presentation" class="divider"></li>
<li role="presentation"><a role="menuitem"
tabindex="-1" href="http://www.unitydictionary.info">Unity
Turkish English Dictionary</a></li>
<li role="presentation" class="divider"></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="http://www.przm-air.com">PRZM
Air</a></li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>>Contact</li>
<li class="dropdown">
<a id="tweetDrop" href="#" class="dropdown-toggle" data-toggle="dropdown"
aria-haspopup="true" role="button"
aria-expanded="false">Tweets #ryanpacesloan <span class="caret"></span> </a>
<ul class="dropdown-menu" role="menu" aria-labelledby="tweetDrop">
<li role="presentation"><a role="menuitem" tabindex="-1" class="twitter-timeline"
href="https://twitter.com/ryanpacesloan"
data-widget-id="536299887302701056"></a>
<script>
!function(d,s,id){
var js,
fjs=d.getElementsByTagName(s)[0],
p=/^http:/.test(d.location)?'http':'https';
if(!d.getElementById(id))
{
js=d.createElement(s);
js.id=id;
js.src=p+"://platform.twitter.com/widgets.js";
fjs.parentNode.insertBefore(js,fjs);
}
}
(document,"script","twitter-wjs");
</script>
</li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<h1 id="name">Ryan Pace Sloan</h1>
</header>
<div id="centerDiv">
<div id="imgDiv">
<img src="ryanpace.jpg">
</div>
</div>
<footer>
<div id="goldA">
© Gold Asterisk 2014
</div>
</footer>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

Please be sure to point jquery js file. Because, bootstrap needs jquery. Add this before bootstrap js.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Develop Reference

JavaScript is the programming language of the Web.

Menu Design - Add More menu option - javascript

Related

Bootstrap v5.0 'container-lg' is not working properly

Why isn't my Hamburger menu example code working?

How to change class name using js to change navbar icon color?

How to remove the white circling box upon clicking in Firefox on Bootstrap navbar

Bootstrap dropdown will not respond

Categories

Resources