How to convert html menu to WordPress menu (WordPress) - javascript
Guys, I have following codes in my html. I'm using 320 bootstrap wp theme. I just create a menu. Its working. But that above box is not moving to menu to menu. How I do it?
For more explain. Please visit below links.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Menu Tutorial - Cufon Font Script</title>
<link rel="shortcut icon" href="images/favicon.ico" />
<!--CSS-->
<link href="styles/style.css" rel="stylesheet" type="text/css" />
<link href="styles/color.css" rel="stylesheet" type="text/css" />
<link href="styles/noscript.css" rel="stylesheet" type="text/css" id="noscript" media="screen,all" />
<!--End testimonial-->
<script type="text/javascript" src="js/jquery-1.5.1.min.js"></script>
<script type="text/javascript" src="js/cufon-yui.js"></script>
<script type="text/javascript" src="js/Ebrima_400-Ebrima_700.font.js"></script>
<script type="text/javascript">
Cufon.replace('h1') ('h2') ('h3') ('h4') ('h5') ('h6') ('.nivo-caption h1', {textShadow: '#000 2px 0px 2px'}) ('.nivo-caption .button');
</script>
<script type="text/javascript" src="js/jquery.lavalamp.js"></script>
<script type="text/javascript" src="js/lavalamp-config.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.1.js"></script>
</head>
<body>
<div id="wrapper">
<div id="wrapper-top">
<div id="top">
<div id="top-left"><a href="index.html">
<img src="images/logo.png" alt="" width="223" height="58" />It's An Image</a></div><!-- #top-left -->
<div id="top-right">
<div id="nav">
<ul id="topnav">
<li class="active"><a href="index.html" >Home</a></li>
<li>About Us
</li>
<li>Services
<ul>
<li>Services One</li>
<li>Services Two</li>
<li>Services Three</li>
<li>Services Four</li>
</ul>
</li>
<li>Portfolio
<ul>
<li>Portfolio One</li>
<li>Portfolio Two</li>
<li>Portfolio Three</li>
</ul>
</li>
<li>Contact</li>
</ul>
<!-- #topnav -->
</div><!-- #nav -->
</div><!-- #top-right -->
</div><!-- #top -->
</div><!-- #wrapper-top -->
<script type="text/javascript"> Cufon.now(); </script> <!-- to fix cufon problems in IE browser -->
<script type="text/javascript">jQuery('#noscript').remove();</script><!-- if javascript disable -->
</body>
</html>
To View That I Expect
Explains
You can see my updates viewing that link from dropbox.
You can see red box around css depth box.
It's moving well in html page
I want to do it in WP
Seeking your help here
There are two ways to create menus.
Using get_pages.
Using wordpress menu function
NO.1
<ul>
<?php
$topparentofcurrent = getTopParentPostID($post->ID);
$alltoppages = get_pages('parent=0&hierarchical=0&sort_column=menu_order&sort_order=ASC');
foreach($alltoppages as $pages){ ?>
Your html code here to repeat in loop.
<li><?php echo $pages->post_title ?></li>
<?php } ?>
</ul>
No.2
<div id="topMenu">
<div id="access">
<?php
$args = array(
'theme_location' => 'header_menu',
'menu' => 'Main Menu',
'sort_column' => 'menu_order',
'container_class' => 'menu-header'
);
wp_nav_menu($args);
?>
</div>
</div>
Now you need to do styling in css only it will automatically show the parent child behavior.
Related
I created website with common head in all pages by <head> <!--#include file="header.shtml"--> </head> but suddenly bootstrap stopped working in them
I have made a website with common header called in all pages for that but bootstrap suddenly stopped working in it what to do now?
below is the code for that it was working fine but suddenly stopped yesterday
I tried various solution like removing header.shtml and call bootstrap in HTML file directly changing versions
called it at different locations such as before other CSS which I usually do
but as it was not working I called it after last CSS file but still issue remained same.
I tried to add different versions of bootstrap but still it was not solved.
<meta http-equiv="content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>SREE SHANTHI ANAND VIDYALAYA</title>
<meta name="description" content="">
<meta name="author" content="">
<!-- CSS only -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/5.0.2/css/bootstrap.min.css" >
<link rel="shortcut icon" href="favicon.png" type="image/x-icon">
<link href="style.css" rel="stylesheet" type="text/css">
<link href="css/shortcodes.css" rel="stylesheet" type="text/css">
<link href="css/responsive.css" rel="stylesheet" type="text/css">
<link href="css/font-awesome.min.css" rel="stylesheet" type="text/css">
<link href="css/shortcodes.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="css/layerslider.css" type="text/css">
<!--prettyPhoto-->
<link href="css/prettyPhoto.css" rel="stylesheet" type="text/css" media="all" />
<link href='http://fonts.googleapis.com/css?family=Lato:300,400,700,300italic,400italic,700italic' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Bubblegum+Sans' rel='stylesheet' type='text/css'>'
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/5.0.2/css/bootstrap.min.css" >
<!--jquery-->
<script src="js/modernizr-2.6.2.min.js"></script>
<script type='text/javascript'>
var mytheme_urls = {
theme_base_url:'https://kidslifedev.wpengine.com/wp-content/themes/kidslife/'
,framework_base_url:'https://kidslifedev.wpengine.com/wp-content/themes/kidslife/framework/'
,ajaxurl:'https://kidslifedev.wpengine.com/wp-admin/admin-ajax.php'
,url:'https://kidslifedev.wpengine.com'
,scroll:'disable'
,stickynav:'enable'
,is_admin:''
,skin:'turquoise'
,layout:'wide'
,isResponsive:'enable'
,layout_pattern:''
};
</script>
<script type="application/ld+json" class="aioseo-schema">
{"#context":"https:\/\/schema.org","#graph":[{"#type":"WebSite","#id":"https:\/\/kidslifedev.wpengine.com\/#website","url":"https:\/\/kidslifedev.wpengine.com\/","name":"Kids Life","description":"Just another WordPress site","publisher":{"#id":"https:\/\/kidslifedev.wpengine.com\/#organization"}},{"#type":"Organization","#id":"https:\/\/kidslifedev.wpengine.com\/#organization","name":"Kids Life","url":"https:\/\/kidslifedev.wpengine.com\/"},{"#type":"BreadcrumbList","#id":"https:\/\/kidslifedev.wpengine.com\/#breadcrumblist","itemListElement":[{"#type":"ListItem","#id":"https:\/\/kidslifedev.wpengine.com\/#listItem","position":"1","item":{"#id":"https:\/\/kidslifedev.wpengine.com\/#item","name":"Home","description":"Kids life children theme for kindergarten is a bundle of joy for running your cr\u00e8che, nursery school, primary school and other children shelters and hostels.","url":"https:\/\/kidslifedev.wpengine.com\/"}}]},{"#type":"WebPage","#id":"https:\/\/kidslifedev.wpengine.com\/#webpage","url":"https:\/\/kidslifedev.wpengine.com\/","name":"Kids life children theme for kindergarten","description":"Kids life children theme for kindergarten is a bundle of joy for running your cr\u00e8che, nursery school, primary school and other children shelters and hostels.","inLanguage":"en-US","isPartOf":{"#id":"https:\/\/kidslifedev.wpengine.com\/#website"},"breadcrumb":{"#id":"https:\/\/kidslifedev.wpengine.com\/#breadcrumblist"},"datePublished":"2014-12-11T06:20:23+00:00","dateModified":"2020-03-19T10:54:25+00:00"}]
</script>
<script type="text/javascript">
window._wpemojiSettings = {"baseUrl":"https:\/\/s.w.org\/images\/core\/emoji\/13.1.0\/72x72\/","ext":".png","svgUrl":"https:\/\/s.w.org\/images\/core\/emoji\/13.1.0\/svg\/","svgExt":".svg","source":{"concatemoji":"https:\/\/kidslifedev.wpengine.com\/wp-includes\/js\/wp-emoji-release.min.js?ver=5.9.3"}};
/*! This file is auto-generated */
!function(e,a,t){var n,r,o,i=a.createElement("canvas"),p=i.getContext&&i.getContext("2d");function s(e,t){var a=String.fromCharCode;p.clearRect(0,0,i.width,i.height),p.fillText(a.apply(this,e),0,0);e=i.toDataURL();return p.clearRect(0,0,i.width,i.height),p.fillText(a.apply(this,t),0,0),e===i.toDataURL()}function c(e){var t=a.createElement("script");t.src=e,t.defer=t.type="text/javascript",a.getElementsByTagName("head")[0].appendChild(t)}for(o=Array("flag","emoji"),t.supports={everything:!0,everythingExceptFlag:!0},r=0;r<o.length;r++)t.supports[o[r]]=function(e){if(!p||!p.fillText)return!1;switch(p.textBaseline="top",p.font="600 32px Arial",e){case"flag":return s([127987,65039,8205,9895,65039],[127987,65039,8203,9895,65039])?!1:!s([55356,56826,55356,56819],[55356,56826,8203,55356,56819])&&!s([55356,57332,56128,56423,56128,56418,56128,56421,56128,56430,56128,56423,56128,56447],[55356,57332,8203,56128,56423,8203,56128,56418,8203,56128,56421,8203,56128,56430,8203,56128,56423,8203,56128,56447]);case"emoji":return!s([10084,65039,8205,55357,56613],[10084,65039,8203,55357,56613])}return!1}(o[r]),t.supports.everything=t.supports.everything&&t.supports[o[r]],"flag"!==o[r]&&(t.supports.everythingExceptFlag=t.supports.everythingExceptFlag&&t.supports[o[r]]);t.supports.everythingExceptFlag=t.supports.everythingExceptFlag&&!t.supports.flag,t.DOMReady=!1,t.readyCallback=function(){t.DOMReady=!0},t.supports.everything||(n=function(){t.readyCallback()},a.addEventListener?(a.addEventListener("DOMContentLoaded",n,!1),e.addEventListener("load",n,!1)):(e.attachEvent("onload",n),a.attachEvent("onreadystatechange",function(){"complete"===a.readyState&&t.readyCallback()})),(n=t.source||{}).concatemoji?c(n.concatemoji):n.wpemoji&&n.twemoji&&(c(n.twemoji),c(n.wpemoji)))}(window,document,window._wpemojiSettings);
</script>
<style type="text/css">
img.wp-smiley,
img.emoji {
display: inline !important;
border: none !important;
box-shadow: none !important;
height: 1em !important;
width: 1em !important;
margin: 0 0.07em !important;
vertical-align: -0.1em !important;
background: none !important;
padding: 0 !important;
}
</style>
<script type="application/ld+json" class="aioseo-schema">
{"#context":"https:\/\/schema.org","#graph":[{"#type":"WebSite","#id":"https:\/\/kidslifedev.wpengine.com\/#website","url":"https:\/\/kidslifedev.wpengine.com\/","name":"Kids Life","description":"Just another WordPress site","publisher":{"#id":"https:\/\/kidslifedev.wpengine.com\/#organization"}},{"#type":"Organization","#id":"https:\/\/kidslifedev.wpengine.com\/#organization","name":"Kids Life","url":"https:\/\/kidslifedev.wpengine.com\/"},{"#type":"BreadcrumbList","#id":"https:\/\/kidslifedev.wpengine.com\/#breadcrumblist","itemListElement":[{"#type":"ListItem","#id":"https:\/\/kidslifedev.wpengine.com\/#listItem","position":"1","item":{"#id":"https:\/\/kidslifedev.wpengine.com\/#item","name":"Home","description":"Kids life children theme for kindergarten is a bundle of joy for running your cr\u00e8che, nursery school, primary school and other children shelters and hostels.","url":"https:\/\/kidslifedev.wpengine.com\/"}}]},{"#type":"WebPage","#id":"https:\/\/kidslifedev.wpengine.com\/#webpage","url":"https:\/\/kidslifedev.wpengine.com\/","name":"Kids life children theme for kindergarten","description":"Kids life children theme for kindergarten is a bundle of joy for running your cr\u00e8che, nursery school, primary school and other children shelters and hostels.","inLanguage":"en-US","isPartOf":{"#id":"https:\/\/kidslifedev.wpengine.com\/#website"},"breadcrumb":{"#id":"https:\/\/kidslifedev.wpengine.com\/#breadcrumblist"},"datePublished":"2014-12-11T06:20:23+00:00","dateModified":"2020-03-19T10:54:25+00:00"}]}
</script>
<script type="text/javascript">
window._wpemojiSettings = {"baseUrl":"https:\/\/s.w.org\/images\/core\/emoji\/13.1.0\/72x72\/","ext":".png","svgUrl":"https:\/\/s.w.org\/images\/core\/emoji\/13.1.0\/svg\/","svgExt":".svg","source":{"concatemoji":"https:\/\/kidslifedev.wpengine.com\/wp-includes\/js\/wp-emoji-release.min.js?ver=5.9.3"}};
/*! This file is auto-generated */
!function(e,a,t){var n,r,o,i=a.createElement("canvas"),p=i.getContext&&i.getContext("2d");function s(e,t){var a=String.fromCharCode;p.clearRect(0,0,i.width,i.height),p.fillText(a.apply(this,e),0,0);e=i.toDataURL();return p.clearRect(0,0,i.width,i.height),p.fillText(a.apply(this,t),0,0),e===i.toDataURL()}function c(e){var t=a.createElement("script");t.src=e,t.defer=t.type="text/javascript",a.getElementsByTagName("head")[0].appendChild(t)}for(o=Array("flag","emoji"),t.supports={everything:!0,everythingExceptFlag:!0},r=0;r<o.length;r++)t.supports[o[r]]=function(e){if(!p||!p.fillText)return!1;switch(p.textBaseline="top",p.font="600 32px Arial",e){case"flag":return s([127987,65039,8205,9895,65039],[127987,65039,8203,9895,65039])?!1:!s([55356,56826,55356,56819],[55356,56826,8203,55356,56819])&&!s([55356,57332,56128,56423,56128,56418,56128,56421,56128,56430,56128,56423,56128,56447],[55356,57332,8203,56128,56423,8203,56128,56418,8203,56128,56421,8203,56128,56430,8203,56128,56423,8203,56128,56447]);case"emoji":return!s([10084,65039,8205,55357,56613],[10084,65039,8203,55357,56613])}return!1}(o[r]),t.supports.everything=t.supports.everything&&t.supports[o[r]],"flag"!==o[r]&&(t.supports.everythingExceptFlag=t.supports.everythingExceptFlag&&t.supports[o[r]]);t.supports.everythingExceptFlag=t.supports.everythingExceptFlag&&!t.supports.flag,t.DOMReady=!1,t.readyCallback=function(){t.DOMReady=!0},t.supports.everything||(n=function(){t.readyCallback()},a.addEventListener?(a.addEventListener("DOMContentLoaded",n,!1),e.addEventListener("load",n,!1)):(e.attachEvent("onload",n),a.attachEvent("onreadystatechange",function(){"complete"===a.readyState&&t.readyCallback()})),(n=t.source||{}).concatemoji?c(n.concatemoji):n.wpemoji&&n.twemoji&&(c(n.twemoji),c(n.wpemoji)))}(window,document,window._wpemojiSettings);
</script>
<style type="text/css">
img.wp-smiley,
img.emoji {
display: inline !important;
border: none !important;
box-shadow: none !important;
height: 1em !important;
width: 1em !important;
margin: 0 0.07em !important;
vertical-align: -0.1em !important;
background: none !important;
padding: 0 !important;
}
</style>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<link rel="stylesheet"href="https://maxcdn.bootstrapcdn.com/bootstrap/5.0.2/css/bootstrap.min.css" >
<script type='text/javascript' src='https://kidslifedev.wpengine.com/wp-content/plugins/enable-jquery-migrate-helper/js/jquery/jquery-1.12.4-wp.js?ver=1.12.4-wp' id='jquery-core-js'></script>
<script type='text/javascript' src='https://kidslifedev.wpengine.com/wp-content/plugins/enable-jquery-migrate-helper/js/jquery-migrate/jquery-migrate-1.4.1-wp.js?ver=1.4.1-wp' id='jquery-migrate-js'></script>
<script type='text/javascript' id='layerslider-greensock-js-extra'>
/* <![CDATA[ */
var LS_Meta = {"v":"6.7.0"};
/* ]]> */
</script>
<script>
const chmessage = document.getElementsByClassName("ch-message");
chmessage.style.display = "none";
</script>
<header>
<div class="container">
<div class="logo">
<img src="images/logo.png" alt="Kids Life" title="Kids Life">
<br><br>
</div>
<div class="contact-details">
<p class="mail">
sreesav1611#gmail.com
<span class="fa fa-envelope"></span>
</p>
<p class="phone-no">
<i>+91 98401 04939</i>
<span class="fa fa-phone"></span>
</p>
</div>
</div>
<!--menu-container starts-->
<div id="menu-container">
<div class="container">
<!--nav starts-->
<nav id="main-menu">
<div class="dt-menu-toggle" id="dt-menu-toggle">Menu<span class="dt-menu-toggle-icon"></span></div>
<ul id="menu-main-menu" class="menu">
<li class="menu-item-simple-parent menu-item-depth-0 red"> Home
<ul class="sub-menu">
<li> Terms & Conditions </li>
<li> Calender </li>
<li> News & Events </li>
<li> Technology </li>
</ul>
<a class="dt-menu-expand">+</a>
</li>
<li class="menu-item-simple-parent menu-item-depth-0 red"> About Us
<ul class="sub-menu">
<li>Vision &mission</li>
<li>Objectives</li>
<li>Strategic Planning</li>
<li>Key Value</li>
</ul>
<a class="dt-menu-expand">+</a>
</li>
<li class="menu-item-simple-parent menu-item-depth-0 red"> Our Staffs </li>
<li class="menu-item-simple-parent menu-item-depth-0 red"> Academics
<ul class="sub-menu">
<li> Kinder Garten </li>
<li> Primary Curriculum </li>
<li> Secondary Curriculum </li>
<li> Higher Secondary </li>
<li> Co-Scholastic</li>
</ul>
<a class="dt-menu-expand">+</a>
</li>
<li class="menu-item-simple-parent menu-item-depth-0 blue">ADMISSION
<ul class="sub-menu">
<li>Admission Process</li>
<li>Online Application</li>
<li>Send Enquiry</li>
</ul>
<a class="dt-menu-expand">+</a>
</li>
<li class="menu-item-simple-parent menu-item-depth-0 blue">Encyclopedia
<ul class="sub-menu">
<li>Rules & Regulation</li>
<li>School Timing</li>
<li>Transport</li>
<li>Exam Schedule & System</li>
</ul>
<a class="dt-menu-expand">+</a>
</li>
<li class="menu-item-simple-parent menu-item-depth-0 red"> INFRASTRUCTURE
<ul class="sub-menu">
<li> Classrooms </li>
<li> Laboratories
<ul class="sub-menu">
<li> Computer Lab </li>
<li> Math Lab </li>
<li> Chemistry Lab </li>
<li> Physics Lab </li>
<li> Biology Lab </li>
</ul>
<a class="dt-menu-expand">+</a>
</li>
</ul>
<a class="dt-menu-expand">+</a>
</li>
<li class="menu-item-simple-parent menu-item-depth-0 lavender">Gallery
<ul class="sub-menu">
<li>
Academic year 22-23
</li>
</ul>
<a class="dt-menu-expand">+</a>
</li>
<li class="pink">Contact us</li>
</ul>
</nav>
<!--nav ends-->
<ul class="dt-sc-social-icons">
<li><span class="fa fa-facebook"></span></li>
<li><span class="fa fa-youtube"></span></li>
<li><span class="fa fa-twitter"></span></li>
<li><span class="fa fa-google-plus"></span></li>
</ul>
</div>
</div>
<!--menu-container ends-->
<br><br><br><br><br><br>
</header>
From a debugging perspective I'd start by looking at the network tab and verifying if the bootstrap files were being loaded. if they aren't, well, there's a place to start. If they are, I'd go into the page elements and inspect them to see if the boot strap styles were being assigned to the components and that they are consistent. You are including a lot of stuff in your header and there are a lot of things that might be conflicting with bootstrap. Try getting rid of all the other stuff and see if including just bootstrap works. if you get there, then add the other stuff back in and see where it breaks.
Foundation 5 off-canvas menu always appears
I'm having difficulty having my off-canvas menu in Foundation 5 toggle on and off, or at least not always appear on canvas. Below is a picture of the current site.
As shown, the offcanvas is very much on canvas
This is the HTML I am running so far. The content is not included as it is on a separate YAML file, but it should be unnecessary.
<!DOCTYPE html>
<html>
<head>
<link rel="icon" type="image/png" href="/assets/img/logo/sjpminilogo.png" />
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>{{ page.title }} | Paly SJP</title>
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="/assets/css/syntax.css">
<link rel="stylesheet" href="/assets/css/main.css">
<link rel="stylesheet" href="/assets/foundation/css/foundation.css">
<link rel="stylesheet" href="/assets/foundation/css/normalize.css">
<link rel="stylesheet" href="/assets/css/custom.css">
<script type="text/javascript" src="/assets/foundation/js/custom.modernizr.js"></script>
<link href="http://fonts.googleapis.com/css?family=Source+Sans+Pro" rel="stylesheet" type="text/css">
</head>
<body>
<div class="site">
<div class="off-canvas-wrap" data-offcanvas>
<div class="inner-wrap">
<div class="header">
<!-- Top Bar -->
<nav class="top-bar">
<ul class="title-area">
<!-- Title Area -->
<li class="name">
<h1>Paly SJP</h1>
</li>
</ul>
<!-- All tabs on right side -->
<section class="top-bar-section">
<ul class="right">
<li class="name">
ABOUT US
</li>
<li class="name">
CALENDAR
</li>
<li class="has-dropdown not-click">COHORTS
<ul class="dropdown">
<li>COHORT 1</li>
<li>COHORT 2</li>
</ul>
</li>
</ul>
</section>
</nav>
</div>
<!-- Side bar -->
<nav class="tab-bar show-for-small">
<a class="left-off-canvas-toggle menu-icon" href="#">
<span>
Paly SJP
</span>
</a>
</nav>
<aside class="left-off-canvas-menu">
<ul class="off-canvas-list">
<li>
<label>Menu</label>
</li>
<li>
Paly SJP
</li>
<li>
About Us
</li>
<li>
Calendar
</li>
<li>
<label>Cohorts</label>
</li>
<li style="background-color: #3B3B3B">
Cohort 1
</li>
</ul>
</aside>
<div class="content">
{{ content }}
</div>
<div class="footer">
<div class="row">
<div class="large-12 columns">
<h6 style="color:#ffffff; margin-top:24px; font-size:14px;">Keep in touch!</h6>
<a href="https://twitter.com/palysocjustice" target="_blank">
<img src="/assets/img/logo/footer/twitter.png" class="logo" /></a>
<a href="https://www.facebook.com/pages/Paly-Social-Justice-Pathway/1481478495402897" target="_blank">
<img src="/assets/img/logo/footer/facebook.png" class="logo" /></a>
<a href="http://palysocialjustice.blogspot.com/" target="_blank">
<img src="/assets/img/logo/footer/blogspot.png" class="logo" /></a>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="/assets/foundation/js/vendor/jquery.js"></script>
<script type="text/javascript" src="/assets/foundation/js/foundation.min.js"></script>
<script type="text/javascript" src="/assets/foundation/js/foundation/foundation.clearing.js"></script>
<script type="text/javascript" src="/assets/foundation/js/foundation/foundation.offcanvas.js"></script>
<script type="text/javascript" src="/assets/js/custom.js"></script>
</div>
<script type="text/javascript">
$(document).foundation();
</script>
</body>
</html>
If you inspect the aside element using the developer tools in Chrome or whatever browser you're using, the styles associated with the left-off-canvas-menu class are not present. Re-upload the complete foundation.css file to ensure the appropriate styles are applied.
Need help to install BxSlider
I need your help. I want to add bxslider to my html template but It's not working. I've tried everything I could imagine. When I preview my website I am rewarded with my three images all shown at once, each underneath the other. I hope someone can explain and/or show me what I should do in able to have my slider working properly.
HTML
<link rel="stylesheet" href="css/style.css" media="screen" />
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans:400italic,400,300,700" />
<link rel="stylesheet" href="css/flexslider.css" media="screen" />
<link rel="stylesheet" href="css/jquery.fancybox.css" media="screen" />
<link rel="stylesheet" href="css/jquery.bxslider.css" media="screen" />
<script type="text/javascript">
$(document).ready(function(){
$('.slider').bxSlider({
mode: 'fade',
captions: true,
auto: true,
autoControls: false
});
});
</script>
<script src="js/jquery-1.10.2.min.js"></script>
<script src="js/jquery-migrate-1.2.1.min.js"></script>
<script src="js/jquery.bxslider.js"></script>
<script src="js/jquery.ui.widget.min.js"></script>
<script src="js/jquery.ui.accordion.min.js"></script>
<script src="js/jquery.ui.tabs.min.js"></script>
<script src="js/jQuery.BlackAndWhite.min.js"></script>
<script src="js/jquery.easing-1.3.min.js"></script>
<script src="js/jquery.fitvid.js"></script>
<script src="js/jquery.fancybox.pack.js"></script>
<script src="js/jquery.flexslider-min.js"></script>
<script src="js/jquery.isotope.min.js"></script>
<script src="js/jquery.jcarousel.min.js"></script>
<script src="js/jquery.jtweetsanywhere-1.3.1.min.js"></script>
<script src="js/jquery.touchSwipe.min.js"></script>
<script src="js/jquery.zflickrfeed.min.js"></script>
<script src="js/respond.min.js"></script>
<script src="js/selectnav.min.js"></script>
<script src="js/custom.js"></script>
<script type="text/javascript" src="[JS library]"></script>
<!--[if (gte IE 6)&(lte IE 8)]>
<script type="text/javascript" src="js/selectivizr-min.js"></script>
<noscript><link rel="stylesheet" href="[fallback css]" /></noscript>
<![endif]-->
</head>
<body>
<!-- Main Container -->
<div id="body-wrapper">
<!-- Header -->
<div id="header" class="container clearfix">
<img src="images/logo.png" alt="" />
<!-- Navigation -->
<ul id="navigation">
<li class="current">
Home
</li>
<li>
Features
<ul>
<li>About Us</li>
<li>Pricing Tables</li>
<li>Third Navigation Level<i></i>
<ul>
<li>Amazing things</li>
<li>that bring</li>
<li>positive results</li>
</ul>
</li>
<li>Shortcodes</li>
</ul>
</li>
<li>
Blog
<ul>
<li>Single Post</li>
</ul>
</li>
<li>
Portfolio
<ul>
<li>2 Columns</li>
<li>3 Columns</li>
<li>4 Columns</li>
<li>Single Project</li>
</ul>
</li>
<li>
Contact
</li>
</ul>
<!-- /Navigation -->
</div>
<!-- /Header -->
<!-- Content -->
<div id="content" class="container clearfix">
<h1 class="page-title">Hello, <span class="accent">We are Alco</span><br />A Creative Digital Ageny.</h1>
<ul class="slider">
<li>
<img src="images/content/slide_01.jpg" alt="">
</li>
<li>
<img src="images/content/slide_01.jpg" alt="">
</li>
<li>
<img src="images/content/slide_01.jpg" alt="">
</li>
</ul>
</div>
Your answers will be highly appreciated !
You need to load the below scripts <script src="js/jquery-1.10.2.min.js"></script> <script src="js/jquery.bxslider.js"></script> Before the $(document).ready(function(). Also remember the scripts should be loaded before the bxslider.css You can refer to How to install
Foundation 5.2.3 Top Bar Drop down not working
Hi guys i am new for foundation 5 and i tried to make a top bar for my website but drop down is not working here is my code please help i was googling all the day but i was not able to find a solution for this. please help me. is it possible to occur issue like this due to foundation issue? <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel = "icon" href = favi.gif type="image/x-icon"/> <link rel="stylesheet" href="css/normalize.css"> <script src="js/jquery.js"></script> <script src="js/foundation.js"></script> <meta charset="utf-8"> <link rel="stylesheet" href="css/foundation.css" /> <script src="js/vendor/modernizr.js"></script> <script src="js/foundation.js"></script> <script src="js/foundation.dropdown.js"></script> <script src="js/foundation.topbar.js"></script> <title>Music Eka</title> </head> <nav class="top-bar" data-topbar> <ul class="title-area"> <li class="name"> <h1>My Site</h1> </li> <!-- Remove the class "menu-icon" to get rid of menu icon. Take out "Menu" to just have icon alone --> <li class="toggle-topbar menu-icon"><span>Menu</span></li> </ul> <section class="top-bar-section"> <!-- Right Nav Section --> <ul class="right"> <li class="active">Right Button Active</li> <li class="has-dropdown"> Right Button Dropdown <ul class="dropdown"> <li>First link in dropdown</li> </ul> </li> </ul> <!-- Left Nav Section --> <ul class="left"> <li>Left Nav Button</li> </ul> </section> </nav>
you haven't initialized foundation add this at the end of your body. <script> $(document).foundation(); </script>
Bootstrap dropdown doesn't work?
Bootstrap dropdown isn't working for me. I did everything correctly as you can see it there:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Test site | Jony</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Testing website coded by Jony - rapture-gfx" />
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen"/>
<link rel="stylesheet" href="css/bootstrap.css" type="text/css" media="screen"/>
<link href='http://fonts.googleapis.com/css?family=Dosis' rel='stylesheet' type='text/css'><link rel="stylesheet" href="css/flexslider.css" type="text/css"><script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script><script src="js/jquery.flexslider.js"></script><!-- Place in the <head>, after the three links --> <script type="text/javascript" charset="utf-8">$(window).load(function() { $('.flexslider').flexslider({ animation: "slide" });});</script>
<link rel="stylesheet" href="flexslider.css" type="text/css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script src="js/jquery.flexslider.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="js/jquery.lavalamp-1.4.js"></script>
<script type="text/javascript" src="js/bootstrap.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript">
$('.dropdown-toggle').dropdown()
</script>
</head>
<header>
<div class="header">
<div class="container">
<ul class="menu">
<li class="current"><span style="color: #bde2e1;">Home</li>
<li class="dropdown"><a class="dropdown-toggle" href="#">Servers</a>
<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
<li class="hovering">Portfolio</li>
<li class="hovering">Releases</li>
<li class="hovering">Contact</li>
</ul>
</li>
<li class="hovering">Portfolio</li>
<li class="hovering">Releases</li>
<li class="hovering">Contact</li>
</ul>
Bootstrap is a ready framework with features like grid system, rows, ready js menus and more.
There's an explanation of how it works:
http://twitter.github.com/bootstrap/javascript.html#dropdowns
It doesn't work for me.
Yes, my src links correctly to the JS files.
your missing the body in your html.
put your script at the bottom of the page or after ready:
<script type="text/javascript">
$(function(){
$('.dropdown-toggle').dropdown();
});
</script>
demo: http://jsfiddle.net/rLL75/
EDIT:
use a newer version of jquery.
<header>
<div class="navbar navbar-static header">
<div class="navbar-inner container">
<ul class="nav" role="navigation">
<li class="brand"><span style="color: #bde2e1;">Home</span></li>
<li class="dropdown">
<a class="dropdown-toggle" id="drop4" role="button" data-toggle="dropdown" href="#">Dropdown <b class="caret"></b></a>
<ul id="menu1" class="dropdown-menu" role="menu" aria-labelledby="drop4">
<li><a tabindex="-1" href="#">Action</a></li>
<li><a tabindex="-1" href="#">Another action</a></li>
<li><a tabindex="-1" href="#">Something else here</a></li>
<li class="divider"></li>
<li><a tabindex="-1" href="#">Separated link</a></li>
</ul>
</li>
<li class="hovering">Portfolio</li>
<li class="hovering">Releases</li>
<li class="hovering">Contact</li>
</ul>
<div id="logo"><img src="img/logo.png" /></div>
</div>
</div>
</header>
<script type="text/javascript">
$(function(){
$('.dropdown-toggle').dropdown();
});
</script>