Can’t Make the navbar in mobile view - javascript

<nav class="navbar navbar-expand-md navbar-dark navbar-transparent fixed-top sticky-navigation" id="lambda-navbar">
<div class="header"><img src="images/ssn_logo.png" alt="logo" style="max-width: 15%;position:absolute;left:2.5%;"/><h1></h1></div>
<a class="navbar-brand" href="index.html"></a>
<button class="navbar-toggler navbar-toggler-right border-0" type="button" data-toggle="collapse"
data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false"
aria-label="Toggle navigation">
<span data-feather="menu"></span>
</button>
<div class="collapse navbar-collapse" id="navbarCollapse">
<ul class="navbar-nav ml-auto">
</ul>
<form class="form-inline">
</form>
</div>
</nav>
I can’t make this in mobile view. If I try to make it responsive, the navbar is not visible in mobile view.

If you don't want your navigation to collapse on mobile just remove the navbar-toggler button and the collapse navbar-collapse classes so your navigation stays visible.

In mobile view there is a collapse class added to nav bar that sets display: none. It gets overridden only above 768px which is why its hidden in small screens
#media (min-width: 768px)
.navbar-expand-md .navbar-collapse {
display: -ms-flexbox !important;
display: flex !important;
-ms-flex-preferred-size: auto;
flex-basis: auto;
.collapse {
display: none;
}

Related

How to animate and shrink bootstrap navbar on scroll?

<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

Display submenu after mouse out

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>

Issues with Bootstrap menu overlapping dropdowns

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?

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.

Bootstrap 3 centering nav add 5 pixel at the bottom of the links

I've centered the nav menu in Bootstrap. I've notice that my CSS rule add 5 pixels at the bottom of the links. You can highlight it when the menu is not hidden by the toggle button (width > 768)
Could you help me?
Fiddle
HTML
<nav class="navbar navbar-default navbar-fixed-top" 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" 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="#">Brand</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active">LINK</li>
<li>LINK</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
CSS
.navbar .navbar-nav {
display: inline-block;
float: none;
}
.navbar .navbar-collapse {
text-align: center;
}
Thanks in advance.
You just have to add vertical-align: bottom; to .navbar .navbar-nav
jsFiddle

Categories