I am mainly a designer and write some HTML and CSS but am not that good at javascript which I am almost sure is causing the issue that I am having. I have a client that is working with a template that is using a Menuzord Menu. It is a one-page layout and they would like one of the links on the main nav to link to another website outside the current site. I coded the link to link out, but the link does not work. Any help would be appreciated.
This is the link to the site...http://raycomdigital.us/medplexmd/
Here is the code:
<header id="header" class="header">
<div class="header-nav navbar-fixed-top header-dark navbar-white navbar-transparent bg-transparent-1 navbar-sticky-animated animated-active">
<div class="header-nav-wrapper">
<div class="container">
<nav id="menuzord-right" class="menuzord orange no-bg"> <a class="menuzord-brand pull-left flip" href="javascript:void(0)"><img src="images/logo-wide.png" alt=""></a>
<ul class="menuzord-menu onepage-nav">
<li class="active">Home</li>
<li>Our Services</li>
<li>Questions</li>
<li>Forms</li>
<li>Contact</li>
<li>Portal</li>
</ul>
</nav>
</div>
</div>
</div>
</header>
I need the "Portal" item to link out. Thanks in advance!
There is likely an event listener that is preventing the default click handler from triggering.
A quick fix for this is to add an onclick property which would take precedence over a listener that is attached to a parent element.
<header id="header" class="header">
<div class="header-nav navbar-fixed-top header-dark navbar-white navbar-transparent bg-transparent-1 navbar-sticky-animated animated-active">
<div class="header-nav-wrapper">
<div class="container">
<nav id="menuzord-right" class="menuzord orange no-bg"> <a class="menuzord-brand pull-left flip" href="javascript:void(0)"><img src="images/logo-wide.png" alt=""></a>
<ul class="menuzord-menu onepage-nav">
<li class="active">Home</li>
<li>Our Services</li>
<li>Questions</li>
<li>Forms</li>
<li>Contact</li>
<li><a id="portal" href="https://apps.medplexmdinjury.com/cases/" target="_blank">Portal</a></li>
<script type="text/javascript">
var portal = document.getElementById('portal');
portal.onclick = function() {
var win = window.open(portal.href, portal.target);
win = null;
}
</script>
</ul>
</nav>
</div>
</div>
</div>
</header>
Related
I'm looking for a way to make this hamburger menu close after the user clicks the link/makes selection. I've checked out several options on how to do it, but with no luck. I understand I need a missing piece of JS.
The rest of the code (html&css) can be found here (https://codepen.io/alvarotrigo/pen/oNGzoYd). Stackoverflow is prohibiting me from posting all of the code (says it's mostly code).
function menuOnClick() {
document.getElementById("menu-bar").classList.toggle("change");
document.getElementById("nav").classList.toggle("change");
document.getElementById("menu-bg").classList.toggle("change-bg");
}
You forgot to pass in the onclick function to the nav.
This should do the trick:
<div id="menu">
<div id="menu-bar" onclick="menuOnClick()">
<div id="bar1" class="bar"></div>
<div id="bar2" class="bar"></div>
<div id="bar3" class="bar"></div>
</div>
<nav class="nav" id="nav" onclick="menuOnClick()">
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
<li>Blog</li>
</ul>
</nav>
</div>
<div class="menu-bg" id="menu-bg"></div>
In your HTML, just call the same menuOnClick() function on every <li> item on the list.
<li onclick="menuOnClick()">Home</li>
<li onclick="menuOnClick()">About</li>
<li onclick="menuOnClick()">Contact</li>
<li onclick="menuOnClick()">Blog</li>
So I have bootstrap menu that is one my one page site and its really good but it has one issue.
When on a mobile viewpoint and you click on the hamburger it launches the side panel, when a user clicks on a link (anchor link in my case to a section on the page) it will take you to the anchor but the side panel remains in position. I want it so that when the link is clicked the side panel disappears from view.
I have tried to look for solutions but to no success, I think it doesn't work because the solution depends on how the menu was made so if anyone can help me out here it would be greatly appreciated.
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="site-mobile-menu site-navbar-target">
<div class="site-mobile-menu-header">
<div class="site-mobile-menu-close mt-3">
<span class="icon-close2 js-menu-toggle"></span>
</div>
</div>
<div class="site-mobile-menu-body"></div>
</div>
<header class="site-navbar js-sticky-header site-navbar-target" role="banner">
<div class="container">
<div class="row align-items-center">
<div class="col-6 col-xl-2">
<h1 class="mb-0 site-logo"><a href="index.html">Brand<span class="text-primary">.
</span> </a></h1>
</div>
<div class="col-12 col-md-10 d-none d-xl-block">
<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>Home</li>
<li class="has-children">
About Us
<ul class="dropdown">
<li>Team</li>
<li>Pricing</li>
<li>FAQ</li>
<li>Gallery</li>
<li>Services</li>
<li>Testimonials</li>
<li class="has-children">
More Links
<ul class="dropdown">
<li>Menu One</li>
<li>Menu Two</li>
<li>Menu Three</li>
</ul>
</li>
</ul>
</li>
<li>Blog</li>
<li>Contact</li>
<li class="social"><a href="#contact-section" class="nav-link"><span
class="icon-
facebook"></span></a></li>
<li class="social"><a href="#contact-section" class="nav-link"><span
class="icon-
twitter"></span></a></li>
<li class="social"><a href="#contact-section" class="nav-link"><span
class="icon-linkedin"></span></a></li>
</ul>
</nav>
</div>
<div class="col-6 d-inline-block d-xl-none ml-md-0 py-3" style="position: relative; top:
`3px;"><a href="#" class="site-menu-toggle js-menu-toggle float-right"><span
class="icon-menu h3"></span></a></div>`
</div>
</div>
</header>
<div class="hero"></div>
I have a website where I installed SlickNav. I have it calling properly, and the linking works properly, however it doesn't seem to want to initialize in the site itself. I'm calling it via the following:
<link rel="stylesheet" href="/wp-content/themes/mta360/dist/styles/slicknav.css" />
<script src="/wp-content/themes/mta360/dist/scripts/slicknav.js"></script>
The menu code is as follows:
<header>
<!-- Header Start -->
<div class="header-area">
<div class="main-header ">
<div class="header-top top-bg d-none d-lg-block">
<div class="container">
<div class="col-xl-12">
<div class="row d-flex justify-content-between align-items-center">
<div class="header-info-left">
<ul>
<li>1234567890</li>
<li>mta360seo#gmail.com</li>
</ul>
</div>
<div class="header-info-right">
<ul>
<li>Mon - Fri: 9:00 - 5:00</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="header-bottom header-sticky">
<div class="container">
<div class="row align-items-center">
<!-- Logo -->
<div class="col-xl-2 col-lg-1 col-md-1">
<div class="logo">
<img src="/logo.png" alt="">
</div>
</div>
<div class="col-xl-8 col-lg-8 col-md-8">
<!-- Main-menu -->
<div class="main-menu f-right d-none d-lg-block">
<nav>
<ul id="navigation">
<li>Home</li>
<li>About</li>
<li>Heating</li>
<li>Cooling</li>
<li>Press
<ul class="submenu">
<li>Blog</li>
<li>Releases</li>
</ul>
</li>
<li>Company
<ul class="submenu">
<li>Contact</li>
</ul>
</li>
</ul>
</nav>
</div>
</div>
<div class="col-xl-2 col-lg-3 col-md-3">
<!-- Header-btn -->
<div class="header-btn d-none d-lg-block">
Quote
</div>
</div>
<!-- Mobile Menu -->
<div class="col-12">
<div class="mobile_menu d-block d-lg-none"></div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Header End -->
Is there something I'm missing? It works for my local testing, but when I compile and try to use it on the actual site, it just doesn't want to initialize at all. Is there something I'm missing?
It's a wordpress site using Sage 9, in case that helps with the diagnosis.
You have to initialize it using Javascript code.
The 2 first libraries you are calling are the CSS slicknav library and the JS slicknav library. You also need to load jQuery for slicknav to work.
So add this to your code at the beginning:
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
$(document).ready(function(){
$('#menu').slicknav({
// Label for menu button.
// Use an empty string for no label.
'label' : 'MENU',
// If true, the mobile menu is a copy of the original.
'duplicate': true,
// The duration of the sliding animation.
'duration': true,
// other parameters see here: https://www.jqueryscript.net/menu/Creating-A-Responsive-Mobile-Navigation-Menu-with-slicknav-jQuery-Plugin.html //
});
});
also you need to specify an ID "menu" to the <ul> element like this:
<ul id="menu">
<li>...</li>
</ul>
Finally, make sure your HTML markup follows the specified structure for slick nav which is:
<ul id="menu">
<li>Home
<ul>
<li>Blog</li>
<li>Plugins
<ul>
<li>Latest</li>
<li>Most Popular</li>
<li>Recommended</li>
</ul>
</li>
<li>Publishing</li>
</ul>
</li>
<li>Top <a href="#">Menu 2</a></li>
<li>Top Menu 3</li>
<li>Top Menu 4
<ul>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
</ul>
</li>
</ul>
more here: https://www.jqueryscript.net/menu/Creating-A-Responsive-Mobile-Navigation-Menu-with-slicknav-jQuery-Plugin.html
I am brand new to Bootstrap 3 and am trying to achieve a header that looks like the following:
As you can see there are several components here:
Logo; left-aligned
Menu items to the right of the logo
Message of the day (MOTD) in the top-right
"Hi, username!", right-aligned
"Envelope" Glyphicon to the left of the Username
"Heart" Glyphicon to the left of the Envelope Glyphicon (in the picture above it is a star but it should be a heart)
Here is my jsFiddle representing my best attempt, and here is the main <body> element of that fiddle:
<!DOCTYPE html>
<html>
<head>
<!-- Stuff goes here -->
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="#">Logo</a>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">Menu 1 | Menu 2 | Menu 3</li>
<li class="active">This is the message of the day up here!</li>
<li class="active"><span class="glyphicon glyphicon-heart"></span></li>
<li class="active"><span class="glyphicon glyphicon-envelope"></span></li>
<li class="active">Hi, smeeb!</li>
</ul>
</div>
</div>
</nav>
</body>
</html>
When I run this in jsFiddle, nothing is laid out properly and I can't even see most of the <li> elements. Any idea as to where I'm going awry?
Put the class "in" after the class "navbar-collapse" in the div with the id property "navbar".
With the class "in", your navbar will begin visible.
<!DOCTYPE html>
<html>
<head>
<!-- Stuff goes here -->
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="#">Logo</a>
</div>
<div id="navbar" class="collapse navbar-collapse in">
<ul class="nav navbar-nav">
<li class="active">Menu 1 | Menu 2 | Menu 3</li>
<li class="active">This is the message of the day up here!</li>
<li class="active"><span class="glyphicon glyphicon-heart"></span></li>
<li class="active"><span class="glyphicon glyphicon-envelope"></span></li>
<li class="active">Hi, smeeb!</li>
</ul>
</div>
</div>
</nav>
</body>
</html>
You can use this markup and style it according to your css. Make menus to left and others name and icons to right menu. then seperate the top message and position absolute it to the parent nav bar relative.
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">Menu 1 </li>
<li class="active">Menu 2</li>
<li class="active">Menu </li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="active"><span class="glyphicon glyphicon-heart"></span></li>
<li class="active"><span class="glyphicon glyphicon-envelope"></span></li>
<li class="active">Hi, smeeb!</li>
</ul>
</div>
<div>This is the message of the day up here!</div>
Ok, I run the risk of getting down voted here, but from a design perspective you could run into issues with the "quote of the day" in the navbar, especially when on smaller devices as things "scoot in".
Might I suggest having a top bar right above the nav?
<div class="top-bar-wrap">
<div class="container">
<div class="top-bar">
<div class="pull-right"> <!-- This will keep your quote to the right. Just change it to pull-left if if you want it to start from the left. -->
<p>Quote of the day</p>
</div>
</div>
</div>
</div>
Then you will be freed up to have your nav and icons next to the links. Just make sure to add "navbar-right" to your navbar holding your li items. You can add these gliphs in as li items if you'd like, or you can add them following the li with a -- display:inline -- property in your CSS and that should work. ALTHOUGH, might I suggest one more thing?
As a designer first that came to the dark side of development... the icons and code to display the username might also be best served in a bar just below your nav. You can duplicate the code for the "top-bar" section and place it just under your nav.
/* For the topbar above the nav */
.top-bar-wrap {
padding: 6px 0;
background-color: #333; }
.top-bar {
min-height: 20px;
line-height: 20px; }
/* For the bar just below the nav "Member-bar" */
.member-bar-wrap {
padding: 6px 0;
background-color: #333; }
.member-bar {
min-height: 20px;
line-height: 20px; }
<div class="member-bar-wrap">
<div class="container">
<div class="member-bar">
<div class="pull-right">
<!-- Gliphs and code for your member name display -->
</div>
</div>
</div>
</div>
That will keep everything nice and tidy... and you won't run into issues for smaller screens.
I'm trying to create a menu button, for my off canvas sidebar. I'm using the cannonstar:sidebar-bootstrap3 (AKA start bootstrap simple sidebar). http://ironsummitmedia.github.io/startbootstrap-simple-sidebar/
http://seegatesite.com/bootstrap/simple_sidebar_menu.html#
My problem is that it isn't working can anyone who willing to help me, look at my code please; thanks to all that help.
P.S. I'm using Meteor & Boostrap-3 with the iron-router package.
<div id="wrapper">
<div id="sidebar-wrapper">
<ul class="sidebar-nav">
<li class="sidebar-brand">Home</li>
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
<div id="page-content-wrapper">
<div class="page-content">
<nav class="navbar navbar-inverse navbar-default">
<div class="container-fluid">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" id="menu-toggle">
<i class="glyphicon glyphicon-menu-hamburger"></i>
</button>
<a class="navbar brand" href="#"></a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li><i class="glyphicon glyphicon-align-left"></i></li>
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><i class="glyphicon glyphicon-search"></i></li>
<li>{{> loginButtons}}</li>
</ul>
</div>
</nav>
<header class="masthead">
<div class="container">
<h1></h1>
</div>
</header>
</div>
</div>
</div>
$("#menu-toggle").click(function(e) {
e.preventDefault();
$("#wrapper").toggleClass("toggled");
});
$("#menu-toggle-2").click(function(e) {
e.preventDefault();
$("#wrapper").toggleClass("toggled-2");
});
Events are declared different in Meteor:
Assuming template name: <template name="honeybadger">..</template>
Template.honeybadger.events({
'click #menu-toggle': function(e) {
e.preventDefault();
$("#wrapper").toggleClass("toggled");
}
}
Further Reading: Meteor documentation about Template events