We Keep Coding

materailize css side nav is not navigating

<div class="navbar-fixed">
<nav class="nav-wrapper indigo ">
<img src="images/logo.png" class="responsive-img logo ">
<a href="#" class="sidenav-trigger" data-target="side-link">
<i class="material-icons white-text">menu</i>
</a>
<ul class="navigation hide-on-med-and-down right">
<li>
<strong class="white-text text-lighten-1 active">Home</strong>
</li>
<li>
<strong class="white-text text-lighten-1 active">Facts</strong>
</li>
<li>
<strong class="white-text text-lighten-1 active">Symtoms</strong>
</li>
<li>
<strong class="white-text text-lighten-1 active">Statistics</strong>
</li>
<li>
<strong class="white-text text-lighten-1 active">Precautions</strong>
</li>
<li>
<strong class="white-text text-lighten-1 active">Myths</strong>
</li>
</ul>
</div>
</nav>
<ul class="sidenav indigo" id="side-link">
<li>
Home
</li>
<li>
Symtoms
</li>
<li>
Statistics
</li>
<li>
Precautions
</li>
<li>
Facts
</li>
<li>
myths
</li>
</ul>
</header>
$(document).ready(function() {
$('.sidenav').sidenav();
});

Link from the menubar is not being clicked but perfectly working on pc as navbar

I copied this code from somewhere else and don't know what to link on it are as all option are being shown in menu bar but the only problem is link aren't opening.
<header class="site-navbar py-4 js-sticky-header site-navbar-target" role="banner">
<div class="mr-auto">
<nav class="site-navigation position-relative text-right" role="navigation">
<ul class="site-menu main-menu js-clone-nav mr-auto d-none d-lg-block">
<li class="active">
Home
</li>
<li class="has-children">
About Us
<ul class="dropdown">
<li>Our Teachers</li>
<li>Our School</li>
</ul>
</li>
<li>
Admissions
</li>
<li>
Courses
</li>
<li>
Contact
</li>
</ul>
</ul>
</nav>
</div>
<div class="ml-auto">
<div class="social-wrap">
<span class="icon-facebook"></span>
<span class="icon-twitter"></span>
<span class="icon-linkedin"></span>
<a href="#" class="d-inline-block d-lg-none site-menu-toggle js-menu-toggle text-black"><span
class="icon-menu h3"></span></a>
</div>
</div>
</div>
</div>
</div>
</header>

Do you have the files with the name about.html, admissions.html, courses.html, contact.html?
Just make sure you have created the files within the same directory

How to insert HTML component using KnockoutJS

I have a sidebar menu in HTML:
assets/partials/menu.html
<div class="sidebar" id="sidebar">
<div class="sidebar-inner slimscroll">
<div id="sidebar-menu" class="sidebar-menu">
<ul>
<li class="active">
<i class="la la-dashboard"></i> <span>Dashboard</span>
</li>
<li class="submenu">
<i class="la la-phone"></i> <span> Users</span> <span class="menu-arrow"></span>
<ul style="display: none;">
<li>Manage Users</li>
</ul>
</li>
<li>
<i class="la la-rocket"></i> <span>Projects</span>
</li>
<li>
<i class="la la-tasks"></i> <span>Tasks</span>
</li>
<li class="submenu">
<i class="la la-phone"></i> <span> Health Conscious</span> <span class="menu-arrow"></span>
<ul style="display: none;">
<li>Manage Programs</li>
<li>Manage Quix / Tests</li>
<li>Broadcast Message</li>
<li>Google Play Settings</li>
<li>iTunes Settings</li>
</ul>
</li>
<li>
<i class="la la-book"></i> <span>Contacts</span>
</li>
<li>
<i class="la la-tachometer"></i> <span>Employee Dashboard</span>
</li>
<li class="submenu">
<i class="la la-user"></i> <span> Employees</span> <span class="menu-arrow"></span>
<ul style="display: none;">
<li>All Employees</li>
<li>On Board New Employee</li>
<li>Employee Reports</li>
</ul>
</li>
<li>
<i class="la la-ticket"></i> <span>Tickets</span>
</li>
<li>
<i class="la la-calendar"></i> <span>Events</span>
</li>
<li>
<i class="la la-at"></i> <span>Email</span>
</li>
<li>
<i class="la la-comments"></i> <span>Chat</span> <span class="badge badge-pill bg-primary float-right">5</span>
</li>
<li>
<i class="la la-object-ungroup"></i> <span>Assets</span>
</li>
<li>
<i class="la la-question"></i> <span>Knowledgebase</span>
</li>
<li>
<i class="la la-file-pdf-o"></i> <span>Policies</span>
</li>
<li>
<i class="la la-bell"></i> <span>Activities</span>
</li>
<li>
<i class="la la-user-plus"></i> <span>Users</span>
</li>
<li class="submenu">
<i class="la la-pie-chart"></i> <span> Reports </span> <span class="menu-arrow"></span>
<ul style="display: none;">
<li> User Report </li>
<li> Invoice Report </li>
</ul>
</li>
<li>
<i class="la la-cog"></i> <span>Settings</span>
</li>
<li class="submenu">
<i class="la la-share-alt"></i> <span>Multi Level</span> <span class="menu-arrow"></span>
<ul style="display: none;">
<li class="submenu">
<span>Level 1</span> <span class="menu-arrow"></span>
<ul style="display: none;">
<li><span>Level 2</span></li>
<li class="submenu">
<span> Level 2</span> <span class="menu-arrow"></span>
<ul style="display: none;">
<li>Level 3</li>
<li>Level 3</li>
</ul>
</li>
<li>
<span>Level 2</span>
</li>
</ul>
</li>
<li>
<span>Level 1</span>
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
What I would like to do is, simply insert this html from my index page.
I tried following the tutorial on components, and all I got was a blank space where the menu was supposed to go.
Can anyone show me how to insert HTML from an external file, using knockout or not.
Thank you.
John

How to scroll a portion of my window using protractor-jasmine

I want to test by clicking an element which is only visible when the sidebar section is scrolled. The sidebar is in the left end of the website and the element is in the bottom portion of the sidebar. I used:
browser.executeScript('window.sidebar.scrollTo(0,0);').then(function ()
but it's not working.
<div class="sidebar" data-active-color="white" data-background-color="red" data-image="../assets/img/sidebar-1.jpg">
<sidebar-cmp>
<div class="logo">
<div class="logo-normal">
<a class="simple-text" href="https://www.creative-tim.com">
Creative Tim
</a>
</div>
<div class="logo-img">
<img src="/assets/img/angular2-logo-white.png">
</div>
</div>
<div class="sidebar-wrapper">
<div class="user">
<div class="photo">
<img src="../assets/img/faces/avatar.jpg">
</div>
<div class="info">
<a class="collapsed" data-toggle="collapse" href="#collapseExample">
<span>
Tania Andrew
<b class="caret"></b>
</span>
</a>
<div class="collapse" id="collapseExample">
<ul class="nav">
<li>
<a href="javascript:void(0)">
<span class="sidebar-mini">MP</span>
<span class="sidebar-normal">My Profile</span>
</a>
</li>
<li>
<a href="javascript:void(0)">
<span class="sidebar-mini">EP</span>
<span class="sidebar-normal">Edit Profile</span>
</a>
</li>
<li>
<a href="javascript:void(0)">
<span class="sidebar-mini">S</span>
<span class="sidebar-normal">Settings</span>
</a>
</li>
</ul>
</div>
</div>
</div>
<div class="nav-container">
<ul class="nav">
<li routerlinkactive="active" class="active visible">
<a href="#/dashboard">
<i class="material-icons">dashboard</i>
<p>Dashboard</p>
</a>
</li>
<li routerlinkactive="active">
<a data-toggle="collapse" href="#componentsExamples">
<i class="material-icons">apps</i>
<p>Components
<b class="caret"></b>
</p>
</a>
<div class="collapse" id="componentsExamples">
<ul class="nav">
<li routerlinkactive="active">
<a href="#/components/buttons">
<span class="sidebar-mini">B</span>
<span class="sidebar-normal">Buttons</span>
</a>
</li>
<li routerlinkactive="active">
<a href="#/components/grid">
<span class="sidebar-mini">GS</span>
<span class="sidebar-normal">Grid System</span>
</a>
</li>
<li routerlinkactive="active">
<a href="#/components/panels">
<span class="sidebar-mini">P</span>
<span class="sidebar-normal">Panels</span>
</a>
</li>
<li routerlinkactive="active">
<a href="#/components/sweet-alert">
<span class="sidebar-mini">SA</span>
<span class="sidebar-normal">Sweet Alert</span>
</a>
</li>
<li routerlinkactive="active">
<a href="#/components/notifications">
<span class="sidebar-mini">N</span>
<span class="sidebar-normal">Notifications</span>
</a>
</li>
<li routerlinkactive="active">
<a href="#/components/icons">
<span class="sidebar-mini">I</span>
<span class="sidebar-normal">Icons</span>
</a>
</li>
<li routerlinkactive="active">
<a href="#/components/typography">
<span class="sidebar-mini">T</span>
<span class="sidebar-normal">Typography</span>
</a>
</li>
</ul>
</div>
</li>
<li routerlinkactive="active">
<a data-toggle="collapse" href="#formsExamples">
<i class="material-icons">content_paste</i>
<p>Forms
<b class="caret"></b>
</p>
</a>
<div class="collapse" id="formsExamples">
<ul class="nav">
<li routerlinkactive="active">
<a href="#/forms/regular">
<span class="sidebar-mini">RF</span>
<span class="sidebar-normal">Regular Forms</span>
</a>
</li>
<li routerlinkactive="active">
<a href="#/forms/extended">
<span class="sidebar-mini">EF</span>
<span class="sidebar-normal">Extended Forms</span>
</a>
</li>
<li routerlinkactive="active">
<a href="#/forms/validation">
<span class="sidebar-mini">VF</span>
<span class="sidebar-normal">Validation Forms</span>
</a>
</li>
<li routerlinkactive="active">
<a href="#/forms/wizard">
<span class="sidebar-mini">W</span>
<span class="sidebar-normal">Wizard</span>
</a>
</li>
</ul>
</div>
</li>
<li routerlinkactive="active">
<a data-toggle="collapse" href="#tablesExamples">
<i class="material-icons">grid_on</i>
<p>Tables
<b class="caret"></b>
</p>
</a>
<div class="collapse" id="tablesExamples">
<ul class="nav">
<li routerlinkactive="active">
<a href="#/tables/regular">
<span class="sidebar-mini">RT</span>
<span class="sidebar-normal">Regular Tables</span>
</a>
</li>
<li routerlinkactive="active">
<a href="#/tables/extended">
<span class="sidebar-mini">ET</span>
<span class="sidebar-normal">Extended Tables</span>
</a>
</li>
<li routerlinkactive="active">
<a href="#/tables/datatables.net">
<span class="sidebar-mini">DT</span>
<span class="sidebar-normal">DataTables.net</span>
</a>
</li>
</ul>
</div>
</li>
<li routerlinkactive="active">
<a data-toggle="collapse" href="#mapsExamples">
<i class="material-icons">place</i>
<p>Maps
<b class="caret"></b>
</p>
</a>
<div class="collapse" id="mapsExamples">
<ul class="nav">
<li routerlinkactive="active">
<a href="#/maps/google">
<span class="sidebar-mini">GM</span>
<span class="sidebar-normal">Google Maps</span>
</a>
</li>
<li routerlinkactive="active">
<a href="#/maps/fullscreen">
<span class="sidebar-mini">FSM</span>
<span class="sidebar-normal">Full Screen Map</span>
</a>
</li>
<li routerlinkactive="active">
<a href="#/maps/vector">
<span class="sidebar-mini">VM</span>
<span class="sidebar-normal">Vector Map</span>
</a>
</li>
</ul>
</div>
</li>
<li routerlinkactive="active">
<a href="#/widgets">
<i class="material-icons">widgets</i>
<p>Widgets</p>
</a>
</li>
<li routerlinkactive="active">
<a href="#/charts">
<i class="material-icons">timeline</i>
<p>Charts</p>
</a>
</li>
<li routerlinkactive="active">
<a href="#/calendar">
<i class="material-icons">date_range</i>
<p>Calendar</p>
</a>
</li>
<li routerlinkactive="active">
<a data-toggle="collapse" href="#pagesExamples">
<i class="material-icons">image</i>
<p>Pages
<b class="caret"></b>
</p>
</a>
<div class="collapse" id="pagesExamples">
<ul class="nav">
<li>
<a href="./pricing.html">
<span class="sidebar-mini">P</span>
<span class="sidebar-normal">Pricing</span>
</a>
</li>
<li routerlinkactive="active">
<a href="#/pages/timeline">
<span class="sidebar-mini">T</span>
<span class="sidebar-normal">Timeline Page</span>
</a>
</li>
<li>
<a href="./login.html">
<span class="sidebar-mini">LP</span>
<span class="sidebar-normal">Login Page</span>
</a>
</li>
<li>
<a href="./register.html">
<span class="sidebar-mini">RP</span>
<span class="sidebar-normal">Register Page</span>
</a>
</li>
<li>
<a href="./lock.html">
<span class="sidebar-mini">LSP</span>
<span class="sidebar-normal">Lock Screen Page</span>
</a>
</li>
<li routerlinkactive="active">
<a href="#/pages/user">
<span class="sidebar-mini">UP</span>
<span class="sidebar-normal">User Page</span>
</a>
</li>
</ul>
</div>
</li>
</ul>
<div class="sidebar-moving-tab" style="transform: translate3d(0px, 5px, 0px);"></div></div>
</div>
</sidebar-cmp>
<div class="sidebar-background" style="background-image: url(assets/img/sidebar-1.jpg)"></div>
</div>

Specify the position at what location you have to scroll, try this one.
browser.executeScript('window.scrollTo(0,1000);').then(function () {
browser.sleep(5000);
console.log('Window ScrollTo','Done');
}).then(function() {
//wait for element to be displayed
browser.driver.wait(function(){
return someElement.isDisplayed().then(function (isVisible){
return isVisible === true;
},50000, 'Element not present ' );
},50000)
});

I've been using this line for scrolling.
You can also try it on console before using it on protractor.
e.g. $(".sidebar").scrollLeft(1000)
strPixels = 1000 //value in pixel
strClass = '.sidebar' //class of the element with scrollbar
browser.executeScript('$("' + strClass + '").scrollLeft(' + strPixels + ')');
Note: you can use scrollLeft or scrollTop to scroll horizontally or vertically.

var filter = theSwitch.pageBar;
var scrollIntoView = function () {
arguments[0].scrollIntoView();
};
browser.executeScript(scrollIntoView, filter);
theSwitch.pageBar.click();

How to add nav-active class in in navigation using jquery only one time

Please help me to sort out this problem. I want to add nav-active class in li element only one time means if child element is selected then parent li should not have nav-active class. I am using following code but it is not working according to my requirements.
Thanks in advance.
Here is my code:
$('ul li').find('li').click(function(){
var $this = $(this);
$('li').removeClass('nav-active');
$this.addClass('nav-active');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav id="menu" class="nav-main" role="navigation">
<ul class="nav nav-main">
<li class="nav-parent item-b">
<a href="#">
<i class="icon icon-global" aria-hidden="true"></i>
<span>Global</span>
</a>
<ul class="nav nav-children">
<li class="item-a">
<a href="#">
<span>News</span>
</a>
</li>
<li>
<a href="#">
<span>Highlights</span>
</a>
</li>
</ul>
</li>
<li class="nav-parent">
<a href="#">
<i class="icon icon-document-512"></i><span>My Documents</span>
</a>
<ul class="nav nav-children" id="menu1">
<li>
<a href="#">
<span>My Download</span>
</a>
</li>
<li>
<a href="#">
<span>My Wishlist</span>
</a>
</li>
<li>
<a href="#">
<span>My New Documents</span></a>
</li>
</ul>
</li>
<li class="nav-parent"><!-- nav-expanded-->
<a class="">
<i class="icon icon-marketing-material" aria-hidden="true"></i>
<span>Marketing Material</span>
</a>
<ul class="nav nav-children" id="menu1">
<li>
<a href="#">
<span>Batch Download</span>
</a>
</li>
<li>
<a href="#">
<span>Upload</span>
</a>
</li>
<li>
<a href="#">
<span>Edit/Delete</span></a>
</li>
<li>
<a href="#" onClick='document.getElementById("preview-frame").src="new-uploads.html";'>
<span>New Uploads</span></a>
</li>
<li>
<a href="#" onClick='document.getElementById("preview-frame").src="revision.html";'>
<span>Revisions</span></a>
</li>
<li>
<a href="#" onClick='document.getElementById("preview-frame").src="top-download.html";'>
<span>Top Downloads</span></a>
</li>
</ul>
</li>
<li>
<a href="#" onClick='document.getElementById("preview-frame").src="blank.html";'>
<i class="icon icon-11111" aria-hidden="true"></i>
<span>GML Forum</span>
</a>
</li>
<li>
<a href="#" onClick='document.getElementById("preview-frame").src="index - Copy.html";'>
<i class="icon icon-market-research" aria-hidden="true"></i>
<span>Market Research</span>
</a>
</li>
<li>
<a href="#">
<i class="icon icon-market-access-2" aria-hidden="true"></i>
<span>Market Access</span>
</a>
</li>
<li>
<a href="#">
<i class="icon icon-compete" aria-hidden="true"></i>
<span>Competetive Intelligence</span>
</a>
</li>
<li>
<a href="#">
<i class="icon icon-portal" aria-hidden="true"></i>
<span>Portal Tutorial</span>
</a>
</li>
<li>
<a href="#">
<i class="icon icon-new-product-launch" aria-hidden="true"></i>
<span>New Product Launch</span>
</a>
</li>
<li class="nav-parent">
<a href="#">
<i class="icon icon-portal-admin"></i><span>Portal Administration</span>
</a>
<ul class="nav nav-children" id="menu1">
<li>
<a href="#" onClick='document.getElementById("preview-frame").src="abbot-social-media.html";'>
<span>Social Media</span>
</a>
</li>
</ul>
</li>
<li><hr class="separator" /></li>
<li><i class="fa licon-calendar" aria-hidden="true" style="font-size:24px;"></i>Upcoming Events</li
></ul>
</nav>

In you current example if you will do a console.log($(this), it will show you 2 elements in the console if you have clicked a child element. One for the child element and one for its parent li element. This is called event bubbling. You need to take care of event bubbling by stop propagating the event.
Try this.
$('li').click(function(event){
event.stopPropagation()
var $this = $(this);
$('li').removeClass('nav-active');
$this.addClass('nav-active');
});
.nav-active a
{
color:red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav id="menu" class="nav-main" role="navigation">
<ul class="nav nav-main">
<li class="nav-parent item-b">
<a href="#">
<i class="icon icon-global" aria-hidden="true"></i>
<span>Global</span>
</a>
<ul class="nav nav-children">
<li class="item-a">
<a href="#">
<span>News</span>
</a>
</li>
<li>
<a href="#">
<span>Highlights</span>
</a>
</li>
</ul>
</li>
<li class="nav-parent">
<a href="#">
<i class="icon icon-document-512"></i><span>My Documents</span>
</a>
<ul class="nav nav-children" id="menu1">
<li>
<a href="#">
<span>My Download</span>
</a>
</li>
<li>
<a href="#">
<span>My Wishlist</span>
</a>
</li>
<li>
<a href="#">
<span>My New Documents</span></a>
</li>
</ul>
</li>
<li class="nav-parent"><!-- nav-expanded-->
<a class="">
<i class="icon icon-marketing-material" aria-hidden="true"></i>
<span>Marketing Material</span>
</a>
<ul class="nav nav-children" id="menu1">
<li>
<a href="#">
<span>Batch Download</span>
</a>
</li>
<li>
<a href="#">
<span>Upload</span>
</a>
</li>
<li>
<a href="#">
<span>Edit/Delete</span></a>
</li>
<li>
<a href="#" onClick='document.getElementById("preview-frame").src="new-uploads.html";'>
<span>New Uploads</span></a>
</li>
<li>
<a href="#" onClick='document.getElementById("preview-frame").src="revision.html";'>
<span>Revisions</span></a>
</li>
<li>
<a href="#" onClick='document.getElementById("preview-frame").src="top-download.html";'>
<span>Top Downloads</span></a>
</li>
</ul>
</li>
<li>
<a href="#" onClick='document.getElementById("preview-frame").src="blank.html";'>
<i class="icon icon-11111" aria-hidden="true"></i>
<span>GML Forum</span>
</a>
</li>
<li>
<a href="#" onClick='document.getElementById("preview-frame").src="index - Copy.html";'>
<i class="icon icon-market-research" aria-hidden="true"></i>
<span>Market Research</span>
</a>
</li>
<li>
<a href="#">
<i class="icon icon-market-access-2" aria-hidden="true"></i>
<span>Market Access</span>
</a>
</li>
<li>
<a href="#">
<i class="icon icon-compete" aria-hidden="true"></i>
<span>Competetive Intelligence</span>
</a>
</li>
<li>
<a href="#">
<i class="icon icon-portal" aria-hidden="true"></i>
<span>Portal Tutorial</span>
</a>
</li>
<li>
<a href="#">
<i class="icon icon-new-product-launch" aria-hidden="true"></i>
<span>New Product Launch</span>
</a>
</li>
<li class="nav-parent">
<a href="#">
<i class="icon icon-portal-admin"></i><span>Portal Administration</span>
</a>
<ul class="nav nav-children" id="menu1">
<li>
<a href="#" onClick='document.getElementById("preview-frame").src="abbot-social-media.html";'>
<span>Social Media</span>
</a>
</li>
</ul>
</li>
<li><hr class="separator" /></li>
<li><i class="fa licon-calendar" aria-hidden="true" style="font-size:24px;"></i>Upcoming Events</li
></ul>
</nav>

The main idea is to run the click function only once because when you click child element the parent element also gets clicked automatically right after that so $(this) ends up selecting parent item, everytime the child element gets clicked.
I added css for .nav-active class to show the code working. Try this.
$(document).ready(function(){
$('nav li').one("click",function(){
$('nav li').removeClass('nav-active');
$(this).addClass('nav-active');
})
})
.nav-active>a>span{
font-size:20px;
color:red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav id="menu" class="nav-main" role="navigation">
<ul class="nav nav-main">
<li class="nav-parent item-b">
<a href="#">
<i class="icon icon-global" aria-hidden="true"></i>
<span>Global</span>
</a>
<ul class="nav nav-children">
<li class="item-a">
<a href="#">
<span>News</span>
</a>
</li>
<li>
<a href="#">
<span>Highlights</span>
</a>
</li>
</ul>
</li>
<li class="nav-parent">
<a href="#">
<i class="icon icon-document-512"></i><span>My Documents</span>
</a>
<ul class="nav nav-children" id="menu1">
<li>
<a href="#">
<span>My Download</span>
</a>
</li>
<li>
<a href="#">
<span>My Wishlist</span>
</a>
</li>
<li>
<a href="#">
<span>My New Documents</span></a>
</li>
</ul>
</li>
<li class="nav-parent"><!-- nav-expanded-->
<a class="">
<i class="icon icon-marketing-material" aria-hidden="true"></i>
<span>Marketing Material</span>
</a>
<ul class="nav nav-children" id="menu1">
<li>
<a href="#">
<span>Batch Download</span>
</a>
</li>
<li>
<a href="#">
<span>Upload</span>
</a>
</li>
<li>
<a href="#">
<span>Edit/Delete</span></a>
</li>
<li>
<a href="#" onClick='document.getElementById("preview-frame").src="new-uploads.html";'>
<span>New Uploads</span></a>
</li>
<li>
<a href="#" onClick='document.getElementById("preview-frame").src="revision.html";'>
<span>Revisions</span></a>
</li>
<li>
<a href="#" onClick='document.getElementById("preview-frame").src="top-download.html";'>
<span>Top Downloads</span></a>
</li>
</ul>
</li>
<li>
<a href="#" onClick='document.getElementById("preview-frame").src="blank.html";'>
<i class="icon icon-11111" aria-hidden="true"></i>
<span>GML Forum</span>
</a>
</li>
<li>
<a href="#" onClick='document.getElementById("preview-frame").src="index - Copy.html";'>
<i class="icon icon-market-research" aria-hidden="true"></i>
<span>Market Research</span>
</a>
</li>
<li>
<a href="#">
<i class="icon icon-market-access-2" aria-hidden="true"></i>
<span>Market Access</span>
</a>
</li>
<li>
<a href="#">
<i class="icon icon-compete" aria-hidden="true"></i>
<span>Competetive Intelligence</span>
</a>
</li>
<li>
<a href="#">
<i class="icon icon-portal" aria-hidden="true"></i>
<span>Portal Tutorial</span>
</a>
</li>
<li>
<a href="#">
<i class="icon icon-new-product-launch" aria-hidden="true"></i>
<span>New Product Launch</span>
</a>
</li>
<li class="nav-parent">
<a href="#">
<i class="icon icon-portal-admin"></i><span>Portal Administration</span>
</a>
<ul class="nav nav-children" id="menu1">
<li>
<a href="#" onClick='document.getElementById("preview-frame").src="abbot-social-media.html";'>
<span>Social Media</span>
</a>
</li>
</ul>
</li>
<li><hr class="separator" /></li>
<li><i class="fa licon-calendar" aria-hidden="true" style="font-size:24px;"></i>Upcoming Events</li
></ul>
</nav>