sticky navigation with submenu and smooth scroll - javascript

Im a beginner in hmtl css jquery js..
I have a navigation that is sticky but can not add sub menu to navigation, also if sub menu is created i want the navigation to stay sticky. Is that possible?
Any help would to thanks...
Here is my current html
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="row">
<div class="navbar-header">
<button class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon icon-bar"></span>
<span class="icon icon-bar"></span>
<span class="icon icon-bar"></span>
</button>
<h3>TEST NAV LOGO</h3>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li>HOME</li>
<li>ABOUT</li>
<li>TEAM</li>
</ul>
</div>
</div>
</div>
Here is the CSS
.navbar-default {
background: #FFFFFF;
border: none;
box-shadow: 0px 2px 8px 0px rgba(50, 50, 50, 0.08);
margin: 0 !important;
}
.navbar-default .navbar-brand {
color: #0066cc;
height: 65px;
line-height: 40px;
padding-left: 0px;
margin-LEFT: -10;
width:100px;
FLOAT: right;
}
.navbar-default .navbar-brand h3 {
font-weight: bold;
}
.navbar-default .navbar-nav li a {
color: #ff0000;
font-weight: bold;
height: 65px;
line-height: 30px;
FONT-SIZE: 14.5px;
}
.navbar-default .navbar-nav li a:hover {
color: #0066cc;
ul {
list-style:none;
padding:0;
}
}
.navbar-default .navbar-nav > li > a:focus {
color: #0066cc;
}
.navbar-default .navbar-toggle {
margin-top: 16px;
}
.navbar-default .navbar-toggle .icon-bar {
background-color: #66AF33;
color: #FFFFFF;
}
.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus {
color: #0066cc;
background-color: transparent;
}
.navbar-default .navbar-toggle:hover, .navbar-default .navbar-toggle:focus {
background-color: #FFFFFF;
}
.navbar-default .navbar-toggle:hover .icon-bar {
backgroundcolor:#66AF33;
}


You can try below code:
$(document).scroll(function() {
if ($(this).scrollTop() > 150) {
$('.navbar').css('position','fixed');
$('.navbar').css('top','0');
}
else {
$('.navbar').css('position','static');
}
});
Here in above code 150 is dummy value you can try a number as per your requirement.
OR
Try this link : http://www.backslash.gr/demos/jquery-sticky-navigation/


example
<li>Menu 2
<ul>
<li>Sub Menu 1</li>
<li>Sub Menu 2</li>
<li>Sub Menu 3</li>
</ul>

Related

How to get collapsed box to appear on smaller resolutions

I was wondering if you could tell me how to get a collapsable box to appear on on a website using javascript?
What I want on the website is to resize the screen (to like a mobile for example) and it replaces the nav bar with a drop down box that has to be clicked on.
Is this possible?
Thanks in advance to all!
#navLocation {
position:relative;
float: right;
top: 55;
right: 125;
font-size: 155%;
}
<div id="navLocation">
<a id="container" id="navLocation" href="index.html">home</a> about projects news contact
</div>

Here is JSFiddle
.navbar-inverse {
background-color: #000000;
margin-top:10px;
float: right;
border: none;
margin-right: 10px;
border-radius: 0px;
}
.navbar-inverse .navbar-nav > .active > a, .navbar-inverse .navbar-nav > .active > a:focus, .navbar-inverse .navbar-nav > .active > a:hover {
color: #FFFFFF;
background-color: #000000;
border: none;
}
.navbar-inverse .navbar-nav > li > a:focus, .navbar-inverse .navbar-nav > li > a:hover {
color: #FFFFFF;
background-color: 000000;
}
ul li{
font-size: 20px;
}
ul li a{
text-decoration: none;
color: #000000;
}
<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.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li>Home</li>
<li>Menu 1</li>
<li>Menu 2 </li>
<li>Menu 3</li>
</ul>
</div>
</div>
</nav>
is this the same that you want?
hope this helps.

I have made an example for you. Please have a look.
`https://jsfiddle.net/ibrahimince/yrashdfm/`
ups. I have forgotten to add jquery library. You need to add jquery library.
https://jsfiddle.net/ibrahimince/qntz5w3u/

Bootstrap Scroll Spy not working.Shows only the home state active but doesnt change to other states when scrolled down

This is my html and css.please help me with the scrollspy as I dont know what exactly is the problem .If possible let me know the code you have written to solve the problem
MY HTML:
<nav class="navbar navbar-default center navbar-fixed-top" id="navbar">
<button class="navbar-toggler hidden-sm-up"type="button" data-toggle="collapse" data-target="#exCollapsingNavbar2">☰</button>
<div class="collapse navbar-toggleable-xs" id="exCollapsingNavbar2">
<a class="navbar-brand" href="#"></a>
<div class="navbar-inner">
<ul class="nav navbar-nav">
<li class="nav-item active">
<a class="nav-link" data-target="#jumbotron">HOME <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" data-target="#about">ABOUT</a>
</li>
<li class="nav-item">
<a class="nav-link" data-target="#skills">SKILLS</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#contact">CONTACT</a>
</li>
</ul>
</div>
</div>
</nav>
<div class=" jumbotron" id="jumbotron"></div>
<div id="about"></div>
<div id="skills"></div>
<div id="contact"></div>
MY CSS
and the divs are of 750px in heights
body
{
background: none;
position: relative;
margin: 0;
padding: 0;
font-family: 'Droid Serif', Georgia, Times, serif;
}
/* --------------------------------------------Navbar CSS--------------------------------------------------- */
.navbar-default
{
background-color: #610B0B ;
border-radius:0px;
}
.navbar-default .navbar-nav > li > a
{
color: white;
font-size: 15px;
font-family: 'Droid Serif', Georgia, Times, serif;
letter-spacing: 1px;
margin: 3px 10px -3px 10px;
border: 2px solid transparent;
padding: 8px;
}
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus
{
border: 2px solid white;
border-radius: 5px;
color: white;
padding: 8px;
}
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus
{
border: 2px solid white;
border-radius: 5px;
color: #555;
background-color: #E7E7E7;
}

There are a couple of things wrong.
First, 3 of your nav-link anchors have data-target= when they should have href=
Second, you need to set the data-target= to the <body> of the navbar. This allows Javascript to find what to target with Scrollspy:
<body data-target="#navbar">
and third, if you haven't, you need to call Scrollspy via Javascript:
$('body').scrollspy({ target: '#navbar' })
Here is a Codepen with a working example:
http://codepen.io/charliebeckstrand/pen/NrWpXP

I had same problem in bootstrap 5 and downloaded bootstrap 4.3.1
and replace it with previous version.

Responsive mega-dropdown for products

I have trouble creating a mega-dropdown menu for Products. I want to create a responsive (I use Bootstrap) dropdown which drops down from the entire nav like most big companies.
Here is how it looks like:
I want the dropdown to be from NAME to CONTACT. I will populate it with divs with pictures and text. How can I do that?
Advice, directions or explanation would be very helpful. Thanks in advance.
Here is the navigation in the HTML file:
<nav id="mainNav" class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" 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 page-scroll" href="#page-top">INVACU</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 navbar-right">
<li>
<a class="page-scroll" href="#about">About</a>
</li>
<li>
<a class="page-scroll" href="#services">Services</a>
</li>
<li class="dropdown">
<a data-toggle="dropdown" class="dropdown-toggle" href="#">Products <b class="caret"></b></a>
<ul class="dropdown-menu">
<li>VSU 200</li>
</ul>
</li>
<li>
<a class="page-scroll" href="#portfolio">Portfolio</a>
</li>
<li>
<a class="page-scroll" href="#contact">Contact</a>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
Here is the navigation in the CSS file:
.navbar-default {
border-color: rgba(34,34,34,.05);
font-family: 'Open Sans','Helvetica Neue',Arial,sans-serif;
background-color: #fff;
-webkit-transition: all .35s;
-moz-transition: all .35s;
transition: all .35s;
}
.navbar-default .navbar-header .navbar-brand {
text-transform: uppercase;
font-family: 'Open Sans','Helvetica Neue',Arial,sans-serif;
font-weight: 700;
color: #f05f40;
}
.navbar-default .navbar-header .navbar-brand:hover,
.navbar-default .navbar-header .navbar-brand:focus {
color: #eb3812;
}
.navbar-default .nav > li>a,
.navbar-default .nav>li>a:focus {
text-transform: uppercase;
font-size: 13px;
font-weight: 700;
color: #222;
}
.navbar-default .nav > li>a:hover,
.navbar-default .nav>li>a:focus:hover {
color: #f05f40;
}
.navbar-default .nav > li.active>a,
.navbar-default .nav>li.active>a:focus {
color: #f05f40!important;
background-color: transparent;
}
.navbar-default .nav > li.active>a:hover,
.navbar-default .nav>li.active>a:focus:hover {
background-color: transparent;
}
#media(min-width:768px) {
.navbar-default {
border-color: rgba(255,255,255,.3);
background-color: transparent;
}
.navbar-default .navbar-header .navbar-brand {
color: rgba(255,255,255,.7);
}
.navbar-default .navbar-header .navbar-brand:hover,
.navbar-default .navbar-header .navbar-brand:focus {
color: #fff;
}
.navbar-default .nav > li>a,
.navbar-default .nav>li>a:focus {
color: rgba(255,255,255,.7);
}
.navbar-default .nav > li>a:hover,
.navbar-default .nav>li>a:focus:hover {
color: #fff;
}
.navbar-default.affix {
border-color: rgba(34,34,34,.05);
background-color: #fff;
}
.navbar-default.affix .navbar-header .navbar-brand {
font-size: 14px;
color: #f05f40;
}
.navbar-default.affix .navbar-header .navbar-brand:hover,
.navbar-default.affix .navbar-header .navbar-brand:focus {
color: #eb3812;
}
.navbar-default.affix .nav > li>a,
.navbar-default.affix .nav>li>a:focus {
color: #222;
}
.navbar-default.affix .nav > li>a:hover,
.navbar-default.affix .nav>li>a:focus:hover {
color: #f05f40;
}
}

Make text in Bootsrap navbar responsive

I asked this question yesterday about how to make my navbar menu change from horizontal to vertically stacked depending on layout but now I notice when I make my text suitable for my large monitor it doesnt work when I shrink the window down. Is there a way I can make my text more responsive? if not do you have another menu approach? Also how can I center the Menu buttons when horizontal?
My JSFiddle
MY CSS
.menu {
background-color: rgba(0, 0, 0, 0.5);
filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=1, startColorStr="#E6FFFFFF", endColorStr="#E6FFFFFF");
-ms-filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=1, startColorStr="#E6FFFFFF", endColorStr="#E6FFFFFF");
}
.menutext {
color: #FFFFFF;
font-size: 2em;
white-space: nowrap;
}
.row.text-center > div {
display: inline-block;
float: none;
}
/*-----------------------------------------------------------
Bootstrap Overrides
-----------------------------------------------------------*/
* {
border-radius: 0 !important;
}
.navbar-default {
background-color: rgba(0, 0, 0, 0.5);
color: #FFFFFF;
position: relative;
top: -58px;
padding: 0px;
margin: 0px;
border: 0px;
}
.navbar-default .navbar-nav > .active {
color: #000;
background: #FFFFFF;
}
.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus, .navbar-default .navbar-nav > .active > a:link, .navbar-default .navbar-nav > .active > a:visited {
color: #000;
background: #ffffff;
}
.navbar-default .navbar-brand {
color: #ffffff;
}
.navbar-default .navbar-nav > li > a {
color: #ffffff;
}
.navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus {
color: #000000;
background-color: #e4e4e4;
}
.navbar-default .navbar-nav > .open > a, .navbar-default .navbar-nav > .open > a:hover, .navbar-default .navbar-nav > .open > a:focus {
color: #000000;
background-color: #e4e4e4;
}
.navbar-default .navbar-nav > .dropdown > a .caret {
border-top-color: #ffffff;
border-bottom-color: #ffffff;
}
.navbar-default .navbar-nav > .dropdown > a:hover .caret, .navbar-default .navbar-nav > .dropdown > a:focus .caret {
border-top-color: #000000;
border-bottom-color: #000000;
}
.navbar-default .navbar-nav > .open > a .caret, .navbar-default .navbar-nav > .open > a:hover .caret, .navbar-default .navbar-nav > .open > a:focus .caret {
border-top-color: #000000;
border-bottom-color: #000000;
}
.navbar-default .navbar-toggle {
border-color: #d65c14;
}
.navbar-default .navbar-toggle:hover, .navbar-default .navbar-toggle:focus {
background-color: #e4e4e4;
}
.navbar-default .navbar-toggle .icon-bar {
background-color: #ffffff;
}
/*Style for Bigger Screens*/
#media (min-width: 768px) {
.navbar-default a {
color: white;
}
.navbar-default li a:hover {
color: black;
}
}
/*Style for Smaller Screens*/
#media (max-width: 767px) {
.navbar-default {
top: 0px;
background: #808184;
}
.navbar-default li {
border-bottom: 1px;
border-bottom-style:solid;
border-color:#FFF;
}
}
MY HTML
<div class="container-fluid">
<div class="row">
<div class="col-sm-12" style="background-color:#FABC41; height: 50px;">BAR</div>
</div>
<div class="row">
<div class="col-sm-12" style="padding:0;">
<img class="img-responsive" src="http://travelandwildlifephotography.com/wp-content/uploads/2014/07/Camping-on-Fraser-Island1.jpg" alt="CLI Engage">
</div>
</div>
</div>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div>
<ul class="nav navbar-nav">
<li class="active"><a class="menutext" href="Home.html">Home</a>
</li>
<li><a class="menutext" href="AboutUs.html">About Us</a>
</li>
<li class="dropdown"> <a class="dropdown-toggle menutext" data-toggle="dropdown" href="#">Tools<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a class="menutext" href="#">Child Progres Monitoring</a>
</li>
<li><a class="menutext" href="#">Online Courses</a>
</li>
<li><a class="menutext" href="#">Classroom Observation Tools</a>
</li>
<li><a class="menutext" href="#">Coaching & Collaboration Tools</a>
</li>
<li><a class="menutext" href="#">Activities</a>
</li>
<li><a class="menutext" href="#">Texas Kindergarten Entry Assessment</a>
</li>
</ul>
</li>
<li><a class="menutext" href="#">Parents & Families</a>
</li>
<li><a class="menutext" href="#">Parents & Families</a>
</li>
<li><a class="menutext" href="#">Calendar</a>
</li>
<li><a class="menutext" href="#">Contact Us</a>
</li>
<li><a class="menutext" href="#">Help</a>
</li>
<li><a class="menutext" href="#"><span class="glyphicon glyphicon-search" aria-hidden="true"></span></a>
</li>
</ul>
</div>
</div>
</nav>

You can make text responsive using the viewport units. vw, vh, vmin, vmax. These being view width, view height, view minimum, view maximum. These will scale with your screen size. For example: 1vw = 1% of the screen width. Note this is not compatible with old browsers.
CSS example
font-size:3.5vmin;

You can use media queries to set font size in mobile view
#media screen and (max-width: 480px)
{
body {
font-size: 1.5em;
}
}
and to center align buttons, add this class -
.nav li a {
text-align: center;
}

Dropdown menu closing after clicking on any input box

I have created a drop-down menu, in which I have created a form for search criteria.
Now, whenever I click on any input box then the menu gets closed.
Is there any way to solve it.
here is my html code :
<ul class="nav navbar-nav">
<li class="dropdown dropdown-large">
Search<b class="caret"></b>
<ul class="dropdown-menu dropdown-menu-large row">
<center>Search Criteria</center>
<hr>
<li class="col-sm-3">
<ul>
<li>Profile ID</li>
<li>
<input type="text">
</li>
</ul>
</li>
<li class="col-sm-3">
<ul>
<li>Name</li>
<li>
<input type="text">
</li>
</ul>
</li>
<li class="col-sm-3">
<ul>
<li>Age</li>
<li>
<input type="text" size="5"> to
<input type="text" size="5">
</li>
</ul>
</li>
<li class="col-sm-3">
<ul>
<li>Date of Birth</li>
<li>
<input type="date">
</li>
</ul>
</li>
</ul>
</li>
and my css code :
.dropdown-large {
position: static !important;
}
.dropdown-menu-large {
margin-left: 16px;
margin-right: 16px;
padding: 20px 0px;
}
.dropdown-menu-large > li > ul {
padding: 0;
margin: 0;
}
.dropdown-menu-large > li > ul > li {
list-style: none;
}
.dropdown-menu-large > li > ul > li > a {
display: block;
padding: 3px 20px;
clear: both;
font-weight: normal;
line-height: 1.428571429;
color: #333333;
white-space: normal;
}
.dropdown-menu-large > li ul > li > a:hover,
.dropdown-menu-large > li ul > li > a:focus {
text-decoration: none;
color: #262626;
background-color: #f5f5f5;
}
.dropdown-menu-large .disabled > a,
.dropdown-menu-large .disabled > a:hover,
.dropdown-menu-large .disabled > a:focus {
color: #999999;
}
.dropdown-menu-large .disabled > a:hover,
.dropdown-menu-large .disabled > a:focus {
text-decoration: none;
background-color: transparent;
background-image: none;
filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
cursor: not-allowed;
}
.dropdown-menu-large .dropdown-header {
color: #428bca;
font-size: 18px;
}
#media (max-width: 768px) {
.dropdown-menu-large {
margin-left: 0 ;
margin-right: 0 ;
}
.dropdown-menu-large > li {
margin-bottom: 30px;
}
.dropdown-menu-large > li:last-child {
margin-bottom: 0;
}
.dropdown-menu-large .dropdown-header {
padding: 3px 15px !important;
}
}

Try to use e.stopPropagation():
$(document).on('click', '.dropdown', function (e) {
e.stopPropagation();
});
Bootply Demo

Categories

Resources