So I am developing an Angular 4 app using a bootstrap menu. The Nav is a component that is shown in all views of the app. When you use the submenu link you get a page swap but the nav resets to the default state. I need it to remember the last state it was in or prevent the collapse from happening. I looked at examples on Stack that use jQuery, however, I am using Angular 4, so that would not be a solution for me here. Check out the other examples I have looked at for solutions:
How do I keep the child menu open when loaded?
bootstrap dropdown open on pageload
Keep Bootstrap Dropdown open in Navbar no matter what
How to keep a submenu open when the page changes
Bootstrap toggle menu expand on page load
The one using localStorage was an interesting idea but I couldn't figure that out. Anyways here is the code I have:
nav.component.html
<div class="nav flex-column col-sm-3 col-md-2">
<div class="nav-title" (mouseenter)="mouseEnter($event)" (mouseleave)="mouseLeave($event)">
<div [ngClass]="search">
<img src="../../assets/img/INEO-LOGO.svg" alt="ineo-logo" class="logo">
<i class="fa fa-search fa-1x search-icon" aria-hidden="true"></i>
<input type="text" class="form-control nav-subtext" placeholder="Search Transferee">
<i class="glyphicon glyphicon-remove-circle clear" (click)="clear()"></i>
</div>
</div>
<li class="nav-menu nav-text">
<a routerLink="#" class="nav-link">Transferee Dashboard</a>
</li>
<li class="nav-menu nav-text">
<a routerLink="#" class="nav-link">Setup</a>
</li>
<li class="nav-menu nav-text">
<a routerLink="#" class="nav-link">Accounting</a>
</li>
<li class="nav-menu nav-text" data-toggle="collapse" data-target="#collapse" (click)="toggleCollapse($event)" id="toggle">
<a class="{{nav}}" id="tools">Tools</a>
<div class="collapse" id="collapse">
<ul class="submenu">
<li class="nav-subtext">
<a routerLink="/approvals">Approvals</a>
</li>
<li class="nav-subtext">
<a routerLink="/change-auth">Change Authorization ID</a>
</li>
<li class="nav-subtext">
<a routerLink="/copyfile">Copy Files</a>
</li>
<li class="nav-subtext">
<a routerLink="/email">Email</a>
</li>
<li class="nav-subtext">
<a routerLink="/templates">Email Templates</a>
</li>
<li class="nav-subtext">
<a routerLink="/encrypt">Encryption</a>
</li>
<li class="nav-subtext">
<a routerLink="/excel-import">Excel Import</a>
</li>
<li class="nav-subtext">
<a routerLink="/formulas">Formulas</a>
</li>
<li class="nav-subtext">
<a routerLink="/global-updates">Global Updates</a>
</li>
<li class="nav-subtext">
<a routerLink="/import-export">Import Export</a>
</li>
<li class="nav-subtext">
<a routerLink="/maintain-log">Maintain Log</a>
</li>
<li class="nav-subtext">
<a routerLink="/preferences">Preferences</a>
</li>
<li class="nav-subtext">
<a routerLink="/restore-delete-history">Restore/Delete/History</a>
</li>
<li class="nav-subtext">
<a routerLink="/task-policies">Task Policies</a>
</li>
<li class="nav-subtext">
<a routerLink="/ticklers">Ticklers</a>
</li>
<li class="nav-subtext">
<a routerLink="/unlock">Unlock Records</a>
</li>
<li class="nav-subtext">
<a routerLink="/user-tasks">User Tasks</a>
</li>
</ul>
</div>
</li>
<li class="nav-menu nav-text">
<a routerLink="#" class="nav-link">Reports</a>
</li>
<li class="nav-menu nav-text">
<a routerLink="#" class="nav-link">Custom</a>
</li>
<li class="nav-menu nav-text">
<a routerLink="#" class="nav-link">Tax</a>
</li>
<li class="nav-menu nav-text">
<a routerLink="#" class="nav-link">Lump Sum</a>
</li>
<li class="nav-menu nav-text">
<a routerLink="#" class="nav-link">Global Compensation</a>
</li>
<li class="nav-menu nav-text">
<a routerLink="#" class="nav-link">System Information</a>
</li>
</div>
nav.component.ts
import { Component, OnInit } from '#angular/core';
#Component({
selector: 'app-nav',
templateUrl: './nav.component.html',
styleUrls: ['./nav.component.scss']
})
export class NavComponent implements OnInit {
nav: string = '';
show: boolean = false;
search: string = 'search';
toggleCollapse() {
// change show
this.show = !this.show;
// Change style of active link
if (this.show !== true) {
this.nav = 'nav-link';
} else {
this.nav = 'nav-link-active nav-menu-active-text';
}
}
mouseEnter($event) {
this.search = $event.type == 'mouseenter' ? 'search-box' : 'search';
}
mouseLeave($event) {
this.search = $event.type == 'mouseleave' ? 'search' : 'search-box';
}
clear() {
let text = document.getElementsByTagName('input');
for (let i = 0; i < text.length; i ++) {
if(text[i].type === 'text' && text[i].value !== '') {
text[i].value = '';
}
}
}
constructor() { }
ngOnInit() {
}
}
Any help would be great!
Also if you provide an answer please explain it.
Thanks
The answer to this is that the toggled list has to be outside the parent element. The problem is by clicking a submenu item the parent is refiring the toggle.
See HTML:
<div class="nav flex-column col-sm-3 col-md-2">
<div class="nav-title" (mouseenter)="mouseEnter($event)" (mouseleave)="mouseLeave($event)">
<div [ngClass]="search">
<img src="../../assets/img/INEO-LOGO.svg" alt="ineo-logo" class="logo">
<i class="fa fa-search fa-1x search-icon" aria-hidden="true"></i>
<input type="text" class="form-control nav-subtext" placeholder="Search Transferee">
<i class="glyphicon glyphicon-remove-circle clear" (click)="clear()"></i>
</div>
</div>
<li class="nav-menu nav-text">
<a class="nav-link">Transferee Dashboard</a>
</li>
<li class="nav-menu nav-text">
<a class="nav-link">Setup</a>
</li>
<li class="nav-menu nav-text">
<a class="nav-link">Accounting</a>
</li>
<li class="nav-menu nav-text" (click)="toggleCollapse()">
<a [ngClass]=" show ? 'active' : ''">Tools</a>
</li>
<ul class="submenu" *ngIf="show">
<li class="nav-subtext">
<a >Approvals</a>
</li>
<li class="nav-subtext">
<a >Change Authorization ID</a>
</li>
<li class="nav-subtext">
<a >Copy Files</a>
</li>
<li class="nav-subtext">
<a >Email</a>
</li>
<li class="nav-subtext">
<a >Email Templates</a>
</li>
<li class="nav-subtext">
<a >Encryption</a>
</li>
<li class="nav-subtext">
<a >Excel Import</a>
</li>
<li class="nav-subtext">
<a >Formulas</a>
</li>
<li class="nav-subtext">
<a >Global Updates</a>
</li>
<li class="nav-subtext">
<a >Import Export</a>
</li>
<li class="nav-subtext">
<a >Maintain Log</a>
</li>
<li class="nav-subtext">
<a >Preferences</a>
</li>
<li class="nav-subtext">
<a >Restore/Delete/History</a>
</li>
<li class="nav-subtext">
<a >Task Policies</a>
</li>
<li class="nav-subtext">
<a >Ticklers</a>
</li>
<li class="nav-subtext">
<a routerLink="unlock">Unlock Records</a>
</li>
<li class="nav-subtext">
<a >User Tasks</a>
</li>
</ul>
<li class="nav-menu nav-text">
<a class="nav-link">Reports</a>
</li>
<li class="nav-menu nav-text">
<a class="nav-link">Custom</a>
</li>
<li class="nav-menu nav-text">
<a class="nav-link">Tax</a>
</li>
<li class="nav-menu nav-text">
<a class="nav-link">Lump Sum</a>
</li>
<li class="nav-menu nav-text">
<a class="nav-link">Global Compensation</a>
</li>
<li class="nav-menu nav-text">
<a class="nav-link">System Information</a>
</li>
</div>
Related
I have a html code below, the jsfiddle link is https://jsfiddle.net/Debra321/b0d4Lupn/
<html>
<body>
<div class="side-collapse in" id="site-navigation-navbar-collapse">
<ul class="nav navbar-nav">
<li>
<a href="/" target="_self">
Home
</a>
</li>
<li class="dropdown dropdown-hover open">
<a class="dropdown-toggle" data-toggle="dropdown" aria-expanded="true">Store <b class="caret"></b></a>
<ul class="dropdown-menu col-2">
<li class="">
<a class="itemlistChange" data-url="/store/products" target="_self">
All Products
</a>
</li>
<li class="">
<a class="itemlistChange" data-url="/store/cart" target="_self">
My Cart
</a>
</li>
<li class="regularcategory"><a class="itemlistChange" data-url="/store/products/promotions">Promotions</a></li>
<li class="regularcategory"><a class="itemlistChange" data-url="/store/products/patches">Patches</a></li>
<li class="regularcategory"><a class="itemlistChange" data-url="/store/products/skincare">Skin Care</a></li>
<li class="regularcategory"><a class="itemlistChange" data-url="/store/products/maintenancekits">Maintenance Kits</a></li>
<li class="regularcategory"><a class="itemlistChange" data-url="/store/products/salestools">Sales Tools</a></li>
</ul>
</li>
<li class="dropdown dropdown-hover">
<a class="dropdown-toggle" data-toggle="dropdown">Commissions <b class="caret"></b></a>
<ul class="dropdown-menu col-2">
<li class="">
<a href="/commissions" target="_self">
Commissions
</a>
</li>
<li class="">
<a href="/rank" target="_self">
Rank Advancement
</a>
</li>
<li class="">
<a href="/volumes" target="_self">
Volumes
</a>
</li>
<li class="">
<a href="/commissions/myearnings" target="_self">
Earnings
</a>
</li>
<li class="">
<a href="/commissions-earnings" target="_self">
Commissions Earnings
</a>
</li>
<li class="">
<a href="/commissions/incomestatement" target="_self">
Income Statement
</a>
</li>
<li class="">
<a href="/commissions/commissionspaycard" target="_self">
Commissions Pay Card
</a>
</li>
<li class="">
<a href="/volume-maturity-calendar" target="_self">
Volume Maturity Calendar
</a>
</li>
<li class="">
<a href="/carry-over-volume-calendar" target="_self">
Carry Over Volume Calendar
</a>
</li>
<li class="">
<a href="/commissions/matchingbonus" target="_self">
Bonus Qualification
</a>
</li>
</ul>
</li>
<li class="dropdown dropdown-hover">
<a class="dropdown-toggle" data-toggle="dropdown">Organization <b class="caret"></b></a>
<ul class="dropdown-menu col-2">
<li class="">
<a href="/app/enrollmentredirect" target="_blank">
<i class="fa-plus"></i>
Enroll new...
</a>
</li>
<li class="">
<a href="/prepopulatedcartlist" target="_self">
Pre Populated Cart Builder
</a>
</li>
<li class="">
<a href="/personally-enrolled-team" target="_self">
Personally Enrolled Team
</a>
</li>
<li class="">
<a href="/upcoming-promotions" target="_self">
Upcoming Rank Promotions
</a>
</li>
<li class="">
<a href="/new-distributors" target="_self">
New Distributors List
</a>
</li>
<li class="">
<a href="/recent-activity" target="_self">
Recent Activity List
</a>
</li>
<li class="">
<a href="/retail-customers" target="_self">
Retail Customers
</a>
</li>
<li class="">
<a href="/preferred-customers" target="_self">
Preferred Customers
</a>
</li>
<li class="">
<a href="/reps" target="_self">
Reps
</a>
</li>
<li class="">
<a href="/binary-tree-viewer" target="_self">
Binary Tree Viewer
</a>
</li>
<li class="">
<a href="/organization/enrollertreeviewer" target="_self">
Enroller Tree Viewer
</a>
</li>
</ul>
</li>
<li>
<a href="/events" target="_self">
Events
</a>
</li>
<li>
<a href="/AutoOrder" target="_self">
Monthly Subscription Orders
</a>
</li>
<li>
<a href="/orders" target="_self">
Orders
</a>
</li>
<li>
<a href="/resources/resourcelist" target="_self">
Resources
</a>
</li>
<li class="visible-xs">
<a href="/logout" target="_self">
Sign out
</a>
</li>
</ul>
<div class="clearfix"></div>
</div>
I expect to select Organization>Binary Tree Viewer, but cannot do that successfully. Since Organization is the direct 3rd child of the ul, I try to retrieve it by
document.querySelector('#site-navigation-navbar-collapse ul > li:nth-child(3)')
But what I got is always "Promotions" in "Store". How to select the Binary Tree Viewer by CSS selectors? Any suggestions are appreciated.
I assign an active class in my menu, but the active class is not removed from the mobile menu, it always remains active. And also, if the subcategory is selected, I want the category itself to have an active class. I tried, I couldn't. Thank you in advance to the friends who helped.
For example, if category1.php page is open, "category" has the deactivated class.
function updateMenu(url) {
const active = document.querySelector('.menu-item.active');
if (active !== null) {
active.classList.remove('active');
}
const links = Array.from(document.querySelectorAll('.menu-item'));
links.forEach(function(li){
let anchor = li.querySelector("a");
if(url.indexOf(anchor.href) > -1){
li.classList.add("active");
}
});
}
updateMenu(window.location.href);
<div class="header_side_container">
<div class="header_builder_component">
<nav class="main-menu">
<ul id="menu-main-menu" class="menu">
<li class="menu-item">
<span>Home</span>
</li>
<li class="menu-item">
<span>category</span>
<ul class="sub-menu">
<li class="menu-item">
<a href="Category1.php">
<span>Category 1</span>
</a>
</li>
<li class="menu-item">
<a href="Category2.php">
<span>Category 2</span>
</a>
</li>
</ul>
</li>
<li class="menu-item">
<span>gallery</span>
</li>
<li class="menu-item">
<span>about</span>
</li>
<li class="menu-item">
<span>contact</span>
</li>
</nav>
</div>
</div>
<!--Mobil-->
<nav class="mobile_menu">
<ul id="menu-top_menu-1">
<li class="menu-item">
<span>Home</span>
</li>
<li class="menu-item">
<span>category</span>
<ul class="sub-menu">
<li class="menu-item">
<a href="Category1.php">
<span>Category 1</span>
</a>
</li>
<li class="menu-item">
<a href="Category2.php">
<span>Category 2</span>
</a>
</li>
</ul>
</li>
<li class="menu-item">
<span>gallery</span>
</li>
<li class="menu-item">
<span>about</span>
</li>
<li class="menu-item">
<span>contact</span>
</li>
</ul>
</nav>
window.location.pathname is the property you need. Once you have it, you can find the filename (last part of the whole pathname) by using .substr and .lastIndexOf.
In this code snippet, the active item is the parent of JS, I used that as an example since the location.href for these SO snippets is https://stacksnippets.net/js, hence the pathname is /js, and finally, the filename is js.
Check the code and you'll see what I mean
HIH
function updateMenu(url) {
const active = document.querySelector('.menu-item.active');
if (active !== null) {
active.classList.remove('active');
}
const links = Array.from(document.querySelectorAll('.menu-item'));
links.forEach(function(li){
let anchor = li.querySelector("a");
if(anchor.href.indexOf(url) > -1) {
const parentLI = $(li).parents('.menu-item').get(0)
if(parentLI)
parentLI.classList.add("active");
else
li.classList.add("active");
}
});
}
const pathname = window.location.pathname, filename=pathname.substr(pathname.lastIndexOf('/') + 1);
updateMenu(filename);
li.active > a span{
font-weight: bold !important;
color: red
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="header_side_container">
<div class="header_builder_component">
<nav class="main-menu">
<ul id="menu-main-menu" class="menu">
<li class="menu-item">
<span>Home</span>
</li>
<li class="menu-item">
<span>category</span>
<ul class="sub-menu">
<li class="menu-item">
<a href="Category1.php">
<span>Category 1</span>
</a>
</li>
<li class="menu-item">
<a href="js">
<span>JS</span>
</a>
</li>
<li class="menu-item">
<a href="Category2.php">
<span>Category 2</span>
</a>
</li>
</ul>
</li>
<li class="menu-item">
<span>gallery</span>
</li>
<li class="menu-item">
<span>about</span>
</li>
<li class="menu-item">
<span>contact</span>
</li>
</ul>
</nav>
</div>
</div>
<!--Mobil-->
<nav class="mobile_menu">
<ul id="menu-top_menu-1">
<li class="menu-item">
<span>Home</span>
</li>
<li class="menu-item">
<span>category</span>
<ul class="sub-menu">
<li class="menu-item">
<a href="Category1.php">
<span>Category 1</span>
</a>
</li>
<li class="menu-item">
<a href="js">
<span>JS too</span>
</a>
</li>
<li class="menu-item">
<a href="Category2.php">
<span>Category 2</span>
</a>
</li>
</ul>
</li>
<li class="menu-item">
<span>gallery</span>
</li>
<li class="menu-item">
<span>about</span>
</li>
<li class="menu-item">
<span>contact</span>
</li>
</ul>
</nav>
Below I am looking through a list of swatches and assigning the title attribute to variable and then displaying this value below the swatch.
On mouseleave if the parent has selected class I return false so that the title attribute value is still shown. However if I mouseleave from swatch where parent does not have selected class the title attribute value becomes empty as shown in the code.
How do I modify so that on mouseleave if parent does not have selected class, it uses the title attribute value from the parent selected class?
$('.producttile_swatches .swatches ul li span.swatch_color').each(function(){
$(this).mouseenter(function(){
var swatchColor = $(this);
var swatchTitle = swatchColor.attr('title');
var swatchTitleInsert = swatchColor.closest('.carousel').next();
swatchTitleInsert.html(swatchTitle);
$(this).mouseleave(function(){
if($(this).parent().hasClass('selected')){
return false;
} else {
//I want to display title attr value from parent selected//
swatchTitleInsert.html('');
}
});
});
});
span {display:block;margin-bottom:10px;width:50px;height:50px;background:#ccc;}
.swatch-title-insert {width:300px;height:50px;background:blue;color:#fff;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="carousel producttile_swatches">
<div class="swatches">
<ul>
<li class="product_swatch_list_item">
<a href="#" class="selected">
<span class="swatch_color" title="red"></span>
</a>
</li>
<li class="product_swatch_list_item">
<a href="#">
<span class="swatch_color" title="white"></span>
</a>
</li>
<li class="product_swatch_list_item">
<a href="#">
<span class="swatch_color" title="blue"></span>
</a>
</li>
</ul>
</div>
</div>
<div class="swatch-title-insert"></div>
<div class="carousel producttile_swatches">
<div class="swatches">
<ul>
<li class="product_swatch_list_item">
<a href="#">
<span class="swatch_color" title="red"></span>
</a>
</li>
<li class="product_swatch_list_item">
<a href="#" class="selected">
<span class="swatch_color" title="white"></span>
</a>
</li>
<li class="product_swatch_list_item">
<a href="#">
<span class="swatch_color" title="blue"></span>
</a>
</li>
</ul>
</div>
</div>
<div class="swatch-title-insert"></div>
<div class="carousel producttile_swatches">
<div class="swatches">
<ul>
<li class="product_swatch_list_item">
<a href="#">
<span class="swatch_color" title="red"></span>
</a>
</li>
<li class="product_swatch_list_item">
<a href="#">
<span class="swatch_color" title="white"></span>
</a>
</li>
<li class="product_swatch_list_item">
<a href="#" class="selected">
<span class="swatch_color" title="blue"></span>
</a>
</li>
</ul>
</div>
</div>
<div class="swatch-title-insert"></div>
I think this is your answer:
$('.producttile_swatches .swatches ul li span.swatch_color').each(function(){
var swatchColor = $(this);
var swatchTitle = swatchColor.attr('title');
var swatchTitleInsert = swatchColor.closest('.carousel').next();
$(this).mouseenter(function(){
swatchTitleInsert.html(swatchTitle);
$(this).mouseleave(function(){
if($(this).parent().hasClass('selected')){
return false;
} else {
var swatchTitle = $(this).closest('.producttile_swatches').find('.swatches ul li a.selected span.swatch_color').attr('title');
swatchTitleInsert.html(swatchTitle);
}
});
});
});
span {display:block;margin-bottom:10px;width:50px;height:50px;background:#ccc;}
.swatch-title-insert {width:300px;height:50px;background:blue;color:#fff;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="carousel producttile_swatches">
<div class="swatches">
<ul>
<li class="product_swatch_list_item">
<a href="#" class="selected">
<span class="swatch_color" title="red"></span>
</a>
</li>
<li class="product_swatch_list_item">
<a href="#">
<span class="swatch_color" title="white"></span>
</a>
</li>
<li class="product_swatch_list_item">
<a href="#">
<span class="swatch_color" title="blue"></span>
</a>
</li>
</ul>
</div>
</div>
<div class="swatch-title-insert"></div>
<div class="carousel producttile_swatches">
<div class="swatches">
<ul>
<li class="product_swatch_list_item">
<a href="#">
<span class="swatch_color" title="red"></span>
</a>
</li>
<li class="product_swatch_list_item">
<a href="#" class="selected">
<span class="swatch_color" title="white"></span>
</a>
</li>
<li class="product_swatch_list_item">
<a href="#">
<span class="swatch_color" title="blue"></span>
</a>
</li>
</ul>
</div>
</div>
<div class="swatch-title-insert"></div>
<div class="carousel producttile_swatches">
<div class="swatches">
<ul>
<li class="product_swatch_list_item">
<a href="#">
<span class="swatch_color" title="red"></span>
</a>
</li>
<li class="product_swatch_list_item">
<a href="#">
<span class="swatch_color" title="white"></span>
</a>
</li>
<li class="product_swatch_list_item">
<a href="#" class="selected">
<span class="swatch_color" title="blue"></span>
</a>
</li>
</ul>
</div>
</div>
<div class="swatch-title-insert"></div>
I'm working with a menu. If the user moves the cursor over principal elements of the menu, it shows a sub-menu (it has a delay to hide), but if I move the cursor over another principal element, the previous element is still showing behind the new element (and is only hide passing the delay).
How can hide the previous element when I pass the cursor over another principal element?
Below is the menu:
$('li.dropdown').hover(function() {
$(this).find('.dropdown-menu').stop(true, true).delay(100).fadeIn(100);
}, function() {
$(this).find('.dropdown-menu').stop(true, true).delay(1000).fadeOut(100);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="main-menu" class="nav navbar-nav ref">
<li class="dropdown dropdown-large option">
<a id="drop-to" href="#" class="dropdown-toggle firstTextOption">P element</a>
<ul class="dropdown-menu dropdown-menu-large row change-f">
<li class="col-sm-4 option-sm">
<ul>
<li> </li>
<li class="dropdown-header title">subelement</li>
<li class="dropdown-header title">subelement</li>
<li class="dropdown-header title">subelement</li>
<li> </li>
</ul>
</li>
</ul>
</li>
<li class="dropdown dropdown-large option">
<a id="drop-to" href="#" class="dropdown-toggle firstTextOption">P element</a>
<ul class="dropdown-menu dropdown-menu-large row change-f">
<li class="col-sm-4 option-sm">
<ul>
<li> </li>
<li class="dropdown-header title">subelement</li>
<li class="dropdown-header title">subelement</li>
</ul>
</li>
</ul>
</li>
</ul>
I changed your second menu id to #drop-two.
$(document).ready(function(){
$('.dropdown-menu, .dropdown-menu2').hide();
$('#drop-to').mouseover(function() {
$('.dropdown-menu').fadeIn();
})
$('#drop-to').mouseout(function() {
$('.dropdown-menu').fadeOut(1000);
})
$('#drop-two').mouseover(function() {
$('.dropdown-menu2').fadeIn();
})
$('#drop-two').mouseout(function() {
$('.dropdown-menu2').fadeOut(1000);
})
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="main-menu" class="nav navbar-nav ref">
<li class="dropdown dropdown-large option">
<a id="drop-to" href="#" class="dropdown-toggle firstTextOption">P element</a>
<ul class="dropdown-menu dropdown-menu-large row change-f">
<li class="col-sm-4 option-sm">
<ul>
<li> </li>
<li class="dropdown-header title">subelement</li>
<li class="dropdown-header title">subelement</li>
<li class="dropdown-header title">subelement</li>
<li> </li>
</ul>
</li>
</ul>
</li>
<li class="dropdown dropdown-large option">
<a id="drop-two" href="#" class="dropdown-toggle firstTextOption">P element</a>
<ul class="dropdown-menu2 dropdown-menu-large row change-f">
<li class="col-sm-4 option-sm">
<ul>
<li> </li>
<li class="dropdown-header title">subelement</li>
<li class="dropdown-header title">subelement</li>
</ul>
</li>
</ul>
</li>
</ul>
there is an issue my navbar-brand i put logo with img-responsive but it doesn't fit as below screen shot and code.
if i change the width and height then the responsive of image finish. and content overlap.
<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="#bs-example-navbar-collapse-1" aria-expanded="false">
<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="index.php"><img src="logo.jpg" class="img-responsive" alt="Responsive image"></a>
</div>
</div>
<div class="container">
<!-- 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 class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#"> ABOUT AIE <span class="caret"> </span> </a>
<ul class="dropdown-menu" >
<li class="size"> Home </li>
<li class="divider"> </li>
<li class="size"> Vision & Mission </li>
<li class="divider"> </li>
<li class="size"> History </li>
<li class="divider"> </li>
<li class="size"> Chairman's Message </li>
<li class="divider"> </li>
<li class="size"> Rector's Message </li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#"> ADMISSIONS <span class="caret"> </span> </a>
<ul class="dropdown-menu">
<li class="size"> Intermediate </li>
<li class="divider"> </li>
<li class="size"> Undergaduate </li>
<li class="divider"> </li>
<li class="size"> Graduate </li>
<li class="divider"> </li>
<li class="size"> Diploma Programs </li>
</ul>
</li>
<li class="dropdown" ><a class="dropdown-toggle" data-toggle="dropdown" href="#"> RESOURCES <span class="caret"> </span> </a>
<ul class="dropdown-menu">
<li class="size"> QEC Vision & Mission
<li role="presentation" class="divider"> </li>
<li class="size"> QEC Programme Teams
<li role="presentation" class="divider"> </li>
<li class="size"> Library </li>
</ul>
</li>
<li class="dropdown" ><a class="dropdown-toggle" data-toggle="dropdown" href="#"> SHORT COURSES <span class="caret"> </span> </a>
<ul class="dropdown-menu">
<li class="size"> English Language Development Centre Short Courses (ELDC) </li>
<li role="presentation" class="divider"> </li>
<li class="size"> Montessori </li>
</ul>
</li>
<li class="dropdown" ><a class="dropdown-toggle" data-toggle="dropdown" href="#"> OTHER DEPARTMENTS <span class="caret"> </span> </a>
<ul class="dropdown-menu">
<li class="size"> Continuing Professional Development (CPD) </li>
<li role="presentation" class="divider"> </li>
<li class="size"> Kids University </li>
<li role="presentation" class="divider"> </li>
<li class="size"> Need Based Training </li>
<li role="presentation" class="divider"> </li>
<li class="size"> Leadership & Management </li>
</ul>
</li>
<li class="dropdown" ><a class="dropdown-toggle" data-toggle="dropdown" href="#"> CAMPUS VIEW <span class="caret"> </span> </a>
<ul class="dropdown-menu">
<li class="size"> 3D Campus View </li>
</ul>
</li>
<li class="dropdown" ><a class="dropdown-toggle" data-toggle="dropdown" href="#"> CONTACT US <span class="caret"> </span> </a>
<ul class="dropdown-menu">
<li class="size"> Location </li>
</ul>
</li>
</div>
</nav>
</div>
and the css file is this
body { padding-top: 40px; }
#media screen and (max-width: 768px) {
body { padding-top: 0px; }
}
.navbar-default
{
background-color: #002E5F;
}
content overlap even i doesn't change the height and width
Here is your Answer
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<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>
<style>
.navbar-default
{
background-color: #002E5F;
}
</style>
</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="#bs-example-navbar-collapse-1" aria-expanded="false">
<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>
<div class="container">
<!-- 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><img src="https://www.google.co.in/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" class="img-responsive" alt="Responsive image"></li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#"> ABOUT AIE <span class="caret"> </span> </a>
<ul class="dropdown-menu" >
<li class="size"> Home </li>
<li class="divider"> </li>
<li class="size"> Vision & Mission </li>
<li class="divider"> </li>
<li class="size"> History </li>
<li class="divider"> </li>
<li class="size"> Chairman's Message </li>
<li class="divider"> </li>
<li class="size"> Rector's Message </li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#"> ADMISSIONS <span class="caret"> </span> </a>
<ul class="dropdown-menu">
<li class="size"> Intermediate </li>
<li class="divider"> </li>
<li class="size"> Undergaduate </li>
<li class="divider"> </li>
<li class="size"> Graduate </li>
<li class="divider"> </li>
<li class="size"> Diploma Programs </li>
</ul>
</li>
<li class="dropdown" ><a class="dropdown-toggle" data-toggle="dropdown" href="#"> RESOURCES <span class="caret"> </span> </a>
<ul class="dropdown-menu">
<li class="size"> QEC Vision & Mission
<li role="presentation" class="divider"> </li>
<li class="size"> QEC Programme Teams
<li role="presentation" class="divider"> </li>
<li class="size"> Library </li>
</ul>
</li>
<li class="dropdown" ><a class="dropdown-toggle" data-toggle="dropdown" href="#"> SHORT COURSES <span class="caret"> </span> </a>
<ul class="dropdown-menu">
<li class="size"> English Language Development Centre Short Courses (ELDC) </li>
<li role="presentation" class="divider"> </li>
<li class="size"> Montessori </li>
</ul>
</li>
<li class="dropdown" ><a class="dropdown-toggle" data-toggle="dropdown" href="#"> OTHER DEPARTMENTS <span class="caret"> </span> </a>
<ul class="dropdown-menu">
<li class="size"> Continuing Professional Development (CPD) </li>
<li role="presentation" class="divider"> </li>
<li class="size"> Kids University </li>
<li role="presentation" class="divider"> </li>
<li class="size"> Need Based Training </li>
<li role="presentation" class="divider"> </li>
<li class="size"> Leadership & Management </li>
</ul>
</li>
<li class="dropdown" ><a class="dropdown-toggle" data-toggle="dropdown" href="#"> CAMPUS VIEW <span class="caret"> </span> </a>
<ul class="dropdown-menu">
<li class="size"> 3D Campus View </li>
</ul>
</li>
<li class="dropdown" ><a class="dropdown-toggle" data-toggle="dropdown" href="#"> CONTACT US <span class="caret"> </span> </a>
<ul class="dropdown-menu">
<li class="size"> Location </li>
</ul>
</li>
</div>
</nav>
</div>
</body>
</html>
You need to write custom CSS for navbar-brand class. Just follow this.
.navbar{
border: none;
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
margin-bottom: 0;
height: auto;
}
.navbar-brand{
height: auto;
margin-left: 15px;/* add margin in left. Because padding is removed from left. */
padding: 5px 0; /* Remove padding from left and right. User need to click on logo not outside of logo. */
width: 200px;
}
#media (min-width: 768px){
.navbar-brand{
width: auto; /* You can change the width when you need. */
}
}
I belive that what you want can be acomplished with CSS.
.navbar-brand {
padding: 0px;
}
.navbar-brand img {
height: 100%;
width: auto;
}
Be careful, your markup seems a bit odd. Some tags are extra or missing.
Check out this fiddle for the result https://jsfiddle.net/L5r42dd6/12/