Laravel 4 : Sidebar is not clickable - javascript

I have here in my views a sidebar and I got problem because the sidebar aren't clickable. I don't know what's the problem I read online about this problem but I do the right thing, Please can anyone help to check this out?
Do check my code below:
I have a master.blade.php: The code below.
<!DOCTYPE html>
<html lang="en">
<head>
#include('layouts.head')
</head>
<body>
<!-- START PAGE CONTAINER -->
<div class="page-container">
#include('layouts.sidebar')
<!-- PAGE CONTENT -->
<div class="page-content">
#include('layouts.navigation')
#include('layouts.breadcrumb')
<!-- PAGE CONTENT WRAPPER -->
<div class="page-content-wrap">
#yield('content')
</div>
<!-- END PAGE CONTENT WRAPPER -->
</div>
<!-- END PAGE CONTENT -->
</div>
<!-- END PAGE CONTAINER -->
#include('layouts.messagebox')
<!-- START PRELOADS -->
<audio id="audio-alert" src="audio/alert.mp3" preload="auto"></audio>
<audio id="audio-fail" src="audio/fail.mp3" preload="auto"></audio>
<!-- END PRELOADS -->
<!-- START SCRIPTS -->
<!-- START PLUGINS -->
{{HTML::script('js/plugins/jquery/jquery.min.js');}}
{{HTML::script('js/plugins/jquery/jquery-ui.min.js');}}
{{HTML::script('js/plugins/bootstrap/bootstrap.min.js');}}
<!-- END PLUGINS -->
<!-- START THIS PAGE PLUGINS-->
{{HTML::script('js/plugins/icheck/icheck.min.js');}}
{{HTML::script('js/plugins/mcustomscrollbar/jquery.mCustomScrollbar.min.js');}}
{{HTML::script('js/plugins/scrolltotop/scrolltopcontrol.js');}}
{{HTML::script('js/plugins/morris/raphael-min.js');}}
{{HTML::script('js/plugins/morris/morris.min.js');}}
{{HTML::script('js/plugins/rickshaw/d3.v3.js');}}
<!-- {{HTML::script('js/plugins/rickshaw/rickshaw.min.js');}} -->
{{HTML::script('js/plugins/jvectormap/jquery-jvectormap-1.2.2.min.js');}}
{{HTML::script('js/plugins/jvectormap/jquery-jvectormap-world-mill-en.js');}}
{{HTML::script('js/plugins/bootstrap/bootstrap-datepicker.js');}}
{{HTML::script('js/plugins/owl/owl.carousel.min.js');}}
{{HTML::script('js/plugins/bootstrap/bootstrap-select.js');}}
<!-- END THIS PAGE PLUGINS-->
<!-- START TEMPLATE -->
{{HTML::script('js/ixepms.js');}}
<!-- {{HTML::script('js/settings.js');}} -->
{{HTML::script('js/plugins.js');}}
{{HTML::script('js/actions.js');}}
{{HTML::script('js/demo_dashboard.js');}}
<!-- END TEMPLATE -->
<!--START DATA TABLE TEMPLATES PLUGIN-->
{{HTML::script('js/plugins/datatables/jquery.dataTables.min.js')}}
<!--END DATA TABLE TEMPLATES PLUGIN-->
#yield('script')
#yield('department_script')
<!-- END SCRIPTS -->
</body>
</html>
As what you have noticed in the code, I #include in the masterpage a sidebar
layouts/sidebar.blade.php : Code below
<!-- START PAGE SIDEBAR -->
<div class="page-sidebar">
<!-- START X-NAVIGATION -->
<ul class="x-navigation">
#include('layouts.profile')
<li class="xn-title">Navigation</li>
<li class="xn-openable">
<span class="fa fa-dashboard"></span> <span class="xn-text">Dashboards</span>
<ul>
<!-- <li><span class="fa fa-desktop"></span> <span class="xn-text">General Dashboard</span></li> -->
<li><span class="fa fa-desktop"></span> <span class="xn-text">General Dashboard</span></li>
<li><span class="fa fa-desktop"></span> <span class="xn-text">My Dashboard</span></li>
</ul>
</li>
<li class="xn-openable">
<span class="fa fa-users"></span> <span class="xn-text"> Manage Users</span>
<ul>
<li><span class="fa fa-file"></span> <span class="xn-text">Users</span></li>
<li><span class="fa fa-file-text"></span> <span class="xn-text">Add New User</span></li>
<li><span class="fa fa-file-text-o"></span> <span class="xn-text">View Profile</span></li>
<li><span class="fa fa-file-text-o"></span> <span class="xn-text">Deactivated Users</span></li>
</ul>
</li>
<li class="xn-openable">
<span class="fa fa-files-o"></span> <span class="xn-text">Assessment</span>
<ul>
<li><span class="fa fa-file"></span> <span class="xn-text">Do My Assessment</span></li>
<li><span class="fa fa-file-text"></span> <span class="xn-text">Peer Assessment</span></li>
<li><span class="fa fa-file-text-o"></span> <span class="xn-text">Supervisorial Assessment</span></li>
</ul>
</li>
<li>
<span class="fa fa-folder-open"></span> <span class="xn-text">Manage Assessments</span>
</li>
</ul>
<!-- END X-NAVIGATION -->
</div>
<!-- END PAGE SIDEBAR -->
Can you check why does my sidebar aren't clickable?


Use element inspector... you might have some element (like a div, perhaps .page-content) over your side bar.

Related

Stripe Elements for a checkout form using node js and ejs

I am trying to create an application that allows users to select different subscription levels and pay based on the level they chose. I am using Stripe to handle payments, node.js for server logic, and ejs for rendering my html pages. So far, I am able to create customers and a subscription in Stripe using a sign up form that stores the user's info, however, the subscription is set as inactive by default. This means that after the users sign up, they will be redirected to a checkout page where they can input their credit card info, and I am trying to create the checkout form using the stripe elements. I am following this Stripe tutorial and docs directly from Stripe: https://stripe.com/docs/billing/subscriptions/build-subscription?ui=elements#collect-payment
However, the checkout page does not show any indication that the elements is being created as only a subscription button appears with no fields to input the card info. Here is my checkout page:
<% include('partials/header') %>
<body>
<form id="payment-form">
<div id="card-element">
<!-- Elements will create input elements here -->
</div>
<!-- We'll put the error messages in this element -->
<div id="card-element-errors" role="alert"></div>
<button type="submit">Subscribe</button>
</form>
</body>
<!-- Copyright LFD Banner -->
<div class="container-fluid copyright-banner-container">
<p class="white-text">&copy Lonestar Firearm Defense 2021</p>
<a class="footer-link" href="resources">Resources</a>
</div>
<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.10.2/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
<script>
let stripe = Stripe('sk_test_123');
let elements = stripe.elements();
let style = {
base: {
// Add your base input styles here. For example:
fontSize: '50px',
color: '#32325d',
},
};
let card = elements.create('card', { style: style });
card.mount('#card-element');
</script>
</body>
</html>
Here is my partial header that includes the Stripe.js script:
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<!-- Required Meta Tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Lonestar Firearm Defense</title>
<!-- Google Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Anton&family=Poppins:ital,wght#0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<!-- Custom CSS -->
<link rel="stylesheet" href="/css/styles.css">
<!-- Favicon -->
<link rel="icon" href="/images/lonestar.png">
<!-- Font Awesome -->
<script src="https://kit.fontawesome.com/5431d76b85.js" crossorigin="anonymous"></script>
<!-- Stripe.js script -->
<script src="https://js.stripe.com/v3/"></script>
</head>
<body>
<!-- Contact Banner -->
<div class="container-fluid contact-banner-container">
<div class="row">
<div class="col-md-6">
<i class="fas fa-map-marker-alt"></i>
<p>Dallas</p>
<i class="fas fa-phone-alt"></i>
(888)852-0762
<i class="far fa-envelope"></i>
info#lonestarfirearmdefense.com
</div>
</div>
</div>
<!-- Navbar -->
<nav class="navbar navbar-expand-lg">
<!-- Nav Logo -->
<div class="container d-flex flex-nowrap">
<a class="navbar-brand" href="/">
<img src="/images/lfd-logo.png" alt="Lonestar Firearm Defense">
</a>
<!-- Nav Button -->
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<i class="fas fa-bars"></i>
</button>
</div>
<!-- Nav Links -->
<div id="navbarSupportedContent" class="collapse navbar-collapse">
<ul class="navbar-nav ul-navbar">
<li class="nav-item">
<a class="nav-link" href="/">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/about">About Us</a>
</li>
<li>
<a class="nav-link" href="/#membershipPlansContainer">Membership</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/contact">Contact Us</a>
</li>
<li class="nav-item">
<% if(user) { %>
<a class="nav-link" href="/user-panel">Hi, <%= user.firstName %></a>
<% } else { %>
<a class="nav-link" href="/register">Signup/Login</a>
<% } %>
</li>
<li class="nav-item">
<a class="nav-link" href="/blog">Blog</a>
</li>
</ul>
</div>
</nav>
It is also weird that neither my navbar nor my footer is being rendered on this page even though they are coded in, so maybe that is an indication that the Stripe elements is working slightly. How can I properly create the checkout form using Stripe Elements?

Django JavaScript fpr bootstrap grid does not work

I deployed website using Django. I used external js code for grid (I want site to be user-friendly for all screens). When running just html using same js code or running it on my computer through manage.py it works fine. But when I actually deployed website grid become unclickable from small screens and you cannot see menu.
I couldn't find anything in Google. I am not sure if I have to use load static because I use external script, but tell me if I am wrong
<!DOCTYPE html>
{% load static %}
<html>
<head>
<meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
<!-- DOCUMENTATION NAVBAR -->
<nav class="navbar navbar-default navbar-inverse navbar-fixed-top">
<!-- Inside of a Container -->
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<!-- This is the actual code that create the "hamburger icon" -->
<!-- The data-target grabs ids to put into the icon -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<!-- Code for the hamburger icon-->
<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" style="color:white;"
href="{% url 'wpb:index' %}">
Mycroft Conspiracy Project</a>
</div>
<!-- Anything inside of collapse navbar-collapse goes into the "hamburger" -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active">О проекте <span class="sr-only">(current)</span></li>
<li class="active">Политика<span class="sr-only">(current)</span></li>
<li class="active">Психология<span class="sr-only">(current)</span></li>
</ul>
<!-- SEARCH BAR -->
<form action="{% url 'wpb:search' %}" method="get" class="navbar-form navbar-right">
<div class="input-group">
<input type="text" name="q" class="form-control" placeholder="Поиск">
</div>
<button type="submit" class="btn btn-default" name="search">Поиск</button>
</form>
<!-- Stuff on the Right -->
<ul class="nav navbar-nav navbar-right">
<li>Обратная связь</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<!-- OTHER STUFF ON THE PAGE -->
<!-- Need to have JQuery and Javascript for DropDown Actions to work -->
<script
src="http://code.jquery.com/jquery-3.1.1.js"
integrity="sha256-16cdPddA6VdVInumRGo6IbivbERE8p7CQR3HzTBuELA="
crossorigin="anonymous"></script> <!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<div class="container">
<br />
<br />
<br />
<body style=" height: 800px;
position: relative;">
{% block body_block %}
{# Anything outside of this will be inherited if you use extend.#}
{% endblock %}
</body>
</div>
</br>
<div style="font-family:Palatino Linotype;position: sticky; position: -webkit-sticky;left:0;bottom:0;width:100%; top: 100%; height: 12rem;background-color:#2e2c27; border:1px dotted #003333; padding:.8em; ">
<h4 style="color:white;font-weight: bold;">Mycroft Conspiracy Project</h4>
<span style="font-size:12pt; font-family: 'Cambria','times new roman','garamond',serif; color:white;">Достоверность информации</span></br>
<p style="font-size:10pt; line-height:10pt; font-family: 'Cambria','times roman',serif; color: white;">Проект является любительским и не носит информационный характер. Хотя автор указывает в каждой статье степень своего личного отношения к
описываемым версиям или данным, здесь отсутствуют намерения представить статьи как источники, на которые стоит ссылаться. При копировании материалов с сайта ссылка
обязательна.</p>
<span style="padding-top:10px; font-weight:bold; color:#CC0000; font-size:10pt; font-family: 'Calibri',Arial,sans-serif; "></span></br></br>
</div>
</body>
</html>

Found it. Problem was that link to js code was starting with http. Browser was blocking it as mixed content. Needed just to change it to https.

href link button not working html

This code below for the menu, all links scroll down to a certain section, except for the Blog button that should send the user to another link, but it doesn't work, it only works if I write click and choose open in new tab
here is the code
<div class="header-menu-and-meta">
<ul id="main-menu" class="main-menu">
<li><a data-scroll-nav="4" href="#cta-title-1">contact</a></li>
<li><a data-scroll-nav="3" href="#clients-testmonials">clients</a></li>
<li><a data-scroll-nav="1" href="#fun-facts">about</a></li>
<li><a data-scroll-nav="0" href="#header">main</a></li>
</ul>
<div class="header-meta">
<div class="hm-content">
<a class="header-btn scroll-to btn small colorful hover-white" href="http://example.com/blog/">Blog</a>
</div><!-- .hm-content end -->
</div><!-- .header-meta end -->
<div class="mobile-menu-btn hamburger hamburger--slider">
<span class="hamburger-box">
<span class="hamburger-inner"></span>
</span>
</div><!-- .mobile-menu-btn -->
<!-- <div class="clearfix"></div> -->
</div><!-- .header-menu-and-meta end -->

If you want to open your link in a new tab you can use the target='_blank' attribute. If you wish to open it in the same window then don't include this attribute. See the code snippet below. (Note that the target blank attribute will not work on this site, so test it locally or on this fiddle)
Also, ensure the you have the full url, including www.
<div class="header-menu-and-meta">
<ul id="main-menu" class="main-menu">
<li><a data-scroll-nav="4" href="#cta-title-1">contact</a></li>
<li><a data-scroll-nav="3" href="#clients-testmonials">clients</a></li>
<li><a data-scroll-nav="1" href="#fun-facts">about</a></li>
<li><a data-scroll-nav="0" href="#header">main</a></li>
</ul>
<div class="header-meta">
<div class="hm-content">
<a class="header-btn scroll-to btn small colorful hover-white" href="http://www.example.com/blog/" target="_blank">Blog</a>
</div>
<!-- .hm-content end -->
</div>
<!-- .header-meta end -->
<div class="mobile-menu-btn hamburger hamburger--slider">
<span class="hamburger-box">
<span class="hamburger-inner"></span>
</span>
</div>
<!-- .mobile-menu-btn -->
<!-- <div class="clearfix"></div> -->
</div>
<!-- .header-menu-and-meta end -->

Its working fine for me it redirects to link.
<div class="header-menu-and-meta">
<ul id="main-menu" class="main-menu">
<li><a data-scroll-nav="4" href="#cta-title-1">contact</a></li>
<li><a data-scroll-nav="3" href="#clients-testmonials">clients</a></li>
<li><a data-scroll-nav="1" href="#fun-facts">about</a></li>
<li><a data-scroll-nav="0" href="#header">main</a></li>
</ul>
<div class="header-meta">
<div class="hm-content">
<a class="header-btn scroll-to btn small colorful hover-white" href="http://example.com/blog/">Blog</a>
</div><!-- .hm-content end -->
</div><!-- .header-meta end -->
<div class="mobile-menu-btn hamburger hamburger--slider">
<span class="hamburger-box">
<span class="hamburger-inner"></span>
</span>
</div><!-- .mobile-menu-btn -->
<!-- <div class="clearfix"></div> -->
</div><!-- .header-menu-and-meta end -->

You can control the behaviour of redirection of the anchor tags by setting the target attribute.
by default property it has is self: target="_self"
You want to achieve is target="_blank"
I took the image clip from Mozilla Developers Network.

Ok I found the problem it was in the JS files, the HTMLAnchorElement was set to preventdefault

JS Hide header elements and resize navigation bar on scroll

I have a large header section for a website that is split into three sections; social links, logo, and then the navigation bar. I am trying to figure out how I can hide the top two elements and resize the navigation bar and have it fixed when the user scrolls past it.
The nav bar currently just holds a link that will open up a separate side menu that holds all of the actual page navigation.
https://jsfiddle.net/cxekxrxy/2/
<header>
<!-- social links -->
<div id="social" class="social-header">
<div class="container">
<div class="row">
<ul>
<li class="social-icon"><i class="fa fa-facebook-official" aria-hidden="true"></i></li>
<li class="social-icon"><i class="fa fa-twitter-square" aria-hidden="true"></i></li>
<li class="social-icon"><i class="fa fa-instagram" aria-hidden="true"></i></li>
<li class="social-icon"><i class="fa fa-linkedin-square" aria-hidden="true"></i></li>
</ul>
</div>
</div>
</div>
<!-- logo -->
<div id="logo" class="logo-header">
<div class="container">
<div class="row">
<h1 class="logo-main">Main Header</h1>
<h2 class="logo-sub">Sub Header</h2>
</div>
</div>
</div>
<!-- Navigation -->
<div id="header" class="main-header">
<div class="container">
<div id="bars"><span class="glyphicon glyphicon-menu-hamburger text-right" id="nav-bars" style="font-size:25px; cursor:pointer" onclick="openNav()"></span></div>
</div>
<!-- nav links (hidden until <span> is pressed) -->
<div id="main-nav" class="side-nav">
×
<span class="glyphicon glyphicon-home"> Home</span>
<span class="glyphicon glyphicon-user"> About</span>
<span class="glyphicon glyphicon-picture"> Portfolio</span>
<span class="glyphicon glyphicon-envelope"> Contact</span>
</div>
</div>
</header>

You can see this neat example for your need:
https://css-tricks.com/scroll-fix-content/
And work with your code.
This is combination CSS and JS, and a simplest solution
.

Offseting the content in Angular

Is there a way to have the offcanvas offset my content without actually putting the entirety of my content inside it?
What I mean is, in order of the offcanvas to offset the main content this has to be inside the offcanvas inner-wrap div, however, with angular, this could be difficult to implement.
I'd rather not implement my IndexController inside the OffCanvasController and every other single piece of content.
Is there a way to get the Offcanvas to push the main content to the right as it would normally do, without the need to include said content inside the offcanvas?
I currently have an index.html, a header.html and an offcanvas.html, as follows:
header.html:
<div data-ng-include="'/public/system/views/offcanvas.html'"></div> <!-- This is where the offcanvas is included, before the main navigation -->
<div class="page-header" data-ng-controller="HeaderController">
<div class="desktop">
<ul class="title-area">
<li class="name">
<h1><a ui-sref="home" mean-token="'site-title'">SOL::S</a></h1>
</li>
</ul>
<section class="top-bar-section">
<ul class="left">
<li data-ng-repeat="item in menus.main" ui-route="/{{item.link}}" ng-class="{active: $uiRoute}">
<a mean-token="item.link" ui-sref='{{item.link}}'>{{item.title}}</a>
</li>
</ul>
<div class="account">
<div class="text-edit">
<div data-ng-show="global.authenticated" mean-token-editable></div>
</div>
<ul class="right" data-ng-hide="global.authenticated">
<li><a ui-sref='auth.register'>Register</a></li>
<li><a ui-sref='auth.login'>Login</a></li>
</ul>
<ul class="right" data-ng-show="global.authenticated">
<li class="has-dropdown">
{{global.user.name}}
<ul class="dropdown">
<li>Logout</li>
</ul>
</li>
</ul>
</div>
</section>
</div>
</div>
offcanvas.html
<div class="off-canvas-wrap mobile" data-ng-controller="offCanvasCtrl">
<div class="inner-wrap">
<nav class="tab-bar">
<section class="left-small">
<a class="left-off-canvas-toggle menu-icon" ><span></span></a>
</section>
<section class="middle tab-bar-section">
<h1 class="title">SOL ::</h1>
</section>
</nav>
<aside class="left-off-canvas-menu">
<ul class="off-canvas-list">
<li>Left Sidebar</li>
<li>Left Sidebar</li>
<li>Left Sidebar</li>
</ul>
</aside>
<section class="main-section">
<div class="small-12 columns">
<h1>How to use</h1>
<p>Just use the standard layout for an offcanvas page as documented in the foundation docs</p>
<p>As long as you include mm.foundation.offcanvas it should simply work</p>
</div>
</section>
<a class="exit-off-canvas"></a>
</div>
</div>
And finally, index.html
<div class="container content" data-ng-controller="IndexController"> <!-- Main container and IndexController -->
<section> <!-- Site tag section -->
<div class="row"> <!-- Site tag row -->
<div class="small-12 columns">
<h1 mean-token="'home-default'">SOL :: Search</h1>
</div>
</div> <!-- End site tag row -->
</section> <!-- End site tag section -->
<section> <!-- Logo section -->
<div class="row"> <!-- Logo row -->
<div class="small-10 columns text-center logo-container small-offset-1"> <!-- Logo column -->
<a ui-sref="about" title="SOL"><img ng-src="{{logo}}" alt="SOL Logo"></a>
</div> <!-- End logo column -->
</div> <!-- End logo row -->
</section> <!-- End logo section -->
<section> <!-- Search input section -->
<div class="row"> <!-- Search row -->
<div class="small-8 columns small-offset-2"> <!-- Search column -->
<form>
<div class="row collapse"> <!-- Input group -->
<div class="large-9 columns">
<input type="text" placeholder="" class="form-control main-search-input">
</div>
<div class="small-3 columns">
Search
</div>
</div>
</form>
</div><!-- End input group -->
</div><!-- End search column -->
</div><!-- End search row -->
</section> <!-- End search input section -->
</div> <!-- End IndexController -->
The offcanvas.html is called in the first line of the header.html via a ng-include and the header.html itself is also called with a ng-include as an attribute of the nav element (which is in the index.html on the server side).
It all works wonderfully, except that, in order for the offcanvas to push the content to the right, I would need to include all the content inside this. I'd rather not do that, is there any other way?

Categories

Resources