i am trying to figure out how i can make my sidecart to close when i click outside of it, here is my scirpt:
const toggler = document.getElementById('menu-toggle');
const cartWrapper = document.getElementById('wrapper');
var crossButton = document.getElementById('closeCart');
// Displaying Menu Cart
document.addEventListener('DOMContentLoaded', () => {
toggler.addEventListener('click', toggleCart);
crossButton.addEventListener('click',closeCart);
function toggleCart(){
cartWrapper.classList.toggle('menuDisplayed');
cartWrapper.classList.toggle('menuDisplayedBgColor');
}
function closeCart(){
cartWrapper.classList.toggle('menuDisplayed');
cartWrapper.classList.toggle('menuDisplayedBgColor');
}
});
toggler is button that opens sidecart
cartWrapper is the sidecart
and crossButton the cross button that close the sidecart
Here is my sidecart:
If you want more information about my code i would appreciate it if you tell me, Thank you!
My html code:
<!-- Sidebar Cart-->
<div id="wrapper">
<!-- Sidebar -->
<div id="sidebar-wrapper">
<div class="container">
<div class="row">
<div class="col-md-6 mt-auto titleCart">
<h2 class="titleText">YOUR CART</h2>
</div>
<div class="col-md-2" style="left:30%">
<div class="crossIcon" id="closeCart">
<span class="iconify closeIcon" data-icon="zmdi:close"></span>
</div>
</div>
</div>
</div>
<ul class="sidebar-nav">
<li class="cart-item">
<div class="cart-item-img">
<img src="imgProducts/guitar1.jpg" alt="">
</div>
<div class="cart-item-txt">
<a class = "cart-item-name" href="#">Miyiagi Guitar</a>
<span class="cart-item-price-qty">
1 x 16.00
</span>
</div>
<button class="button deleteBtn"><i class="fa fa-trash-o" style="position:relative;font-size:24px; left:0;"></i></button>
</li>
</ul>
<div class="col-md-12" style="margin-top:4em;">
<hr class="dividerLineCart">
<div class="cart-total">
<h2 class="cartTotal">Total: $0.00</h2>
</div>
</div>
<div class="col-md-12 d-flex buttonsCartDiv">
View Cart
Check Out
</div>
</div>
</div>
My navbar that includes the button that toggle my sidecart:
<nav class="navbar fixed-top navbar-expand-md py-3 navbar-dark" style="background-color: rgba(41, 56, 61,0.65);font-family: Helvetica Neue,Helvetica,Arial,sans-serif;">
<a class="navbar-brand" href="index.php">
<img src="Images/charman logo white-trans.png" alt="Logo" style="height:50px;">
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse justify-content-end" id="collapsibleNavbar">
<ul class="navbar-nav">
<li><hr class="dropdown-divider"></li>
<li class="nav-item">
<a class="nav-link" href="index.php">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="shop.php">Shop</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link" href="guitars.php" id="navbarDropdownMenuLink" role="button" aria-haspopup="true" aria-expanded="false">
Guitars
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="electrical-type.php">Electrical</a>
<a class="dropdown-item" href="acoustic-type.php">Acoustic</a>
<a class="dropdown-item" href="basses-type.php">Basses</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="contact.php">Contact</a>
</li>
<li class="nav-item">
<a class="nav-link" id="has-divider" href="#" data-target="#modalRegister" data-toggle="modal">Sign Up
<span class ="glyphicon glyphicon-user" aria-hidden="true" style="float:left;padding-right:0.4em;"></span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" id="has-divider2" href="#" data-target="#modalLogin" data-toggle="modal">Login
<span class="glyphicon glyphicon-log-in" aria-hidden="true" style="float:left;padding-right:0.4em;"></span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" id="menu-toggle"><span id="cart-text">Cart</span>
<span class="glyphicon glyphicon-shopping-cart" style="transform: scaleX(-1)" aria-hidden="true"></span>
<span class="badge badge-notify">0</span>
</a>
</li>
</ul>
</div>
</nav>
Well you can just click EventListener to the elements opening outside the sideCart.... ! Btw one question here where you want to get clicked.... you just need to add click event listener outside of this cart thing.. and you are pretty much good to go... !
if (cartWrapper.hasClass("menuDisplayed")) {
$("body").on("click", function() {
closeCart();
});
cartWrapper.on("click", function(event) {
event.stopPropagation();
});
});
Hope this Code will help you.
<script>
let sidebar = document.getElementById('sidebar-wrapper');
let navbarTogglerButton = document.getElementById('toggler-button');
window.document.addEventListener('click', (e) => {
let clickedArea = e.path[e.path.length-6]
if ( clickedArea == sidebar || e.path[0] == navbarTogglerButton) {
cartWrapper.classList.toggle('menuDisplayed');
cartWrapper.classList.toggle('menuDisplayedBgColor');
}
else {
cartWrapper.classList.toggle('menuDisplayed');
cartWrapper.classList.toggle('menuDisplayedBgColor');
}
});
</script>
Related
I want to draw dynamic sidebar menu data from database using AJAX in the adminlte 3 dashboard with bootstrap 4 dashboard. When I loaded sidebar menu data dynamically by using AJAX, sidebar open or collapse not working.My JSFiddle URL is given below. When static data push on '.sidebar' class without ajax, menu open/hide working. But using ajax call menu open/hide not working.
$(document).ready(function(){
var url = "";
$.ajax({
url: url,
}).done(function(resp){
//retrive data
var ret = '<nav class="mt-2"><ul class="nav nav-pills nav-sidebar flex-column" data-widget="treeview" role="menu" data-accordion="true"><li class="nav-item"><i class="nav-icon fas fas fa-user"></i><p>Admin<i class="right fas fa-angle-left"></i></p><ul class="nav nav-treeview"><li class="nav-item"><i class="far fa-circle nav-icon"></i><p>Rahim</p></li></ul><ul class="nav nav-treeview"><li class="nav-item"><i class="far fa-circle nav-icon"></i><p>Test</p></li></ul></li></ul></nav>';
$('.sidebar').html(ret);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body class="sidebar-mini sidebar-closed sidebar-collapse" style="height: auto;">
<!-- Site wrapper -->
<div class="wrapper">
<!-- Navbar -->
<nav class="main-header navbar navbar-expand navbar-primary navbar-dark">
<!-- Left navbar links -->
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" data-widget="pushmenu" href="#" role="button"><i class="fas fa-bars"></i></a>
</li>
<!--
<li class="nav-item d-none d-sm-inline-block">
Home
</li>
<li class="nav-item d-none d-sm-inline-block">
Contact
</li>
-->
</ul>
<!-- Right navbar links -->
<ul class="navbar-nav ml-auto">
<li class="nav-item dropdown user-menu">
<a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown">
<img src="public/images/login_man.png" class="user-image img-circle elevation-2" alt="User Image">
<span class="d-none d-md-inline">admin</span>
</a>
<ul class="dropdown-menu dropdown-menu-lg dropdown-menu-right">
<!-- Menu Footer-->
<li class="user-footer">
<!--Profile-->
Sign out
</li>
</ul>
</li>
<!--
<li class="nav-item">
<a class="nav-link" data-widget="fullscreen" href="#" role="button">
<i class="fas fa-expand-arrows-alt"></i>
</a>
</li>
<li class="nav-item">
<a class="nav-link" data-widget="control-sidebar" data-slide="true" href="#" role="button">
<i class="fas fa-th-large"></i>
</a>
</li>
-->
</ul>
</nav>
<!-- /.navbar --><aside class="main-sidebar main-sidebar-custom sidebar-dark-primary elevation-4">
<a href="#" class="brand-link">
<i class="brand-image fas fa-tachometer-alt" style="opacity: .8"></i>
<span class="brand-text font-weight-light">Dashboard</span>
</a>
<div class="sidebar">
</div>
</aside>
<div class="container-fluid">
<div class="content-wrapper" style="min-height: 549px;">
</div>
</div>
</div>
</body>
Just put the code after success function and it will work.
$('[data-widget="treeview"]').Treeview('init');
I have been using CSS for multi-column view styles for mega menu. Right now the menu is showing the submenu items in multi-column but the issue I am facing is those submenu items get started in new column although there exists sufficient space in the earlier column.
i.e. For example, I have 31 submenu options and per column 12 submenu items can be listed. Hence it should display like 12 menu items in column 1, another 12 in column 2 and rest in column 3. But, due to some unknown reason. It shows only 10 sub menu items in columns 2 and rest in column 3.
You can review the same via image preview using the below link :
http://prntscr.com/oe22lu
We worked on to implement few CSS scripts to make the submenu items visible as we needed.
<div class="main-megamenu notmobile">
<ul class="navbar-nav">
<li class="nav-item dropdown" data-id="23">
<a class="nav-link dropdown-toggle" id="navbarDropdownMenuLink" aria-haspopup="true" aria-expanded="false" href="/easy-servo-products" role="button">
<span class="category-name">EASY SERVO PRODUCTS</span>
</a>
<div class="catlevel-1">
<div class="dropdown-menu">
<div class="nav-items menu-options">
<div class="nav-item dropdown" data-id="24">
<a class="nav-link dropdown-toggle" id="navbarDropdownMenuLink" aria-haspopup="true" aria-expanded="false" href="/easy-servo-motors" role="button">
<span class="category-name">Easy Servo Motors</span>
</a>
</div>
<div class="nav-item dropdown" data-id="40">
<a class="nav-link dropdown-toggle" id="navbarDropdownMenuLink" aria-haspopup="true" aria-expanded="false" href="/2-phase" role="button">
<span class="category-name">2 Phase</span>
</a>
</div>
<div class="nav-item" data-id="42">
<a class="nav-link" href="/hybrid-stepper-motor-2">
<span class="category-name">Hybrid Stepper Motor</span>
</a>
</div>
</div>
<div class="nav-items menu-options-details">
<div class="submenu-details-wrapper" id="submenu-details-wrapper-24" style="min-height: auto;">
<div class="submenu-details" id="submenu-details-24">
<div class="nav-item dropdown catlevel-2" data-id="25">
<a class="nav-link dropdown-toggle" href="/low-vdc-input">
<span class="category-name">Low VDC Input</span>
</a>
<div class="dropdown-menu-options catlevel-3" id="submenu-details-25">
<div class="nav-item" data-id="51">
<a class="nav-link" href="/2-phase-nema-14">
<span class="category-name">2 Phase NEMA 14</span>
</a>
</div>
<div class="nav-item" data-id="52">
<a class="nav-link" href="/2-phase-nema-16">
<span class="category-name">2 Phase NEMA 16</span>
</a>
</div>
<div class="nav-item" data-id="53">
<a class="nav-link" href="/vdc-or-transformer-input">
<span class="category-name">VDC or Transformer Input</span>
</a>
</div>
<div class="nav-item" data-id="54">
<a class="nav-link" href="/220230-vac-input">
<span class="category-name">220/230 VAC Input</span>
</a>
</div>
<div class="nav-item" data-id="61">
<a class="nav-link" href="/budge-stepper-drives">
<span class="category-name">Budge Stepper Drives</span>
</a>
</div>
<div class="nav-item" data-id="62">
<a class="nav-link" href="/motor-extension-cables">
<span class="category-name">Motor Extension Cables</span>
</a>
</div>
</div>
</div>
<div class="nav-item dropdown catlevel-2" data-id="27">
<a class="nav-link dropdown-toggle" href="/120-230-vac-input">
<span class="category-name">120 / 230 VAC Input</span>
</a>
<div class="dropdown-menu-options catlevel-3" id="submenu-details-27">
<div class="nav-item" data-id="57">
<a class="nav-link" href="/digital-stepper-drives">
<span class="category-name">Digital Stepper Drives</span>
</a>
</div>
<div class="nav-item" data-id="58">
<a class="nav-link" href="/classic-stepper-drives">
<span class="category-name">Classic Stepper Drives</span>
</a>
</div>
<div class="nav-item" data-id="59">
<a class="nav-link" href="/stepper-drive-modules">
<span class="category-name">Stepper Drive Modules</span>
</a>
</div>
<div class="nav-item" data-id="60">
<a class="nav-link" href="/servo-motors-2">
<span class="category-name">Servo Motors</span>
</a>
</div>
</div>
</div>
<div class="nav-item dropdown catlevel-2" data-id="47">
<a class="nav-link dropdown-toggle" href="/2-phase-2">
<span class="category-name">Easy Servo Drives</span>
</a>
<div class="dropdown-menu-options catlevel-3" id="submenu-details-47">
<div class="nav-item" data-id="1056">
<a class="nav-link" href="/brushless-servo-products">
<span class="category-name">Brushless Servo Products</span>
</a>
</div>
<div class="nav-item" data-id="1057">
<a class="nav-link" href="/brush-servo-products">
<span class="category-name">Brush Servo Products</span>
</a>
</div>
<div class="nav-item" data-id="1058">
<a class="nav-link" href="/unregulated-switching">
<span class="category-name">Unregulated Switching</span>
</a>
</div>
<div class="nav-item" data-id="1059">
<a class="nav-link" href="/motor-extension-cables-2">
<span class="category-name">Motor Extension Cables</span>
</a>
</div>
<div class="nav-item" data-id="1060">
<a class="nav-link" href="/advanced-digital-stepper-drives-2">
<span class="category-name">Advanced Digital Stepper Drives</span>
</a>
</div>
</div>
</div>
<div class="nav-item dropdown catlevel-2" data-id="48">
<a class="nav-link dropdown-toggle" href="/3-phase">
<span class="category-name">Digital Stepper Drives</span>
</a>
<div class="dropdown-menu-options catlevel-3" id="submenu-details-48">
<div class="nav-item" data-id="1061">
<a class="nav-link" href="/110120-vac-input">
<span class="category-name">110/120 VAC Input</span>
</a>
</div>
<div class="nav-item" data-id="1062">
<a class="nav-link" href="/bldc-servo-motors">
<span class="category-name">BLDC Servo Motors</span>
</a>
</div>
<div class="nav-item" data-id="1074">
<a class="nav-link" href="/unregulated-switching-4">
<span class="category-name">Unregulated Switching</span>
</a>
</div>
</div>
</div>
<div class="nav-item dropdown catlevel-2" data-id="49">
<a class="nav-link dropdown-toggle" href="/5-phase">
<span class="category-name">High Torque Stepper Motors</span>
</a>
<div class="dropdown-menu-options catlevel-3" id="submenu-details-49">
<div class="nav-item" data-id="1063">
<a class="nav-link" href="/motor-extension-cables-3">
<span class="category-name">Motor Extension Cables</span>
</a>
</div>
<div class="nav-item" data-id="1064">
<a class="nav-link" href="/unregulated-switching-2">
<span class="category-name">Unregulated Switching</span>
</a>
</div>
</div>
</div>
<div class="nav-item dropdown catlevel-2" data-id="50">
<a class="nav-link dropdown-toggle" href="/09">
<span class="category-name">0.9</span>
</a>
<div class="dropdown-menu-options catlevel-3" id="submenu-details-50">
<div class="nav-item" data-id="1065">
<a class="nav-link" href="/brush-servo-motors">
<span class="category-name">Brush Servo Motors</span>
</a>
</div>
</div>
</div>
<div class="nav-item dropdown catlevel-2" data-id="55">
<a class="nav-link dropdown-toggle" href="/advanced-digital-stepper-drives">
<span class="category-name">Advanced Digital Stepper Drives</span>
</a>
<div class="dropdown-menu-options catlevel-3" id="submenu-details-55">
<div class="nav-item" data-id="1066">
<a class="nav-link" href="/classic-stepper-drives-2">
<span class="category-name">Classic Stepper Drives</span>
</a>
</div>
</div>
</div>
<div class="nav-item dropdown catlevel-2" data-id="56">
<a class="nav-link dropdown-toggle" href="/integrated-easy-servo-motors">
<span class="category-name">Integrated Easy Servo Motors</span>
</a>
<div class="dropdown-menu-options catlevel-3" id="submenu-details-56">
<div class="nav-item" data-id="1067">
<a class="nav-link" href="/stepper-drives-with-oscillators">
<span class="category-name">Stepper Drives with Oscillators</span>
</a>
</div>
</div>
</div>
</div>
<div class="submenu-image" id="submenu-image-24">
<img src="../images/thumbs/000/0000233_easy-servo-motors_370.png">
</div>
</div>
<div class="submenu-details-wrapper" id="submenu-details-wrapper-40" style="min-height: auto;">
<div class="submenu-details" id="submenu-details-40" style="min-height: 217px;">
<div class="nav-item dropdown catlevel-2" data-id="41">
<a class="nav-link dropdown-toggle" href="/geared-motors-2">
<span class="category-name">Geared Motors</span>
</a>
<div class="dropdown-menu-options catlevel-3" id="submenu-details-41">
<div class="nav-item" data-id="1072">
<a class="nav-link" href="/110120-vac-input-2">
<span class="category-name">110/120 VAC Input</span>
</a>
</div>
<div class="nav-item" data-id="1073">
<a class="nav-link" href="/motor-extension-cables-4">
<span class="category-name">Motor Extension Cables</span>
</a>
</div>
<div class="nav-item" data-id="1075">
<a class="nav-link" href="/brush-servo-motors-2">
<span class="category-name">Brush Servo Motors</span>
</a>
</div>
</div>
</div>
<div class="nav-item" data-id="1068">
<a class="nav-link" href="/brushless-servo-products-2">
<span class="category-name">Brushless Servo Products</span>
</a>
</div>
<div class="nav-item" data-id="1069">
<a class="nav-link" href="/brushless-servo-products-3">
<span class="category-name">Brushless Servo Products</span>
</a>
</div>
<div class="nav-item" data-id="1070">
<a class="nav-link" href="/unregulated-switching-3">
<span class="category-name">Unregulated Switching</span>
</a>
</div>
<div class="nav-item" data-id="1071">
<a class="nav-link" href="/advanced-digital-stepper-drives-3">
<span class="category-name">Advanced Digital Stepper Drives</span>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</li>
<li class="nav-item" data-id="22">
<a class="nav-link" href="/others-2">
<span class="category-name">OTHERS</span>
</a>
</li>
<li class="mobile-menu-items"></li>
</ul>
I need to show sub-menu items in multi-column vertically, such that additional column is used only if sufficient menu items exist. You can review the same via the image preview - http://prntscr.com/oe28im
I have the following snippet:
$(function() {
$('.menu-open').click(function(e) {
e.preventDefault();
var href = $(this).attr("data-sidebar-toggle");
console.log(href);
href = document.getElementById(href);
console.log(href);
$(href).slideToggle("slow");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav class="nav flex-column">
<a class="nav-link text-light menu-open" href="#" data-sidebar-toggle="#collapseExample"><span>Item 1</span></a>
<div id="#collapseExample" class="sidebar-menu">
<nav class="nav flex-column">
<a class="nav-link text-light menu-open" href="#" data-sidebar-toggle="#item11"><i class="fa fa-user" aria-hidden="true"></i> <span>Item 1-1</span></a>
<div id="item11" class="sidebar-menu">
<nav class="nav flex-column">
<a class="nav-link"> Hello </a>
</nav>
</div>
<a class="nav-link text-light" href="#item-1-2"><span>Item 1-2</span></a>
</nav>
</div>
<a class="nav-link active text-light border-bottom-0 border-light" href="#"><span>Item 2</span></a>
</nav>
But when I click on the Item 1 sidebar link item it manages to open and close it, whilst when I click to the item1-1 link it fails to toggle the Hello menu item the reason why that happens is because it fails to get the element having the id defined in data-sidebar-toggle attr.
Do you have any idea why?
$(function() {
$('.menu-open').click(function(e) {
e.preventDefault();
var href = $(this).attr("data-sidebar-toggle");
console.log(href);
href = document.getElementById(href);
console.log(href);
$(href).slideToggle("slow");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav class="nav flex-column">
<a class="nav-link text-light menu-open" href="#" data-sidebar-toggle="#collapseExample"><span>Item 1</span></a>
<div id="#collapseExample" class="sidebar-menu">
<nav class="nav flex-column">
<a class="nav-link text-light menu-open" href="#" data-sidebar-toggle="#item11"><i class="fa fa-user" aria-hidden="true"></i> <span>Item 1-1</span></a>
<div id="#item11" class="sidebar-menu">
<nav class="nav flex-column">
<a class="nav-link"> Hello </a>
</nav>
</div>
<a class="nav-link text-light" href="#item-1-2"><span>Item 1-2</span></a>
</nav>
</div>
<a class="nav-link active text-light border-bottom-0 border-light" href="#"><span>Item 2</span></a>
</nav>
Update your code as appear here.You have missed # before id(item11).
<a class="nav-link text-light menu-open" href="#" data-sidebar-toggle="#item11"><i class="fa fa-user" aria-hidden="true"></i> <span>Item 1-1</span></a>
<div id="#item11" class="sidebar-menu">
This code works. Try this.
I have a problem in my burger menu. It is not hiding after I click on the menu. I'm a beginner and I don't know where the problem is?
I need your help please. If you need any other information about my code feel free to ask me.
<nav id="navbar" class="navbar default">
<div class="container mob-logo">
<div class="navbar-header col-sm-2 tablet-logo">
<button type="button" class="navbar-toggle mob-menu" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar nature"></span>
<span class="icon-bar nature"></span>
<span class="icon-bar nature"></span>
</button>
<div class="mobile-sidebar">
<span class="sidebar-btn btn fa-bar-hide" data-action="toggle" data-side="right" >
<i class="fa fa-bars"></i>
</span>
</div>
</div>
<div class="collapse navbar-collapse " id="myNavbar" >
<ul class="nav navbar-nav pull-right ">
<li class="active">
<a href="#accueil" data-du-smooth-scroll data-du-scrollspy>Accueil</a>
</li>
<li class="active">
<a href="#home" data-du-smooth-scroll data-du-scrollspy>Groupe</a>
</li>
<li>
<a href="#Competences" data-du-smooth-scroll data-du-scrollspy>Competences</a>
</li>
<li>
<a href="#Services" data-du-smooth-scroll data-du-scrollspy>Services</a>
</li>
<li>
<a href="#References" data-du-smooth-scroll data-du-scrollspy>References</a>
</li>
<li>
<a href="#contact" data-du-smooth-scroll data-du-scrollspy>Contact</a>
</li>
</ul>
</div>
</div>
</nav>
$(document).ready(function(){
$(".mob-menu").click(function(){
$(this).hide();
});
});
I'm currently trying to create a button that will reveal me the collapsed navigation links when the screen gets too small. The button does materialize, but I can't get it to perform anything besides appearing when the screen gets small.
The toggle button also creates small '>' arrows when I only intended to have the white "-" lines in the button.
I realized that jquery and bootstrap's js files should be included at the bottom of the body tag, but so far I've had no luck even with those added. Any help is appreciated.
https://codepen.io/Tintinator/pen/NvKRvO
<div class="navbar navbar-default navbar-static-top navbar-inverse">
<div class="container">
<!-- BRAND, BUTTON -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-
toggle="collapse" data-target=".navbar-nav">
<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="#">
<img src="./newnewfoy.png">
</a>
</div>
<!-- NAV LINKS -->
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav" id="navilinks">
<li class="nav-item">
<a class="nav-link active" 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="#">Event</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Volunteer</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Sponsors</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Contact</a>
</li>
</ul>
<div class="medialinks hidden-sm hidden-xs">
<a id="YOUcon" class = "mediacon" href="www.google.com"></a>
<a id="IGcon" class = "mediacon" href="www.google.com"></a>
<a id="TWTcon" class = "mediacon" href="www.google.com"></a>
<a id="FBcon" class="mediacon" href="www.google.com"></a>
</div>
</div>
</div>
</div>
You have wrong data-target attribute and a css rule that limits nav height (50px) which doesn't let it to expand properly. And I believe parent element should be nav not div.
Try this instead:
<!-- NAVIGATION BAR -->
<nav class="navbar navbar-default navbar-static-top navbar-inverse">
<div class="container">
<!-- BRAND, BUTTON -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navilinks" 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="#">
<img src="./newnewfoy.png">
</a>
</div>
<!-- NAV LINKS -->
<div class="navbar-collapse collapse" id="navilinks">
<ul class="nav navbar-nav" >
<li class="nav-item">
<a class="nav-link active" 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="#">Event</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Volunteer</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Sponsors</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Contact</a>
</li>
</ul>
<div class="medialinks hidden-sm hidden-xs">
<a id="YOUcon" class = "mediacon" href="www.google.com"></a>
<a id="IGcon" class = "mediacon" href="www.google.com"></a>
<a id="TWTcon" class = "mediacon" href="www.google.com"></a>
<a id="FBcon" class="mediacon" href="www.google.com"></a>
</div>
</div>
</div>
</nav>
https://codepen.io/anon/pen/oevYvp
I'm not sure if this is is, but did you add the plugin? (see image)
Within your codepen, I modified a couple lines of code and it seems to do the trick. I changed the data-target from a class to an id of #navbar and then updated the initial div in your "NAV LINKS" to include the id of #navbar. I forked your codepen for you. https://codepen.io/ckroll17/pen/qXWqbV
<!--
Changed button to data-target to #navbar
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-nav"> -->
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#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="#">
<img src="./newnewfoy.png">
</a>
</div>
<!-- NAV LINKS -->
<!-- Added an id of navbar to the class directly below -->
<div id="navbar" class="navbar-collapse collapse">