So I've got a navigation menu that is working properly in all browsers except Chrome. I'm thinking it may be down to the jquery but I'm not an expert by any means so kinda stumped here.
The HTML code is as follows
<div class="nav-container">
**<nav class="centered-logo top-bar">**
<div class="container">
<div class="row">
<div class="col-sm-12 text-center">
<a href="index.html">
<img class="logo logo-dark" alt="Logo" src="Images/logotype_dark.png"/>
</div>
</div>
<div class="row nav-menu">
<div class="col-sm-12 columns text-center">
<ul class="menu">
<a></a>
<li>Home</li>
<li>About us</li>
<li>Process</li>
<li>Topic </li>
<li>Contact</li>
</ul>
</div>
</div>
<div class="mobile-toggle" id="mobile-toggle">
<i class="fa fa-bars" aria-hidden="true"></i>
</div>
</div>
<div class="bottom-border"></div>
</nav>
</div>
When the menu icon is clicked the bolded code above should add "open-nav" to it. However it's not working in Chrome.
The jquery is below
$('.mobile-toggle').click(function(){
$('nav').toggleClass('open-nav');
});
Any input would be greatly appreciated.
Related
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
On initial page load, the tabs show but the content for that selected tab does not.
If I click the "Link" tab and back to the "Post" tab then it shows up.
<div class="container">
<div class="card text-center">
<div class="card-header">
<ul class="nav nav-tabs card-header-tabs" id="tabs">
<li class="nav-item">
<a class="active nav-link" href="#post" data-toggle="tab">Post</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#link" data-toggle="tab">Link</a>
</li>
</ul>
</div>
<div class="card-body">
<div class="tab-content">
<div class="tab-pane" id="post">post</div>
<div class="tab-pane" id="link">link</div>
</div>
</div>
</div>
</div>
On page load it looks like this (the div with the tab-pane class hasn't been displayed):
There are no errors in my console and the bootstrap JS file is loaded. There are some similar questions around but the solutions have not worked for me.
What do I need to add to get the tab pane to display when the page loads?
Check this out
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="card text-center">
<div class="card-header">
<ul class="nav nav-tabs card-header-tabs" id="tabs">
<li class="nav-item">
<a class="active nav-link active" href="#post" data-toggle="tab">Post</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#link" data-toggle="tab">Link</a>
</li>
</ul>
</div>
<div class="card-body">
<div class="tab-content">
<div class="tab-pane active" id="post">post</div>
<div class="tab-pane" id="link">link</div>
</div>
</div>
</div>
</div>
The root cause of your problem was the fade class. Well done ! Removing it is the solution.
I am preety new to twitter-bootstrap, my website working fine on big screens like desktop but when I resize the browser to get an affect of mobile screen it does not show me that icon (dropdown one) which allows us to select navbar.
HTML
<div class="row nav-menu">
<a href="/">
<div class="col-md-2 col-sm-3 columns">
<img class="logo logo-light logo-wide" alt="Logo" src="img/logo_t.png">
<img class="logo logo-dark logo-wide" alt="Logo" src="img/logo_t.png">
</div>
</a>
<div class="nav-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navigationbar">
<span class="icon-bar">About</span>
<span class="icon-bar">Technology</span>
<span class="icon-bar has-dropdown">API</span>
<span class="icon-bar">News</span>
<span class="icon-bar">Jobs</span>
<span class="icon-bar">Contacts</span>
</button>
</div>
<div class="col-md-10 col-sm-9 columns ">
<ul class="menu navigationbar">
<li>About</li>
<li>Technology</li>
<li class="has-dropdown">
API <span class="glyphicon glyphicon-chevron-down"></span>
<ul class="subnav">
<li>Plans</li>
<li>Documentation</li>
<li>Login</li>
</ul>
</li>
<li>News</li>
<li>Jobs</li>
<li>Contact</li>
</ul>
</div>
</div>
<div class="mobile-toggle">
</div>
</div>
</nav>
</div> <!-- navbar end -->
Please help, thanks.
I'm using Bootstrap 3 to create my wife's website. I have a fixed navigation bar at the top of my page, and want to fix a filter menu to the left hand side. I have this up and it seems to be running and working OK when the screen size is large, medium or even small, however when the -collapse menu on my top navigation kicks in the links on my filter become redundant and dont actually do anything. I'm not too sure what I've done wrong. Any ideas? I've added a jsfiddle here.
http://jsfiddle.net/iameuanmackay/mhk11q52/
Code here:
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container-fluid">
<div class="row">
<div class="col-xs-10 col-xs-offset-1 col-sm-8 col-sm-offset-3 col-md-7 col-md-offset-3 col-lg-6 col-lg-offset-3">
<h1>logo</h1>
</div>
</div>
<div class="row">
<div class="col-xs-10 col-xs-offset-1 col-sm-8 col-sm-offset-3 col-md-7 col-md-offset-3 col-lg-6 col-lg-offset-3">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".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> <a class="navbar-brand active" href="index.html">home</a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li>portfolio
</li>
<li>blog
</li>
<li>contact
</li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
<!-- rheader -->
</div>
<!--end col -->
</div>
<!-- end row -->
</div>
<!-- end container -->
<!-- Begin page content -->
<div class="container-fluid">
<div id="portfolio">
<div class="row">
<div class="col-xs-1 col-xs-offset-1 col-sm-1 col-sm-offset-2">
<div data-spy="affix" data-offset-top="0" data-offset-bottom="200">
<ul id="filter">
<!--This is where the filter links go and and the affix seems to have gone wrong -->
<li style="list-style-type: none" class="all">all
</li>
<li style="list-style-type: none" class="people">people
</li>
<li style="list-style-type: none" class="things">things
</li>
</ul>
</div>
</div>
Any pointers would be much appreciated.