Hover menu disappear too fast - html

I got a problem, I do not know what is the problem with the hover menu but it disappears too fast
<div class="dropdown">
<li class="nav-item log-main">
Member
<ul class=" dropdown-menu log">
<li>Sign up</li>
<li>Log in</li>
</ul>
</li>
</div>
css:
.navbar .nav-item ul.log{
display: none;
list-style-type:none;
}
.navbar .dropdown-menu:hover ul.log{
display: block;
}
.log a{
color:var(--main-text-color);
font-family:var(--main-text-font);
font-size: 24px;
}

You need to use :hover pseudo class on .log-main:hover to show the next ul which will be .dropdown-menu
Live Demo:
.navbar .nav-item ul.log {
display: none;
list-style-type: none;
}
.log-main:hover .dropdown-menu {
display: block;
margin-top: 0;
}
.log a {
color: var(--main-text-color);
font-family: var(--main-text-font);
font-size: 24px;
}
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<div class="dropdown">
<li class="nav-item log-main">
Member
<ul class="dropdown-menu log">
<li>Sign up</li>
<li>Log in</li>
</ul>
</li>
</div>

You need to add hover to the element that is visible and the dropdown that is hidden.
.dropdown:hover .dropdown-menu,
.dropdown .dropdown-menu:hover{
display: block;
position: absolute;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<ul class="navbar-nav">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown link
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
</ul>
</nav>

Related

Nav Bar Dropdown moves to the left side of screen when parent is clicked

I have a nav bar with dropdowns that appear when hovered over. That part works perfectly. However if you click on the parent or element the dropdown moves to the far left of the screen. I want it to just stay where it is even if this is clicked on. I'll include my html and css code below. Any help getting this element to stay where it is when the screen is expanded would be helpful. I am using bootstrap 5 by the way.
navbar.html
<nav class="navbar navbar-expand-md">
<a class="navbar-brand" href="/">
<img class="navbar-logo" src="{% static 'site_base/images/image.png' %}" alt="Logo">
</a>
<button class="navbar-toggler navbar-dark" type="button" data-bs-toggle="collapse" data-bs-target="#main-navigation"
>
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse text-end" id="main-navigation">
<ul class="navbar-nav ms-auto d-flex justify-content-end">
<li class="nav-item">
<p class="nav-link dropdown-toggle" data-bs-toggle="dropdown">Dropdown 1</p>
<ul class="dropdown-menu text-end dropdown-menu">
<li class="dropdown-item">Sub-item-1</li>
<li class="dropdown-item">Sub-item-2</li>
<li class="dropdown-item">Sub-item-3</li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown">Products</a>
<ul class="dropdown-menu text-end">
<li class="dropdown-item">Product 1</li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown">Resources</a>
<ul class="dropdown-menu text-end">
<li class="dropdown-item">User Guides</li>
<li class="dropdown-item">Videos</li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link" href="/company">Company</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/contact-us">Contact Us</a>
</li>
</ul>
</div>
</nav>
style.css
#media all and (min-width: 992px) {
.navbar .nav-item .dropdown-menu {
display: none;
}
.navbar .nav-item:hover .nav-link {
}
.navbar .nav-item:hover .dropdown-menu {
display: block;
}
}
/* ============ desktop view .end// ============ */
/* ============ small devices ============ */
#media (max-width: 991px) {
.dropdown-menu .dropdown-menu {
margin-left: 0.7rem;
margin-right: 0.7rem;
margin-bottom: 0.5rem;
}
}

Hiding Sub Menus In A Navigation Bootstrap Explanation [duplicate]

This question already has answers here:
Bootstrap dropdown sub menu missing
(11 answers)
Closed 1 year ago.
I am looking for an explanation on how the CSS selectors work to make it so that the Sub Menu is only shown when the parent element for that Sub Menu is hovered over. To my understanding there is a pure CSS solution for this with the use of :hover and the CSS display property however I do not understand how to use the two together to make the sub menu do what I want it to do. I have a hunch that the .dropdown-menu class is overwriting the display:hidden within the CSS for the submenu.
I have tried adding in some CSS in the selector .navbar .nav-item .submenu { display: hidden; position: absolute; left:100%; top:35px;} to hide the Sub Menu in the navbar. Once the Sub Menu is hidden I should be able to just show it again by using :hover on the parent element but I am unsure which element that would be as I have tried a mix of CSS selectors with no avail.
Here is the code for the page:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
</head>
<body style="">
<nav class="navbar navbar-expand-sm navbar-dark bg-dark" style="background-color: black;">
<div class="container-fluid">
<a class="navbar-brand" href="#">Home</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#main_nav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="main_nav">
<ul class="navbar-nav">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown"> People </a>
<ul class="dropdown-menu">
<li><a class="dropdown-item text-white" href="#">Professional Institutions</a></li>
<li class="dropdown-submenu">
<li><a class="dropdown-item text-white" href="#">My New Drop Down</a>
<ul class="submenu dropdown-menu">
<li><a class="dropdown-item text-white" href="#">Sub Area 1</a></li>
<li><a class="dropdown-item text-white" href="#">Sub Area 2</a></li>
<li><a class="dropdown-item text-white" href="#">Sub Area 3</a></li>
</ul>
</li>
</li>
</ul>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown"> Products </a>
<ul class="dropdown-menu">
<li><a class="dropdown-item text-white" href=""> Actuation Systems</a></li>
</ul>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown">Knowledge </a>
<ul class="dropdown-menu">
<li><a class="dropdown-item text-white" href=""> A S Knowledge</a></li>
</ul>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown"> Policy Deployment </a>
<ul class="dropdown-menu">
</ul>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown"> Processes And Procedures </a>
<ul class="dropdown-menu">
<li><a class="dropdown-item text-white" href="#"> Quality Management System</a></li>
<li><a class="dropdown-item text-white" href="#"> Buissness Management System </a></li>
</ul>
</li>
</ul>
</div> <!-- navbar-collapse.// -->
</div> <!-- container-fluid.// -->
</nav>
<style>
#media all and (min-width: 1200px) {
.nav-link {
font-size: 25px
}
.navbar .nav-item .dropdown-menu {
display: hidden;
font-size: 20px
}
.navbar .nav-item:hover .dropdown-menu {
display: block;
background: rgba(66, 66, 66, 0.4)
}
.dropdown-menu>li:hover {
background-color: black
}
.dropdown-menu .dropdown-item:hover {
background-color: black;
}
.navbar .nav-item .submenu {
display: hidden;
position: absolute;
left: 100%;
top: 35px;
}
}
</style>
</body>
</html>
Here is the code again: https://jsfiddle.net/p0etz8jg/
How it works:
The collapse JavaScript plugin is used to show and hide content.
Buttons or anchors are used as triggers that are mapped to specific
elements you toggle. Collapsing an element will animate the height
from its current value to 0. Given how CSS handles animations, you
cannot use padding on a .collapse element. Instead, use the class as
an independent wrapping element.
Bootstrap Collapse

swap div position and margin-top dropdown menu

first question, how to swap two divs, i want the image on the left and the text next to it
https://codepen.io/madaffakiren/pen/PomedWx
2nd question, I want to lower the "dropdown" but when I do it with margin-top then the "dropdown" disappears on hover, how to assign this blind spot (https://i.imgur.com/8mpN8BL.png) to dropdown?
HTML:
<!-- ======== Navbar ======= -->
<nav class="navbar sticky-top navbar-expand-lg navbar-dark fixed-top">
<div class="container">
<a class="navbar-brand" href="/"><img src="img/logo4.svg" width="120px" height="32px" alt="logo"></a>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link " href="/" data-target=".navbar-collapse.show">XXX</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown"
data-target=".navbar-collapse.show">Sample</a>
<ul class="dropdown-menu">
<a class="dropdown-item" href="#">Sample</a>
<a class="dropdown-item" href="#">Sample</a>
</ul>
</li>
</li>
<li class="nav-item">
<a class="nav-link " href="#" data-target=".navbar-collapse.show">XXX</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#" data-target=".navbar-collapse.show">XXX</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#" data-target=".navbar-collapse.show">XXX</a>
</li>
</ul>
</div>
</div>
</nav>
CSS:
.navbar {
padding: 10px 0;
background-color: #37517e;
}
.navbar .nav-item {
margin: 0;
padding: 0;
}
.navbar .nav-item .nav-link {
font-size: 15px;
font-weight: 500;
color: #ffffff;
padding: 0;
margin-left: 35px;
transition: all 0.3s ease-in-out;
}
.navbar .nav-item .nav-link:hover {
transform: translateY(-3px);
color: #03b0d5;
}
.navbar .nav-item .dropdown-menu {
border: none;
margin: 20px 0;
background-color: blue;
}
.navbar .nav-item:hover .dropdown-menu {
display: block;
}

Cannot make Bootstrap navbar transparent

I have been trying to make my navbar transparent but so far nothing has worked for me. Can someone teach me how to do it? I assume it has something to do with the space that it is taking up in regards to the body content, but I am not sure what can be done as I have already tried reversing the div tags to be outside of the body.
This is my desired result :
Fiddle : https://jsfiddle.net/zr1qh780/
My HTML :
<body>
<div id="container">
<!-- Navigation menu -->
<header>
<nav class="my-nav navbar navbar-light navbar-expand-lg">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-
target="#navbarsExample08" aria-controls="navbarsExample08" aria-expanded="false" aria-
label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse justify-content-md-center" id="navbarsExample08">
<ul class="navbar-nav">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="index.html" id="dropdown08" data-toggle="dropdown" aria-
haspopup="true" aria-expanded="false">ACTIVITÉS</a>
<div class="dropdown-menu" aria-labelledby="dropdown08">
<a class="dropdown-item" href="rafting.html">Rafting</a>
<a class="dropdown-item" href="canyoning.html">Canyoning</a>
<a class="dropdown-item" href="saut-parachute.html">Saut en parachute</a>
<a class="dropdown-item" href="soufflerie.html">Simulation de chute libre</a>
<a class="dropdown-item" href="saut-elastique.html">Saut à l’élastique</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="#">OFFRES</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">ÉVÉNEMENTS</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">À PROPOS</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">ESPACE HANDICAP</a>
</li>
<li class="nav-item">
<a class="nav-link contact" href="contact.html">CONTACT</a>
</li>
</ul>
</div>
<div class="hamburger">
<span style="font-size:30px;cursor:pointer;color: white;" onclick="openNav()">☰</span>
</div>
</nav>
</header>
<div id="myNav" class="overlay">
×
<div class="bar overlay-content">
ACTIVITÉS
OFFRES
ÉVÉNEMENTS
À PROPOS
ESPACE HANDICAP
CONTACT
</div>
</div>
My CSS:
.logo {
margin-right:5px;
}
.my-nav{
display: flex;
align-items: center;
justify-content: space-around;
padding: 8px;
}
.navbar-light .navbar-nav .nav-link {
color: white;
}
.navbar-nav > li {
padding-left:25px;
padding-right:45px;
float:none;
display:table-cell;
text-align:center;
font-size: 15px;
font-weight: 500;
}
.navbar-light .navbar-nav .nav-link:focus, .navbar-light .navbar-nav .nav-link:hover {
color: #fc3218;
}
.nav-link:active {
color: #fc3218;
}
.navbar {
background: grey
}
.dropdown-menu {
color: white;
background-color: #fc3218;
}
.dropdown-item {
color: white;
font-size: 14px;
}
.navbar-collapse {
flex-grow: 0.3;
}
Have you tried something like this?
navbar{
background-color: transparent;
}
If that doesn't work, add !important to break the predefined bootstrap styles
Set the opacity of the container for nav bar to 0.
Note: Place the elements of nav bar in different div otherwise the text in nav bar will also get effected.

navbar is not appropriate

Picture for navbar :
Expected :
Reality :
can I get fix for that
my navbar code
<nav class="navbar navbar-default navbar fixed-top">
<div class="container-fluid">
<div class="navbar-header">
NavbarBrand
</div>
<nav class="nav navbar-nav navbar-right">
<li>Link</li>
<li>A</li>
<li>A</li>
</ul>
</div>
</nav>
a:link {
color: gray;
}
.nav-link:hover {
color: white;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<nav class="nav bg-dark text-white">
<a class="nav-link active" href="#">Active</a>
<a class="nav-link" href="#">Link</a>
<a class="nav-link" href="#">Link</a>
</nav>
also check this fiddle.
for get navbar middle of the page use <ul class="nav justify-content-center"> for get the nav at right side of page use <ul class="nav justify-content-end"> for more about bootstrap basenav
<div class="navigation">
<div class="navigation__container">
<div class="navigation__container_logo">
NavbarBrand
</div>
<nav class="navigation__container_menu">
<ul class="navigation__container_menu_list">
<li class="navigation__container_menu_list--item">
link
</li>
<li class="navigation__container_menu_list--item">
link
</li>
</ul>
</nav>
</div>
</div>
.navigation{
padding: 10px;
&__container{
display: flex;
align-items: center;
border: solid 1px #000;
border-right-color: transparent;
border-left-color: transparent;
padding: 5px 20px;
&_logo{
max-width: 100%;
}
&_menu{
flex: 1;
max-width: 100%;
&_list{
display: flex;
justify-content: flex-end;
align-items: center;
&--item{
margin-right: 10px;
> a{
color: #000;
font-size: 12px;
}
&:hover{
>a {
color:#f90;
}
}
}
}
}
}
}
HTML
<nav class="navbar navbar-expand-md navbar-dark bg-dark">
<div class="container-fluid">
<a class="navbar-brand" href="#">
<img class="logo horizontal-logo" src="LOGO link" alt="logo">
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown2" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown2">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown3" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown3">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
</ul>
</div>
</div>
</nav>
CSS
body {
background: #f2f2f2;
}
.navbar .nav-item:not(:last-child) {
margin-right: 35px;
}
.dropdown-toggle::after {
transition: transform 0.15s linear;
}
.show.dropdown .dropdown-toggle::after {
transform: translateY(3px);
}
.dropdown-menu {
margin-top: 0;
}
JS
const $dropdown = $(".dropdown");
const $dropdownToggle = $(".dropdown-toggle");
const $dropdownMenu = $(".dropdown-menu");
const showClass = "show";
$(window).on("load resize", function() {
if (this.matchMedia("(min-width: 768px)").matches) {
$dropdown.hover(
function() {
const $this = $(this);
$this.addClass(showClass);
$this.find($dropdownToggle).attr("aria-expanded", "true");
$this.find($dropdownMenu).addClass(showClass);
},
function() {
const $this = $(this);
$this.removeClass(showClass);
$this.find($dropdownToggle).attr("aria-expanded", "false");
$this.find($dropdownMenu).removeClass(showClass);
}
);
} else {
$dropdown.off("mouseenter mouseleave");
}
});
Hi I have read your code and I had previously solved the same issue for someone else, I have made a small and simple navigation system in CodePen which will help you fix the alignment issue of your navigation system. Additionally, there are three line of code which do not need to be there in the html file. They are <div class="container-fluid"> and <li>A</li> and <nav class="navbar navbar-default navbar fixed-top">.
When building the navigation system you do not need to declare that it is a navigation bar in the html file, the <ul> tag and <li> tag are an unordered list in the first place and all navigation bars are an unordered list. Furthermore, I have added the CSS code to help you fix the alignment of the unordered list, and there is a code which will sort out any white space in you navigation system
Additionally, the navigation bar in the link below does not use any bootstrap tools, the navigation bar is purely css and html. I hope this link is helpful
Here is a link below:
[https://codepen.io/X_Viperxz72/pen/zYrEZGB]