I'm working on this website here:
https://shmoss.github.io/Gibbs-Lab/index.html
As you can see, I have a nav-bar with buttons for navigation. Normally, I set all the buttons as links to go to different pages, but to demonstrate the issue I'm having, they are all set to go to the homepage (index.html).
The problem is that when clicking a button other than "about", the green highlighting doesn't highlight the button as "active". When you click on a button, I want it to get the 'active' class and have the green border. Currently, selecting another button does nothing.
HTML:
<div class="collapse navbar-collapse text-left" id="navbarNav">
<ul id = "navPills" class=" nav-pills navbar-nav ml-auto">
<li>
<a href="index.html" id="aboutPill" class="btn btn-s-md btn-white m-b active">ABOUT
</a>
</li>
<li>
<a href="index.html" id="peoplePill" class="btn btn-s-md btn-white m-b">
PEOPLE
</a>
</li>
<li>
<a href="index.html" id="researchPill" class="btn btn-s-md btn-white m-b">RESEARCH
</a>
</li>
<li>
<a href="index.html" id="publicationsPill" class="btn btn-s-md btn-white m-b">PUBLICATIONS
</a>
</li>
<li>
<a href="index.html" id="mediaPill" class="btn btn-s-md btn-white m-b">
MEDIA
</a>
</li>
<li>
<a href="index.html" id="teachingPill" class="btn btn-s-md btn-white m-b">
TEACHING
</a>
</li>
</ul>
</div>
CSS:
.btn {
background-color:#f7f7f7 !important;
color:#0c2d1c;
border:none;
}
.btn.active{
background-color:#0c2d1c !important;
color:#f7f7f7 !important;
box-shadow:none !important;
}
.btn:hover{
background-color:#0c2d1c !important;
color:#f7f7f7 !important;
box-shadow:none !important;
}
.btn:focus{
background-color:#0c2d1c !important;
color:#f7f7f7 !important;
box-shadow:none !important;
}
JS:
// .btn is the class of the element you want to change color
var $btns = $('.btn').click(function() {
$btns.removeClass('active');
$(this).addClass('active');
})
Try this.
$(function(){
var current = location.pathname;
$('.navbar-collapse ul li a').each(function(){
var $this = $(this);
// if the current path is like this link, make it active
if($this.attr('href').indexOf(current) !== -1){
$this.addClass('active');
}
})
})
Related
I have a navbar menu in Bootstrap 4. When I resize the page, it resizes after a certain size threshold, but before it collapses, the far-right item "Opportunities" in the navbar is being cutoff.
In other words, it's cutting off items - it eventually collapses if the window gets too small - but before that, it's cutting off. See photo here:
Is there an easy fix here? Code below..
/* ------------------------------Navigation------------------------------*/
/* Navigation pills */
#navPills li{
padding:6px 6px 6px 6px !important;
font-size: 14px !important;
}
#nav-pills ul{
}
/* Navigation pills text*/
.btn.btn-s-md.btn-white.m-b {
font-size: 14px !important;
letter-spacing: .04em;
}
.navbar {
background-color:#f7f7f7 !important;
padding-bottom:10px;
border-bottom:1px solid #E6E7E8;
-webkit-box-shadow: 0px 1px 2px rgba(159,159,155,0.4)
}
#toggle {
background-color:none;
color:black;
}
.nav-item {
text-align: right;
padding:0px 10px 0px 10px
}
.nav-link {
text-align:left;
font-size:14px;
color:#0c2d1c !important;
}
#navbarNav {
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link href="https://cdn.jsdelivr.net/gh/gitbrent/bootstrap4-toggle#3.6.1/css/bootstrap4-toggle.min.css" rel="stylesheet">
<body>
<!-- Navigation -->
<nav id="navbar" class="navbar navbar-expand-lg navbar-light bg-dark sticky-top">
<a class="navbar-brand" href="#">
<div class="logo_subheader">
Land Use and Environment Lab
<br>
</div>
<div class="logo_header">
GLUE
<br>
</div>
</a>
<button id="toggle" class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse text-left" id="navbarNav">
<ul id = "navPills" class=" nav-pills navbar-nav ml-auto">
<li>
<a href="index.html" class="btn btn-s-md btn-white m-b active">ABOUT
</a>
</li>
<li>
<a href="people.html" class="btn btn-s-md btn-white m-b">
PEOPLE
</a>
</li>
<li>
<a href="research.html" class="btn btn-s-md btn-white m-b">RESEARCH
</a>
</li>
<li>
<a href="publications.html" class="btn btn-s-md btn-white m-b">PUBLICATIONS
</a>
</li>
<li>
<a href="media.html" class="btn btn-s-md btn-white m-b">
MEDIA
</a>
</li>
<li>
<a href="teaching.html" class="btn btn-s-md btn-white m-b">
TEACHING
</a>
</li>
<li>
<a href="opportunities.html" class="btn btn-s-md btn-white m-b">
OPPORTUNITIES
</a>
</li>
</ul>
</div>
</nav>
</body>
<script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/gh/gitbrent/bootstrap4-toggle#3.6.1/js/bootstrap4-toggle.min.js"></script>
Based on Bootstrap 4 docs for Navbar example (https://getbootstrap.com/docs/4.0/components/navbar/), I would erase your li classes as they seem to cause the overlap with the edge of the viewport to happen.
If you put these classes on your ul element you will have the same lg collapse and styling of buttons. See code below for the changes I am referring to.
<nav id="navbar" class="navbar navbar-expand-lg navbar-light bg-dark sticky-top">
<a class="navbar-brand" href="#">
<div class="logo_subheader">
Land Use and Environment Lab
<br>
</div>
<div class="logo_header">
GLUE
<br>
</div>
</a>
<button id="toggle" class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse text-left" id="navbarNav">
<ul id="navPills" class=" nav-pills navbar-nav ml-auto btn btn-s-md btn-white m-b">
<li>
<a href="index.html">ABOUT
</a>
</li>
<li>
<a href="people.html">
PEOPLE
</a>
</li>
<li>
<a href="research.html">RESEARCH
</a>
</li>
<li>
<a href="publications.html">PUBLICATIONS
</a>
</li>
<li>
<a href="media.html">
MEDIA
</a>
</li>
<li>
<a href="teaching.html">
TEACHING
</a>
</li>
<li>
<a href="opportunities.html">
OPPORTUNITIES
</a>
</li>
</ul>
</div>
I have created a dropdown in button hover,
I also try the transition css property on my code but its not working to come dropdown smoothly.
This below code is bootstrap dropdown code please suggest me to where i put the right code
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
}
.dropdown:hover > .dropdown-content {
display: block;
top: 35px;
}
<div class="dropdown p-0">
<button type="button" class="btn btn-icon btn-light" data-toggle="dropdown" aria-expanded="false">
dropdown
</button>
<div class="dropdown-arrow"></div>
<ul class="dropdown-menu dropdown-menu-right dropdown-content">
<li> <a class="dropdown-item"><i class="fe fe-file-text mr-2"
aria-hidden="true"></i>Add Task</a></li>
<li> <a class="dropdown-item"><i class="fe fe-zap mr-2"
aria-hidden="true"></i>Add Risk</a></li>
<li> <a class="dropdown-item"><i class="fe fe-trending-up mr-2"
aria-hidden="true"></i>Add Milestone</a></li>
<li> <a class="dropdown-item" ><i class="fe fe-trash-2 mr-2"
aria-hidden="true"></i>Remove Me form This Project</a> </li>
<li> <a class="dropdown-item" ><i class="fe fe-edit mr-2"
aria-hidden="true"></i>Edit</a> </li>
<li> <a class="dropdown-item"><i class="fe fe-check-circle mr-2"
aria-hidden="true"></i>Complete</a></li>
</ul>
</div>
Since you didn't share all the code, first of all you can't add transition at display property, you didn't add transition for top property.
Try to hide .downtown-content with transform: translateY(-100%), and then in hover
transform: translateY(0); transition: all .25s linear (or add your transition here)
I'm using a css class to allow me to put an 'add' link and an 'edit' link side-by-side in the same item on a Bootstrap dropdown list.
<li class="multilink"><a data-toggle="modal" data-target="#.."><span class="glyphicon glyphicon-plus "></span></a></span> Collections</li>
Edit: the whole menu item
<li class="dropdown">
<span class="glyphicon glyphicon-cog" aria-hidden="true"></span><span class="caret"></span>
<ul class="dropdown-menu dropdown-menu-right" >
<li>
<a data-toggle="modal" data-target="#SectionRosterModal">Roster
</a>
</li>
<!-- Announcments -->
<li class="multilink">
<a data-toggle="modal" data-target="#AnnouncementAddModal">
<span class="glyphicon glyphicon-plus glyphhover pointerhover">
</span>
</a>
<a href ={% url 'gbook:editlist' to_edit='ann' Course_id=this_course.pk Section_id=active_section.pk %}>
<span class="glyphicon glyphicon-edit glyphhover">
</span> Announcements
</a>
</li>
{# <li>Edit Announcements</li> #}
<!-- Courses -->
<li class="multilink">
<a data-toggle="modal" data-target="#CourseAddModal">
<span class="glyphicon glyphicon-plus glyphhover pointerhover">
</span>
</a>
<a href={% url 'gbook:doedit' to_edit='cou' pk=this_course.pk Course_id=this_course.pk Section_id=active_section.pk %}>
<span class="glyphicon glyphicon-edit glyphhover">
</span> Course
</a>
</li>
<!-- Sections -->
<li class="multilink">
<a data-toggle="modal" data-target="#SectionAddModal">
<span class="glyphicon glyphicon-plus glyphhover pointerhover">
</span>
</a>
<a href ={% url 'gbook:editlist' to_edit='sec' Course_id=this_course.pk Section_id=active_section.pk %}>
<span class="glyphicon glyphicon-edit glyphhover">
</span> Sections
</a>
</li>
<!-- Scollections -->
<li class="multilink">
<a data-toggle="modal" data-target="#ScollectionAddModal">
<span class="glyphicon glyphicon-plus glyphhover pointerhover">
</span>
</a>
<a href ={% url 'gbook:editlist' to_edit='sco' Course_id=this_course.pk Section_id=active_section.pk %}>
<span class="glyphicon glyphicon-edit glyphhover">
</span> Scollections
</a>
</li>
</ul>
</li>
CSS:
.dropdown-menu > li > a:hover {
background-image: none;
}
.open> ul>li.multilink{
display: inline-flex !important;
}
The item looks like this:
What I want is for the two icons to be fairly snug on the LHS, followed by the text (linked to the edit link). Additionally, is there any way to disable the active link color change? I have taken off the background-image, but there's still an associated color change.
So I put the code you provided into a JSFiddle. With just Bootstrap CSS the two glypicons are right next to each other. Can you provide more of you html and css because something else is causing the styling you do not want.
https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css
<ul>
<li class="multilink">
<a data-toggle="modal" data-target="#..">
<span class="glyphicon glyphicon-plus "></span>
</a>
<a href ="">
<span class="glyphicon glyphicon-edit"></span> Collections
</a>
</li>
</ul>
I will edit my answer when you provide more html and css
** EDIT **
In bootstrap's css file they have this:
.dropdown-menu>li>a {
display: block;
padding: 3px 20px;
clear: both;
font-weight: 400;
line-height: 1.42857143;
color: #333;
white-space: nowrap;
}
That css is causing there to be 20px of padding between your two links. Adjust the padding to get the appearance you are looking for.
.dropdown-menu>li>a {
padding: 3px 5px;
}
I have a JS Fiddle
https://jsfiddle.net/zuer7g75/1/
<body>
<div class="navbar navbar-default" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".category-navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse category-navbar-collapse">
<ul class="nav navbar-nav">
<li><span class="glyphicon glyphicon-home"></span></li>
<li>
<a href="/computers">
Computers
</a>
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
<i class="fa fa-angle-down"></i>
</a>
<ul class="dropdown-menu">
<li>
<a href="/desktops">
Desktops
</a>
</li>
<li>
<a href="/notebooks">
Notebooks
</a>
</li>
<li>
<a href="/software">
Software
</a>
</li>
</ul>
</li>
<li>
<a href="/electronics">
Electronics
</a>
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
<i class="fa fa-angle-down"></i>
</a>
<ul class="dropdown-menu">
<li>
<a href="/camera-photo">
Camera & photo
</a>
</li>
<li>
<a href="/cell-phones">
Cell phones
</a>
</li>
<li>
<a href="/others">
Others
</a>
</li>
</ul>
</li>
<li>
<a href="/apparel">
Apparel
</a>
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
<i class="fa fa-angle-down"></i>
</a>
<ul class="dropdown-menu">
<li>
<a href="/shoes">
Shoes
</a>
</li>
<li>
<a href="/clothing">
Clothing
</a>
</li>
<li>
<a href="/accessories">
Accessories
</a>
</li>
</ul>
</li>
<li>
<a href="/digital-downloads">
Digital downloads
</a>
</li>
<li>
<a href="/books">
Books
</a>
</li>
<li>
<a href="/jewelry">
Jewelry
</a>
</li>
<li>
<a href="/gift-cards">
Gift Cards
</a>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>
<form action="/search" method="get" onsubmit="return check_small_search_form()"> <div class="search_box pull-right">
<input type="text" id="small-searchterms" autocomplete="off"
value="Search store" name="q" onfocus="if(this.value=='Search store')this.value=''" onblur="if(this.value=='') {this.value = 'Search store';}" />
</div>
<script>
$(document).ready(function () {
$('.navbar a.dropdown-toggle').on('click', function (e) {
var elmnt = $(this).parent().parent();
if (!elmnt.hasClass('nav')) {
var li = $(this).parent();
var heightParent = parseInt(elmnt.css('height').replace('px', '')) / 2;
var widthParent = parseInt(elmnt.css('width').replace('px', '')) - 10;
if (!li.hasClass('open')) li.addClass('open')
else li.removeClass('open');
$(this).next().css('top', heightParent + 'px');
$(this).next().css('left', widthParent + 'px');
return false;
}
});
});
</script>
<script>
function setMouseHoverDropdown() {
if ($(window).innerWidth() > 767) {
$('ul.nav li').hover(function () {
$(this).find('> .dropdown-menu').stop(true, true).delay(200).fadeIn(500);
}, function () {
$(this).find('> .dropdown-menu').stop(true, true).delay(200).fadeOut(500);
});
}
}
$(window).load(function () {
setMouseHoverDropdown();
});
$(document).ready(function () {
setMouseHoverDropdown();
});
$(window).resize(function () {
setMouseHoverDropdown();
});
</script>
</body>
In JS fiddle , by default you will see a mobile menu.
Please expand the result menu of JS fiddle to maximum. now you will see the web view instead of mobile.
It has a menu which says computers electronics etc and you can see a search box on the right hand side.
Now if you try to decrease the width of jsfiddle result window slowly, you can see the search box jumpind down to bottom.
I want the search menu to stay in same line as the menu, instead wrap the contents of menu into two lines..
How do I do that.
I have a drop down menu that opens a row of icons underneath it (see picture 1, names and pictures were removed to maintain privacy)
I am trying to make this menu to open to the right of choose child, and not underneath it (see picture 2, of what I am trying to get. the Images will open to the right of the drop down and not under it)
My current code is:
<div class="span4">
<div class="btn-group">
<a class="btn btn-link dropdown-toggle" data-toggle="dropdown" href="#">
<h3>Choose Child</h3>
<img id="mainIcons" src="boyStudent.png" alt="boyStudent">
<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>
<div class="btn-group">
<a href="parent_homepage_2.html" style="text-align:center;" class="btn btn-link operationsButtons">
<h5>A</h5>
<img id="mainIcons" src="boyStudent.png" alt="boyStudent"></a>
<a href="parent_homepage_2.html" style="text-align:center;" class="btn btn-link operationsButtons">
<h5>J</h5>
<img id="mainIcons" src="girlStudent.png" alt="girlStudent"></a>
</div>
</li>
</ul>
I tried to use the following example, that helps push the drop down to the left
how to make twitter bootstrap submenu to open on the left side?
but I could not figure out a way to use this to what I am looking to do
Thanks
How does this look:-
Demo
Demo2 Submenu dropping down.
<div class="span4">
<div class="btn-group"> <a class="btn btn-link dropdown-toggle" data-toggle="dropdown" href="#">
<h3>Choose Child</h3>
<img id="mainIcons" src="boyStudent.png" alt="boyStudent">
<span class="right-caret right"></span>
</a>
<ul class="dropdown-menu rightMenu">
<li>
<div class="btn-group"> <a href="parent_homepage_2.html" style="text-align:center;" class="btn btn-link operationsButtons">
<h5>A</h5>
<img id="mainIcons" src="boyStudent.png" alt="boyStudent"></a>
<a href="parent_homepage_2.html" style="text-align:center;" class="btn btn-link operationsButtons">
<h5>J</h5>
<img id="mainIcons" src="girlStudent.png" alt="girlStudent"></a>
</div>
</li>
</ul>
</div>
css
.rightMenu {
position:relative;
float:right;
}
.right-caret {
border-bottom: 4px solid transparent;
border-top: 4px solid transparent;
border-left: 4px solid #000000;
display: inline-block;
height: 0;
opacity: 1;
vertical-align: top;
width: 0;
}
.right
{
float:right;
}
Just add the class "pull-right" into the <ul class="dropdown-menu"> this way...
<li class="dropdown">
<a class="dropdown-toggle" href="#">Link</a>
<ul class="dropdown-menu pull-right">
<li>...</li>
</ul>
</li>
I just add this class to the dropdown-menu:
.rightMenu {
position:absolute;
float:right;
top: 0;
left: 160px;
}
And it aligns perfectly.
To those who may find this page in the future, the now official way of doing this is with adding the .dropdown-menu-right class to your dropdown list.