js Drop Down Menu Not working - javascript

I dont know why is this not working ? I am trying to make a drop down menu and when I hovering over in the page it work but if i hovered in the linke it dosn't work In short, this drop-down list does the opposite
i need fix or a better way for this drop down menu
enter image description here
enter image description here
Html
<body>
<div class="wrap">
<nav class="navbar navbar-default navbar-fixed-top navbarcolor ">
<div class="container ">
<div class="navbar-header active">
<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 Brand-Color active " href="#">MediQ.ch</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li><a class="navbar-R-C " href="#">AdminStraion</a>
</li>
<li class="dropdown sub-menu-parent">
<a id="drop" href="#" class="navbar-R-C nav-link dropdown-toggle " data-toggle="dropdown" aria-expanded="false">BookMarker
<span class="caret"></span></a>
<ul id="content" class="dropdown-menu " role="menu">
<li><a class="content " href="#">ACETILXSUBSTANCE2</a>
</li>
<li><a class="content " href="#">HIDROCORTIZOLXBENZTIL</a>
</li>
<li><a class="content " href="#">SUBSTANCE3XSUBSTANCE4</a>
</li>
</ul>
</li>
<li><a class="navbar-R-C " href="#">Contact</a>
</li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
</nav>
</div>
</body>
Css
.navbar-R-C:hover {
color: white !important;
}
.content {
color: White !important;
}
.dropdown-menu {
min-width: 250px;
max-width: 250px;
text-align: center;
background-color: #3E606F;
margin-top: -6px !important;
color: white !important;
border-radius: 15px !important;
}
.dropdown-menu > li > a:hover {
text-align: center;
background-color: #EC407A;
font-weight: bold;
margin-left: 7px !important;
margin-right: 7px !important;
display: inline-block;
color: White;
border-radius: 10px !important;
}
.dropdown-menu:after {
position: absolute;
margin-left: 210px;
top: -6px;
left: -30px;
border-right: 10px solid transparent;
border-bottom: 10px solid #3E606F;
border-left: 10px solid transparent;
content: '';
}
.dropdown:hover .dropdown-menu {
display: block;
}
JS
$(document).ready(function() {
$('.wrap nav ul li').hover(function() {
// Toggles slide but stops if not hover anymore
$(this).find('ul').stop().slideToggle();
// Toggles on and of the active class (triangle)
$(this).find('div').toggleClass('active');
}
);
}
);

Use this. it contains your code but some css are override by bootstrap css so you have to override bootstrap css to look like what you want. and the new thing is bootstrap.css, bootstrap.js and jquery.js dont forget to include these file here it loads directly from web you can download and link these file for offline use.
<!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.2.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-default navbar-fixed-top navbarcolor ">
<div class="container ">
<div class="navbar-header active">
<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 Brand-Color active " href="#">MediQ.ch</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li><a class="navbar-R-C " href="#">AdminStraion</a>
</li>
<li class="dropdown sub-menu-parent">
<a id="drop" href="#" class="navbar-R-C nav-link dropdown-toggle " data-toggle="dropdown" aria-expanded="false">BookMarker
<span class="caret"></span></a>
<ul id="content" class="dropdown-menu " role="menu">
<li><a class="content " href="#">ACETILXSUBSTANCE2</a>
</li>
<li><a class="content " href="#">HIDROCORTIZOLXBENZTIL</a>
</li>
<li><a class="content " href="#">SUBSTANCE3XSUBSTANCE4</a>
</li>
</ul>
</li>
<li><a class="navbar-R-C " href="#">Contact</a>
</li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
</nav>
<div class="container">
<h3>Navbar With Dropdown</h3>
<p>This example adds a dropdown menu for the "Page 1" button in the navigation bar.</p>
</div>
</body>
</html>

Related

When i change the shape of navbar, the edges are cut

I don't know why, when I declare a border shape different from square the edges are cut:
Here's the html template:
<template>
<div class="navbar-container rounded-pill">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#"></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 mx-auto">
<li class="nav-item text-center">
<a class="nav-link" href="#">111</a>
</li>
<li class="nav-item text-center">
<a class="nav-link" href="#">222</a>
</li>
<li class="nav-item text-center">
<a class="nav-link" href="#">333</a>
</li>
<li class="nav-item text-center">
<a class="nav-link" href="#">444</a>
</li>
</ul>
</div>
</div>
</nav>
</div>
</template>
and heres the css:
<style scoped>
#import url('https://fonts.googleapis.com/css2?family=Pacifico&display=swap');
.navbar-container {
box-sizing: border-box;
margin: 0.5rem;
height: 100%;
width:60%;
border: 2px solid red;
margin-left: 20%;
background-color: transparent;
}
nav {
background-color: white !important;
font-size: 1.3rem !important;
}
nav ul li a {
padding-inline: 1rem !important;
}
</style>
I want a pill-rounded shape of the navbar, when the shape is square, everthing works fine, i just want to change and i couldnt though bootstrap classes and css border radius
Try to also set rounded-pill on navbar class, or you can set the same border-radius to navbar-container and navbar classes without rounded-pill:
new Vue({
el: '#demo',
})
.navbar-container {
box-sizing: border-box;
margin: 0.5rem;
height: 100%;
width: 60%;
border: 2px solid red;
margin-left: 20%;
background-color: transparent;
border-radius: 1em;
}
.navbar {
border-radius: 1em;
}
nav {
background-color: white !important;
font-size: 1.3rem !important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<div id="demo">
<div class="navbar-container">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid ">
<a class="navbar-brand" href="#"></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 mx-auto">
<li class="nav-item text-center">
<a class="nav-link" href="#">111</a>
</li>
<li class="nav-item text-center">
<a class="nav-link" href="#">222</a>
</li>
<li class="nav-item text-center">
<a class="nav-link" href="#">333</a>
</li>
<li class="nav-item text-center">
<a class="nav-link" href="#">444</a>
</li>
</ul>
</div>
</div>
</nav>
</div>
</div>

Search bar with navbar bootstrap

Here is the html of my document, I want to show fixed right side search bar on screen below 991px but did not able to get proper code. Below is the detailed code and link.
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand hidden-xs" href="#">CompAny</a>
<a class="navbar-brand visible-xs" href="#">C</a>
<form class="navbar-form pull-left" role="search">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search">
<div class="input-group-btn">
<button type="submit" class="btn btn-default"><span class="glyphicon glyphicon-search"></span></button>
</div>
</div>
</form>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li class="active">Home</li>
<li>Browse Courses</li>
<li>Active Courses</li>
</ul>
</div>
<!--/.navbar-collapse -->
</div>
</div>
Here is the css
#media(max-width:767px) {
.navbar .navbar-form {
width: 185px;
padding-left:0;
padding-right:0;
}
}
#media(min-width:768px) {
.navbar .navbar-form {
width: 250px;
}
}
.navbar .navbar-form {
padding-top: 0;
padding-bottom: 0;
margin-right: 0;
margin-left: 0;
border: 0;
-webkit-box-shadow: none;
box-shadow: none;
}
Reference link of the functionality i want to achieve http://jsfiddle.net/KSCvB/10/.Any help regarding this will be appreciate able.

How can i prevent from navbar from overlapping title?

I'm currently having some issues with my navbar. Right now it looks like image one but I want to make it look like image 2. How would I do that? Is it something on CSS that I have to add?
/* Nav Bar*/
.navbar-brand{
height: 3.5rem;
}
.navbar-nav li {
padding-right: 0.1rem;
}
.nav-link {
font-size: 1.1rem;
font-weight: 500;
}
.nav-item:hover {
border-bottom: 1px solid #FF7200;
}
.nav
{
}
<body>
<!--Navigation-->
<nav class="navbar navbar-expand-md navbar-light bg-light fixed-top">
<div class="container-fluid">
<img class="navbar-brand" src="../img/IMG_0537.PNG" alt="KAJ Construction Logo"/>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link" href="#section-Services" >Services</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#section-Gallery" >Gallery</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#section-Contact" >Contact Us</a>
</li>
</ul>
</div>
</div>
</nav>
How it currently looks when services link is clicked
How I want it to look like
Add some built-in bootstrap margin and padding like mt-3 (mt means margin-top ) use p-2 (padding from every side) 2 and 3 defines 2rem or 3rem use this it will fix
Since your header is position: fixed, you need to give the content of your page a margin-top equal to its height:
/* Nav Bar*/
.navbar-brand{
height: 3.5rem;
}
.navbar-nav li {
padding-right: 0.1rem;
}
.nav-link {
font-size: 1.1rem;
font-weight: 500;
}
.nav-item:hover {
border-bottom: 1px solid #FF7200;
}
main{
margin-top: 72px;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<body>
<!--Navigation-->
<nav class="navbar navbar-expand-md navbar-light bg-light fixed-top">
<div class="container-fluid">
<img class="navbar-brand" src="http://placekitten.com/200/200" alt="KAJ Construction Logo"/>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link" href="#section-Services" >Services</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#section-Gallery" >Gallery</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#section-Contact" >Contact Us</a>
</li>
</ul>
</div>
</div>
</nav>
<main>
<h1>Our Services</h1>
</main>

Menu pushed the image down in mobile version using bootstrap?

here is desktop version of navigation bar
here is the image when it screen size comes to mobile version after clicking on hamburger button
I want when I click on the hamburger for the menu to open but if it doesn't get pushed down it will be open over the image.
.navbar-light .navbar-toggler {
outline: none !important;
padding-top: 8px;
padding-bottom: 2px;
z-index: 1001;
}
.navbar-toggler .navbar-toggler-icon {
background-color: black;
color: black;
height: 3px;
display: block;
margin-bottom: 6px;
}
<div class="container-fluid wow fadeIn">
<nav class="navbar navbar-expand-md navbar-light bg-faded">
<a class="navbar-brand wow fadeInLeft" href="#"><img src="img/logo.png" alt="logo" width="160px" height="60px"></a>
<button aria-controls="navbarSupportedContent" aria-expanded="true" aria-label="Toggle navigation" class="navbar-toggler navbar-toggler-right" data-target="#navbarSupportedContent" data-toggle="collapse" type="button">
<span class="navbar-toggler-icon"></span>
<span class="navbar-toggler-icon"></span>
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ml-auto wow fadeInRight">
<li class="nav-item active">
<a class="nav-link" href="#"><strong>HOME </strong><span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"><strong>ABOUT</strong></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"><strong>SERVICES</strong></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"><strong>PORTFOLIO</strong></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"><strong>CONTACT US</strong></a>
</li>
</ul>
</div>
</nav>
</div>
<header id="home-section" class="mb-3">
<img src="img/banner.jpg" alt="" width="100%">
</header>
Where did I make a mistake? Which css property or bootstrap class is need to be added?
You can use .navbar-fixed-top class to fixed it on mobile
In Mobile version, keep the hamburger dropdown menu position: absolute; so that the menu dropdown will appear above the image
Use media queries for mobile version and execute the code. For example,
#media only screen and (max-width: 600px) {
.navbar-collapse{
position: absolute;
}
}

How to line up the bottoms of image and text in a bootstrap navbar?

I have a reasonably basic bootstrap navbar as seen in code below.
The pieces I care about here are the logo unified_brand.png and the Contact link. I would like to somehow line up the bottoms of the brand image and Contact text link.
Is it possible to do it programmatically? I've been messing pixels with the padding and margins and it did the trick but it feels like there should be a better answer?
.navbar-brand {
display: inline-block;
float: none;
font-size: 18px;
height: 100%;
padding: 0;
vertical-align: middle;
}
#navBarMain {
border-top: 5px solid #ff5c39;
border-bottom: 2px solid black;
padding-bottom: 10px;
background-color: white;
padding-top: 8px;
}
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" crossorigin="anonymous"></script>
<nav class="navbar navbar-default" id="navBarMain">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="#" class="navbar-brand">
<img style="" src="~/images/unified_brand.png" alt="Company Logo">
</a>
</div>
<div id="navbarCollapse" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>Contact</li>
</ul>
</div>
</nav>
Small trick, works like charm, place an inline-block before the element you want to align with. For this to work, the parent tag must have a define height.
#navBarMain {
border-top: 5px solid #ff5c39;
border-bottom: 2px solid black;
padding-bottom: 10px;
background-color: white;
padding-top: 8px;
}
.small-trick{
width: 0 ;
height: 100%;
display: inline-block;
vertical-align: bottom;;
}
.navbar-header{
height: 37pt;
}
.navbar-brand {
display: inline-block;
float: none;
font-size: 18px;
height: auto;
padding: 0;
vertical-align: bottom;
}
}
<nav class="navbar navbar-default" id="navBarMain">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<div class="small-trick" ></div>
<button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="#" class="navbar-brand">
<img style="" src="~/images/unified_brand.png" alt="Company Logo">
</a>
</div>
<div id="navbarCollapse" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>Contact</li>
</ul>
</div>
</nav>

Categories