would you people be able to help me out with a transition delay on mouse out? :D
My navbar has a dropdown-menu, but because there is a whitespace of several pixels between the main menu item and the submenu, on a mouse out the submenu disappears again if I don't move my mouse down quickly enough. I have been playing around with transition effects based on answers on other threads, but I just can't get it to work (because I do not really understand the logic - I usually learn through trial and error).
As such, would you people be able to help me out? I prefer a solution that focusses on transitions (instead of one that decreases the white-space), as I want to learn the transition skill for other web-design aspects as well. Hopefully, with that, I also understand better how these HTML structures actually work, so I can I re-use the basic concept for ideas.
NB: the menu-items change color upon hovering. The main CSS for that purpose is listed but I omitted the specific CSS for colors.
nav {
display:flex;
align-items:center;
flex-direction:row;
float:right;
nav-right:auto;
justify-content:space-between;
}
.btn.btn-primary {
border: 0px;
border-radius:0 !important;
-webkit-border-radius:0 !important;
}
.btn.btn-primary:hover {
}
.dropdown-menu {
border-radius:0 !important;
-webkit-border-radius:0 !important;
}
.dropdown ul.dropdown-menu li a{
border-radius:0 !important;
-webkit-border-radius:0 !important;
}
.dropdown ul.dropdown-menu li a:hover{
}
.dropdown:hover .dropdown-menu {
display: block;
}
<section>
<header class="container">
<div class="row">
<nav class="navbar navbar-default navbar-fixed-top" style="background-color:snow;">
<h2 class="col-md">
<a class="nav" href="./index">Foundation</a>
</h2>
<nav class="navbar-right">
<!-- make it into one block, or aligned block-->
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">
Our mission </button>
<ul class="dropdown-menu">
<li>
Natural resources
</li>
<li>
Access to food
</li>
<li>
Public health
</li>
</ul>
</div>
</nav>
</nav>
</div>
</header>
</section>
I think your issue isn't with the transition but the navbar itself. Are you using bootstrap by the way? In the following snippet I just linked BS to your code, and what I see is that the menu is clickable but it is really tricky to click on the submenus.
The btn btn-primary class more like for clickable menus or submit buttons, but you can still make it look like a button with a little bit of CSS. But for a dropdown menu I guess it's not very intuitive.
.btn.btn-primary {
border: 0px;
border-radius: 0 !important;
-webkit-border-radius: 0 !important;
}
.dropdown-menu {
border-radius: 0 !important;
-webkit-border-radius: 0 !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
Foundation
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li>
<p class="navbar-btn">
Our mission
</p>
</li>
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu">
<li>
Natural resources
</li>
<li>
Access to food
</li>
<li>
Public health
</li>
</ul>
</li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
</nav>
</body>
</html>
Related
<form id="form1" runat="server">
<div>
<nav class="navbar navbar-expand-lg navbar-dark shadow-5-strong fixed-top" id="navbar_top" style="background-color:rgba(0, 0, 0, 0.80); backdrop-filter:blur(25px);">
<a class="navbar-brand" href="#"> <img src="imgs/vmc_logo.png" height="50" /></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 mr-auto">
<li class="nav-item active">
<a class="nav-link" href="homepage.aspx">Home</a>
</li>
</ul>
</div>
</nav>
</div>
My navbar not shrinking (Sticky-top will not work good as there is logo in it)
Only found solutions on sticky-top and jqquery
.navbar {
height: 80px;
position: fixed;
top: 0;
width: 100%;
}
#media (min-width: 992px) {
.navbar {
height: 60px;
}
}
The above provided CSS code sets the height to 80px, and once the user scrolls past 992px it's going to shrink to 60px. You could try that, or using JS/JQuery.
<script src="Jquery/js/jquery-3.6.0.slim.js"></script>
<script>
$(function(){
$(window).scroll(function(){
if($(window).scrollTop()<=35){
$(".navscroll").removeClass('scroll_navbar')
$("nav").css("padding", "20px");
}
else{
$(".navscroll").addClass('scroll_navbar')
$("nav").css("padding", "0px");
}
})
})
</script>
used this jquery to change directly inline css. idk why asp.net web app not applying external css attribute specifically Jquery one
I am using BootstrapCDN v4.1.3 and I want my navbar to be fixed to the top of the user's browser at all times. When I set the nav div to position: fixed;, none of the links can be clicked on when the browser is in desktop mode and the navbar toggle button does not drop down when the browser is in mobile mode. As soon as I remove the position: fixed; CSS attribute, everything works in the navbar, except it is no longer positioned above the stock video and it pushes the video down when the navbar menu is toggled in a mobile browser. This is not my desired result and I would appreciate if someone could help me figure out how to get the navbar to function properly while also maintaining a fixed position at the top of the user's browser.
nav.navbar {
background-color: rgba(144, 188, 244, .8) !important;
position: fixed;/* <---- Causing the navbar issue */
width: 100%;
}
div.stockVideo {
padding: 0;
}
#stockVideo {
width: 100%;
height: auto;
}
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="css/normalize.css">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<link rel="stylesheet" href="css/custom.css">
<title>Website</title>
</head>
<body>
<!-- Navbar -->
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">
<img src="media/placeholderLogo.png" width="44" height="44" alt="Logo">
</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 ml-auto">
<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="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
</div>
</nav>
<!-- Stock video -->
<div class="container-fluid stockVideo">
<video autoplay muted loop id="stockVideo">
<source src="media/stockVideo.mp4" type="video/mp4">
</video>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
</body>
</html>
Settings the navbar z-index: property to 1 fixes this:
nav.navbar {
background-color: rgba(144, 188, 244, .8) !important;
position: fixed;
width: 100%;
z-index: 1;
}
I'd also set padding-top to the height of your navbar on body like so:
body {
padding-top: 59px; /* the height of your navbar */
}
nav.navbar {
top: 0; /* bump the header back to the top */
}
You can also try the bootstrap fixed-top class to fix the navbar like
<nav class="navbar navbar-expand-lg navbar-light bg-light fixed-top">
Add padding to the top of the video to allow for the Navbar height..
#stockVideo {
width: 100%;
height: auto;
padding-top: 60px;
}
https://www.codeply.com/go/YWnrU7WAXM
Ideally, the body would have padding-top instead as recommended in the Bootstrap docs...
"Fixed navbars use position: fixed, meaning they’re pulled from the
normal flow of the DOM and may require custom CSS (e.g., padding-top
on the ) to prevent overlap with other elements."
body {
padding-top: 60px;
}
This has been asked and answered before.
EDIT
If you want the Navbar fixed, use the Bootstrap fixed-top class. Using position:fixed alone won't work because you'd need to also set z-index. As you can see fixed-top works here: https://www.codeply.com/go/YWnrU7WAXM
<nav class="navbar navbar-expand-lg navbar-light fixed-top bg-light"></nav>
I am working on Bootstrap navbar and after resizing as the hamburger menu shows the logo shifts its position and even overflows the navbar. How can I make the logo responsive so that it changes its size or position as the navbar is resized in the window?
<!-- Navigation Bar -->
<div class="navbar navbar-default" id="navbar-outer">
<div class="container-fluid" style="margin:0px;">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#menu">
<span class=" glyphicon glyphicon-menu-hamburger"></span>
</button>
</div>
<a class="navbar-brand" href="#">
<img src="../images/LOL_LOGO_NEW-01.png" />
</a>
<div class="collapse navbar-collapse" id="menu">
<ul class="navbar navbar-nav" id="navbar-menu">
<li><a href="#" >WHAT WE DO</a></li>
<li>WHO WE ARE</li>
<li>OUR WORK</li>
<li>VENTURES</li>
<li>BLOG</li>
<li>CONNECT</li>
</ul>
</div>
</div>
Also, along with the answer if you could provide me with the reason as to why it happened then it'll be appreciated as I am still in the learning phase.
Thanks. :)
without resizing it looks normal
look how it overflows on resize
I added some background color so you can easily see the block for each container. The logo will be red, the navbar-header will be yellow, and the navbar-collapse will be green.
navbar-brand has a float: left so it will float to the left of the block, if you have it after navbar-header(which has display:block so it will take the whole width of the screen) block it will just floating left below, you can move it inside navbar-header or move it up outside of container-fluid.
.navbar-brand {
background: red;
float: right;
display: block;
}
.navbar-header {
background: yellow;
}
.navbar-collapse {
background: green;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- Navigation Bar -->
<div class="navbar navbar-default" id="navbar-outer">
<div class="container-fluid" style="margin:0px;">
<div class="navbar-header">
<a class="navbar-brand" href="#">
<img src="../images/LOL_LOGO_NEW-01.png" />
</a>
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#menu">
<span class=" glyphicon glyphicon-menu-hamburger"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="menu">
<ul class="navbar navbar-nav" id="navbar-menu">
<li>WHAT WE DO</li>
<li>WHO WE ARE</li>
<li>OUR WORK</li>
<li>VENTURES</li>
<li>BLOG</li>
<li>CONNECT</li>
</ul>
</div>
</div>
I have an issue with my two navigation menus. I’m using two of the same type navigation that comes with Bootstrap. The first navigation is using the “navbar-inverse” class and the second navigation menu is using “navbar-default” class with some minor modification. The issue appears when you click on dropdown menu in the right corner; the second navigation menu will overlap the dropdown box and only content below the menu is visible.
Please look at the attachment below for illustration.
This is my current HTML setup:
<nav class="navbar navbar-inverse navbar-static-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#"><span class="glyphicon glyphicon-home"></span></a>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">Hjem</li>
...
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
Innstillinger <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
...
</ul>
</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
<nav class="navbar navbar-default navbar-static-top">
<div class="container">
<div id="navbar">
<ul class="nav navbar-nav">
...
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
This is my current issue illustrated:
I have created a JSfiddle with corresponding stylesheets and frameworks to look at: http://jsfiddle.net/1L3voL3h/. Unfortunately, at this point I haven't been able to find a solution by myself. Thanks in advance for any help.
change this <nav class="navbar navbar-default navbar-static-top">
to <nav class="navbar navbar-default navbar-static"> from your second nav bar
just add this for your second navbar
<style>
.second-navbar {
top: 50px;
z-index: 999;
}
</style>
You can change the z-index of your navbar-default or of your dropdown menu. Something like:
.navbar-default {
background: #b6d24b;
border-radius: 0px;
z-index: 1;
}
or:
.dropdown-menu {
z-index: 5
}
I updated your JSFiddle
You only need to add to your CSS:
.navbar-inverse.navbar-static-top {
z-index: 800;
}
.navbar-default.navbar-static-top {
z-index: 700;
}
The problem is that you are applying z-index:1000 to both of your navigation bars. With this rule:
.navbar-static-top {
z-index: 1000;
border-width: 0 0 1px;
}
You should change this rule and/or add the ones I provided above to give your first navigation bar a higher z-index value.
how to create navbar like responsive tab using bootstrap?
My requirement is to make tabs that should be responsive like a bootstrap navbar.
I had try like this...
<nav class="navbar navbar-default">
<!-- We use the fluid option here to avoid overriding the fixed width of a normal container within the narrow content columns. -->
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-6">
<span class="sr-only">Toggle</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="navbar-collapse in" id="bs-example-navbar-collapse-6" style="height: auto;">
<ul class="nav navbar-nav">
<li class="active">Link</li>
<li>Link</li>
<li>Link</li>
</ul>
</div><!-- /.navbar-collapse -->
</div>
</nav>
can anyone help....
I found one helpful plugin to do that you can try this responsive tabs
The tabs transform to an accordion when it reaches a CSS breakpoint. You can use this plugin as a solution for displaying tabs elegantly on desktop, tablet and mobile.
Bootstrap uses media queries to change the header based on screen width, so you'll need to use them as well.
When the width is greater than 768px the list items are shown, and anything under that will cause them to be hidden.
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<header>
<div class="navbar-header">
<a class="navbar-brand">Bootstrap</a>
<div class="navbar-toggle"></div>
</div>
<nav class="navbar navbar-default">
<ul>
<li>About</li>
<li>Services</li>
<li>Contact</li>
<li>Location</li>
</ul>
</nav>
</header>
</body>
</html>
CSS
#media (min-width: 768px) {
.navbar li {
float: left;
list-style-type: none;
display: block;
padding: 15px 10px;
}
.navbar-toggle {
display: none;
}
.navbar {
display: block !important;
}
}
.navbar-brand {
display: block;
float: left;
background: #6f5499;
padding: 15px;
}
.navbar-toggle {
position: relative;
float: right;
background-color: #6f5499;
padding: 20px;
}
.navbar {
display: none;
}
See this jsbin.
Try this:
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Bootstrap theme</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>About</li>
<li>Contact</li>
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li class="dropdown-header">Nav header</li>
<li>Separated link</li>
<li>One more separated link</li>
</ul>
</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
Here is an example jsfiddle of how to create responsive menu in bootstrap.