I'm following the video tutorial Design a prototype for a responsive web app using Foundation Apps version 1.2. I'm having a problem where the left nav and news content does not line up next to each...Provide below is my code:
Here is the HTML page:
<!doctype html>
<html lang="en" ng-app="application">
<head>
<meta charset="utf-8" />
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Yeti News</title>
<link href="/assets/css/app.css" rel="stylesheet" type="text/css">
<script src="/assets/js/foundation.js"></script>
<script src="/assets/js/templates.js"></script>
<script src="/assets/js/routes.js"></script>
<script src="/assets/js/app.js"></script>
</head>
<body>
<div class="grid-frame vertical">
<div class="grid-content shrink collapse">
<div class="title-bar primary">
<div class="center title">YetiNews</div>
<div class="left"><a zf-toggle="info" href="#">Info</a></div>
</div>
</div>
<div class="vertical medium-horizontal grid-block">
<div class="grid-block medium-order-2">
<div zf-panel position="left" id="info" class="fast bounceInOut">
<div class="grid-content">
<h1>Designer News</h1>
<p>This is some great content</p>
</div>
</div>
<div class="grid-content small-12 feeds">
<div class="grid-block small-up-1 meduim-up-2 large-up-3">
<div class="grid-content">
<div class="card card-section">
<h4>This is a title</h4>
<p>This is some really great content and you know how great it is.</p>
</div>
</div>
<div class="grid-content">
<div class="card card-section">
<h4>This is a title</h4>
<p>This is some really great content and you know how great it is.</p>
</div>
</div>
<div class="grid-content">
<div class="card card-section">
<h4>This is a title</h4>
<p>This is some really great content and you know how great it is.</p>
</div>
</div>
<div class="grid-content">
<div class="card card-section">
<h4>This is a title</h4>
<p>This is some really great content and you know how great it is.</p>
</div>
</div>
<div class="grid-content">
<div class="card card-section">
<h4>This is a title</h4>
<p>This is some really great content and you know how great it is.</p>
</div>
</div>
<div class="grid-content">
<div class="card card-section">
<h4>This is a title</h4>
<p>This is some really great content and you know how great it is.</p>
</div>
</div>
</div>
</div>
</div>
<div class="grid-block nav shrink collapse medium-order-1">
<ul class="icon-top medium-vertical menu-bar dark">
<li><img zf-iconic icon="person" size="small" class="iconic-color-primary">Designer</li>
<li><img zf-iconic icon="cog" size="small" class="iconic-color-primary">Hacker</li>
<li><img zf-iconic icon="star" size="small" class="iconic-color-primary">Product</li>
</ul>
</div>
</div>
</div>
</body>
</html>
Please help.
Thank you,
Related
iframe in bootstrap card scales with width but not height how do I make the height responsive as well?
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<div class="row no-gutters">
<div class="col-12">
<div class="card mt-4" style="width: 100%;">
<div class="embed-responsive embed-responsive-4by3">
<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/vlDzYIIOYmM" style: width="100%" height="100%" allowfullscreen></iframe>
</div>
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
Go somewhere
</div>
</div>
</div>
</div>
</div>
From the bootstrap documentation: (https://getbootstrap.com/docs/5.2/helpers/ratio/#example)
Wrap any embed, like an <iframe>, in a parent element with .ratio and an aspect ratio class. The immediate child element is automatically sized thanks to our universal selector .ratio > *.
I also removed the unneeded (hardcoded) width/height attributes.
See sample code below:
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container-fluid">
<div class="row no-gutters">
<div class="col-12">
<div class="card mt-4">
<!-- changes made from here -->
<div class="ratio ratio-16x9">
<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/vlDzYIIOYmM" allowfullscreen></iframe>
</div>
<!-- to here -->
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
Go somewhere
</div>
</div>
</div>
</div>
</div>
I am trying to implement login/logout functionality using the default auth system in Django 2.2. I have the following included in my base.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!-- navbar area start -->
<nav class="navbar navbar-area navbar-expand-lg absolute">
<div class="container-fluid nav-container">
<div class="logo-wrapper navbar-brand">
<a href="{% url 'home' %}" class="logo ">
<img src="/static/asset/img/logo.png" alt="logo">
</a>
</div>
<div class="collapse navbar-collapse" id="cgency">
<!-- navbar collapse start -->
<ul class="navbar-nav" id="primary-menu">
<!-- navbar- nav -->
<li class="nav-item active dropdown">
<a class="nav-link" href="{% url 'home' %}">Home</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link" href="{% url 'features' %}">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{% url 'pricing' %}">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{% url 'ARprogram' %}">Academic Program</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{% url 'ARcertification' %}">Certification</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link" href="{% url 'knowledgebase' %}">Help</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{% url 'contactus' %}">Contact</a>
</li>
</ul>
<!-- /.navbar-nav -->
</div>
<!-- /.navbar btn wrapper -->
<div class="responsive-mobile-menu">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#cgency" aria-controls="cgency"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
</div>
<!-- navbar collapse end -->
<div class="nav-right-content">
<ul>
<li class="nav-btn">
{% if request.user.is_authenticated %}
<!-- Hi {{ user.username }}! -->
logout
{% else %}
login
{% endif %}
</li>
<li class="nav-btn">
Download
</li>
</ul>
</div>
</div>
</nav>
<!-- navbar area end -->
{% block content %}
{% endblock %}
<!-- footer area start -->
<footer class="footer-area footer-bg">
<div class="container">
<div class="row">
<div class="col-lg-3 col-md-6">
<div class="footer-widget widget about_widget"><!-- footer widget -->
<img src="/static/asset/img/footer-logo.png" alt="">
<ul class="social-icon text-center">
<li><i class="fab fa-facebook-f"></i></li>
<li><i class="fab fa-linkedin"></i></li>
</ul>
<div class="copyright-text margin-top-30">© Copyrights 2019 EnablAR </div>
</div><!-- //. footer widget -->
</div>
<div class="col-lg-3 col-md-6">
<div class="footer-widget widget"><!-- footer widget -->
<h4 class="widget-title">Useful Links</h4>
<ul>
<li>Features</li>
<li>Pricing</li>
<li>Getting Started</li>
<li>Academic Program</li>
<li>Certification</li>
</ul>
</div><!-- //. footer widget -->
</div>
<div class="col-lg-3 col-md-6">
<div class="footer-widget widget"><!-- footer widget -->
<h4 class="widget-title">Need Help?</h4>
<ul>
<li>FAQS</li>
<li>Help</li>
<li>Contact</li>
</ul>
</div><!-- //. footer widget -->
</div>
<div class="col-lg-3 col-md-6">
<div class="footer-widget widget"><!-- footer widget -->
<h4 class="widget-title">Download</h4>
<ul>
<li>For windows</li>
</ul>
</div><!-- //. footer widget -->
</div>
</div>
</div>
</footer>
<!-- footer area end -->
</body>
</html>
Index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>About EnablAR</title>
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<meta content="" name="keywords">
<meta content="" name="description">
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<link rel="stylesheet" href="/static/asset/css/bootstrap.min.css">
<link rel="stylesheet" href="/static/asset/css/fontawesome.min.css">
<link rel="stylesheet" href="/static/asset/css/flaticon.css">
<link rel="stylesheet" href="/static/asset/css/animate.css">
<link rel="stylesheet" href="/static/asset/css/slick.min.css">
<link rel="stylesheet" href="/static/asset/css/magnific-popup.css">
<link rel="stylesheet" href="/static/asset/css/style.css">
<link rel="stylesheet" href="/static/asset/css/responsive.css">
</head>
<body>
{% extends "base.html" %}
{% block content %}
<!-- breadcrumb area start-->
<div class="breadcrumb-area">
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="breadcrumb-inner">
<h1 class="page-title">About</h1>
<ul class="page-list">
<li class="index.html">Home</li>
<li>About</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<!-- breadcrumb area end-->
<!-- block feature area start -->
<div class="block-feature-area padding-top-120" id="about">
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="block-feature-item">
<div class="row">
<div class="col-lg-6">
<div class="img-wrapper box-shadow-90">
<img src="/static/asset/img/softawe-1.jpg" alt="software image">
</div>
</div>
<div class="col-lg-6">
<div class="content-block-area padding-left-50">
<h4 class="title wow fadeInUp">Three step process to make your learning content AR enabled</h4>
<p>If you don’t know coding, youre covered!. Simply follow EnablAR’s 3 step process to create your own AR apps.</p>
<ul style="margin-left: -5%;">
<li>Create your 3d models</li>
<li>Use EnablAR</li>
<li>Deploy your App</li>
</ul>
<div class="btn-wrapper margin-top-20 wow fadeInDown">
Read More
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- block feature area end -->
<!-- block feature area start -->
<div class="block-feature-area padding-120">
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="block-feature-item">
<div class="row reorder-xs">
<div class="col-lg-6">
<div class="content-block-area padding-right-50">
<h4 class="title wow fadeInUp">Track student usage of your apps</h4>
<p>Using enabler helps you track student engagement on the apps created by you. This is a first of its kind platform that helps teachers track how their students are learning</p>
<div class="btn-wrapper margin-top-20">
Read More
</div>
</div>
</div>
<div class="col-lg-6">
<div class="img-wrapper box-shadow-90 wow fadeInDown">
<img src="/static/asset/img/softawe-2.jpg" alt="software image">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- block feature area end -->
<div class="back-to-top base-color-2">
<i class="fas fa-rocket"></i>
</div>
<script src="/static/asset/js/jquery.js"></script>
<script src="/static/asset/js/popper.min.js"></script>
<script src="/static/asset/js/bootstrap.min.js"></script>
<script src="/static/asset/js/slick.min.js"></script>
<script src="/static/asset/js/jquery.magnific-popup.js"></script>
<script src="/static/asset/js/wow.min.js"></script>
<script src="/static/asset/js/TweenMax.js"></script>
<script src="/static/asset/js/mousemoveparallax.js"></script>
<script src="/static/asset/js/contact.js"></script>
<script src="/static/asset/js/main.js"></script>
{% endblock content %}
</body>
</html>
However, Even though I extend my index.html with base.html, it doesn't show the login/logout button correctly.
Even when the user is logged-in it always shows the login button instead of logout button. Whereas, if I include the above snippet within my index.html it works correctly. What am i missing?
I don't want to have redundant code in all my htmls.
I am new at django and I have an app in django project. My base.html has navigation bar through which you can redirect to "about", 'contact us', 'home'.
The first page when app starts (after loging in) is home.
<!DOCTYPE html>
<html lang="en">
<head>
{%load staticfiles%}
<meta charset="utf-8">
<title>Ekyam: India's First Entrepreneurial Ecosystem</title>
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<meta content="" name="keywords">
<meta content="" name="description">
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css?family=Roboto:400,100,300,500,700,900" rel="stylesheet">
<!-- Bootstrap CSS File -->
<link href="{% static "visit/lib/bootstrap/css/bootstrap.min.css" %}" rel="stylesheet">
<!-- Libraries CSS Files -->
<link href="{% static "visit/lib/font-awesome/css/font-awesome.min.css"%}" rel="stylesheet">
<link href="{% static "visit/lib/owlcarousel/owl.carousel.min.css" %}" rel="stylesheet">
<link href="{% static "visit/lib/owlcarousel/owl.theme.min.css"%}" rel="stylesheet">
<link href="{% static "visit/lib/owlcarousel/owl.transitions.min.css" %}" rel="stylesheet">
<!-- Main Stylesheet File -->
<link href="{%static "visit/css/style.css"%}" rel="stylesheet">
<!--Your custom colour override - predefined colours are: colour-blue.css, colour-green.css, colour-lavander.css, orange is default-->
<link href="#" id="colour-blue" rel="stylesheet">
</head>
<body class="page-index has-hero">
<!--Change the background class to alter background image, options are: benches, boots, buildings, city, metro -->
<div id="background-wrapper" class="city" data-stellar-background-ratio="0.1">
<!-- ======== #Region: #navigation ======== -->
<div id="navigation" class="wrapper">
<!--Hidden Header Region-->
<div class="header-hidden collapse">
<div class="header-hidden-inner container">
<div class="row">
<div class="col-md-3">
<h3>
About Us
</h3>
<p>Ekyam is dedicated to support and nourish Startups and accelaration</p>
<i class="fa fa-plus"></i> Learn more
</div>
<div class="col-md-3">
<!--#todo: replace with company contact details-->
<h3>
Contact Us
</h3>
<address>
<strong>EKYAM</strong>
<abbr title="Address"><i class="fa fa-pushpin"></i></abbr>
MMMDU, Mullana, Ambala- Haryana
<br>
<abbr title="Phone"><i class="fa fa-phone"></i></abbr>
8219984448
<br>
<abbr title="Email"><i class="fa fa-envelope-alt"></i></abbr>
info#ekyam.com
</address>
</div>
<div class="col-md-6">
<!--Colour & Background Switch for demo - #todo: remove in production-->
<h3>
Theme Variations
</h3>
<div class="switcher">
<div class="cols">
Backgrounds:
<br>
Benches Boots Buildings
City Metro
</div>
<div class="cols">
Colours:
<br>
Orange Green Blue <a href="#lavender" class="colour lavender "
title="Lavender">Lavender</a>
</div>
</div>
<p>
<small>Selection is not persistent.</small>
</p>
</div>
</div>
</div>
</div>
<!--Header & navbar-branding region-->
<div class="header">
<div class="header-inner container">
<div class="row">
<div class="col-md-8">
<!--navbar-branding/logo - hidden image tag & site name so things like Facebook to pick up, actual logo set via CSS for flexibility -->
<a class="navbar-brand" title="Home" href = "{% url "visit:index"%}">
<h1 class="hidden">
<h1>EKYAM</h1>
</h1>
</a>
<br/>
<div class="navbar-slogan">
Hub Of StartUp
<br> By The Brogrammers
</div>
</div>
<!--header rightside-->
<div class="col-md-4">
<!--user menu-->
<ul class="list-inline user-menu pull-right">
</ul>
<ul class="list-inline user-menu pull-right">
<li class="user-register"><i class="fa fa-edit text-primary "></i> Register</li>
<li class="user-login"><i class="fa fa-sign-in text-primary"></i> Login</li>
</ul>
</div>
</div>
</div>
</div>
<div class="container">
<div class="navbar navbar-default">
<!--mobile collapse menu button-->
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse" aria-expanded="false"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button>
<!--everything within this div is collapsed on mobile-->
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav" id="main-menu">
<li class="icon-link">
<i class="fa fa-home"></i>
</li>
<li class="dropdown">
Comunity<b class="caret"></b>
<!-- Dropdown Menu -->
<ul class="dropdown-menu">
<li class="dropdown-header"> </li>
<li>Services</li>
<li>About Us</li>
<li>Login</li>
<li>Sign-Up</li>
<li class="dropdown-footer">Connect</li>
</ul>
</li>
<li>Join Us</li>
<li class="dropdown dropdown-mm">
Mega Menu<b class="caret"></b>
<!-- Dropdown Menu -->
<ul class="dropdown-menu dropdown-menu-mm dropdown-menu-persist">
<li class="row">
<ul class="col-md-6">
<li class="dropdown-header">Websites and Apps</li>
<li>Analysis and Planning</li>
<li>User Experience / Information Architecture</li>
<li>User Interface Design / UI Design</li>
<li>Code & Development / Implementation & Support</li>
</ul>
<ul class="col-md-6">
<li class="dropdown-header">Enterprise solutions</li>
<li>Business Analysis</li>
<li>Custom UX Consulting</li>
<li>Quality Assurance</li>
</ul>
</li>
<li class="dropdown-footer">
<div class="row">
<div class="col-md-7">Like the lite version? <strong>Get the extended version of Flexor.</strong></div>
<div class="col-md-5">
<i class="fa fa-cloud-download"></i> Get It Now
</div>
</div>
</li>
</ul>
</li>
</ul>
</div>
<!--/.navbar-collapse -->
</div>
</div>
</div>
<div class="hero" id="highlighted">
<div class="inner">
<!--Slideshow-->
<div id="highlighted-slider" class="container">
<div class="item-slider" data-toggle="owlcarousel" data-owlcarousel-settings='{"singleItem":true, "navigation":true, "transitionStyle":"fadeUp"}'>
<!--Slideshow content-->
<!--Slide 1-->
{%block content%}
{%endblock%}
</div>
<div class="col-md-6 hidden-xs">
<img src="img/slides/slide2.png" alt="Slide 2" class="center-block img-responsive">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<footer id="footer" class="block block-bg-grey-dark" data-block-bg-img="img/bg_footer-map.png" data-stellar-background-ratio="0.4">
<div class="container">
<div class="row" id="contact">
<div class="col-md-3">
<address>
<strong>JunityMe Inc</strong>
<br>
<i class="fa fa-map-pin fa-fw text-primary"></i> Maharishi Markendeshver Engineering College
<br>
<i class="fa fa-phone fa-fw text-primary"></i> 8219984448
<br>
<i class="fa fa-envelope-o fa-fw text-primary"></i> info#junity.com
<br>
</address>
</div>
Top
</div>
</footer>
The problem is, only this template is getting rendered. When I click on the other options on the navigation bar, the url changer(/incubator/) but the template remains the same.
urls.py:
from django.conf.urls import url
from . import views
app_name = 'main'
urlpatterns = [
url(r'^', views.home, name='home'),
url(r'incubators/', views.incubators, name='incubators'),
url(r'about/', views.about, name='about'),
]
I don't see any kinds of error. Somehow I think my urls are unable to connect to views.py.
views.py:
from django.shortcuts import render
from django.http import HttpResponse
def home(request):
return render(request, 'main/home.html')
def incubators(request):
return render(request, 'main/incubators.html')
def about(request):
return HttpResponse("dsfsddsf")
Please suggest edits if I can make it as simple as possible.
The problem is
url(r'^', views.home, name='home'),
The ^ sign means start of url so that matches all urls that have a start, i.e every url. So any URL will be rendered by views.home.
move that one to the bottom of the list, Then it will only match anything when all the other URLs have tried and it will do what you want.
If you really want to match only / then add
url(r'^$', views.home, name='home'),
$ means the end of an url, so that matches where there is nothing at all between the start and the end, i.e a empty url path
It seems I'm missing something obvious here
I expected the home blog contact entries to be stacked on top of one another at all times.
What am I missing?
This is what's actually rendering:
<body class="body" style="background-color:#f6f6f6">
<div class="container-fluid" style="min-height:95%; ">
<hr>
<div class="row">
<div class="col-sm-2">
<br>
<br>
<!-- Great, til you resize. -->
<!--<div class="well bs-sidebar affix" id="sidebar" style="background-color:#fff">-->
<div class="well bs-sidebar" id="sidebar" style="background-color:#fff">
<ul class="nav nav-pills nav-stacked">
<li role="presentation" class="active"><a href='/'>Home</a></li>
<li role="presentation"><a href='/blog/'>Blog</a></li>
<li role="presentation"><a href='/contact/'>Contact</a></li>
</ul>
</div> <!--well bs-sidebar affix-->
</div> <!--col-sm-2-->
<div class="col-sm-10">
<div class='container-fluid'>
<br><br>
{% block content %}
{% endblock %}
</div>
</div>
</div>
</div>
<footer>
<div class="container-fluid" style='margin-left:15px'>
<p>Contact | LinkedIn | Twitter | Google+</p>
</div>
</footer>
</body>
There's no well class in Bootstrap 4. The card class can be used instead.
Here's a code snippet that does pretty much what you'd expect:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="container-fluid" style="min-height:90vh; ">
<hr>
<div class="row">
<div class="col-sm-3 col-md-2">
<br>
<br>
<!-- There's no "well" class in Bootstrap 4. The "card" class can be used instead. -->
<div class="card bs-sidebar" id="sidebar" style="background-color:#fff">
<nav class="nav nav-pills flex-column flex-sm-row2">
<a class="flex-sm-fill text-sm-center nav-link active" href="#">Home</a>
<a class="flex-sm-fill text-sm-center nav-link" href="#">Blog</a>
<a class="flex-sm-fill text-sm-center nav-link" href="#">Contact</a>
</nav>
</div> <!--bs-sidebar-->
</div> <!--col-sm-3 col-md-2-->
<div class="col-sm-9 col-md-10 ">
<div class='container-fluid'>
<div class="row">
<div class="col">
<br><br>
{% block content %}
{% endblock %}
</div>
</div>
</div>
</div>
</div>
</div>
<footer>
<div class="container-fluid">
<div class="row">
<div class="col">
<p>Contact | LinkedIn | Twitter | Google+</p>
</div>
</div>
</div>
</footer>
Reference:
https://getbootstrap.com/docs/4.0/migration/#panels-thumbnails-and-wells
https://getbootstrap.com/docs/4.0/components/navs/#working-with-flex-utilities
My navbar is supposed to collapse to a select-list when the screen is resized below threshold. It works for my home page, but not for the others, i.e. on other pages besides home page, when the screen is resized until the sites collapsed, the navbar disappears completely (the select-list element that's supposed to be there is not there). I have a submenu below my navbar, and it collapses just fine. I wonder what's the problem? Could it be scripts conflict (but collapse is bootstrap css right)?
My navbar is of class navbar, with a logo of tag at the left and for the link buttons.
I use jQuery and django alongside bootstrap.
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html"; charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<!--
<link rel="stylesheet" type="text/css" href="/static/global.css">
-->
<link rel="stylesheet" type="text/css" href="/static/smoothness/jquery-ui-1.10.0.custom.min.css">
<link rel="stylesheet" type="text/css" href="/static/bootstrap/css/bootstrap.min.css">
<!--[if ie]><meta content='IE=8' http-equiv='X-UA-Compatible'/><![endif]-->
<link href="/static/bootstrap/css/bootstrap-responsive.css" rel="stylesheet" type="text/css">
<!--link href="/static/bootstrap/css/bootstrap-responsive.min.css" rel="stylesheet" type="text/css"-->
<link href="/static/bootstrap/css/paralax.css" rel="stylesheet" type="text/css">
<link href="/static/bootstrap/css/main.css" rel="stylesheet" type="text/css">
<!--[if lt IE 9]>
<link href="css/ie.css" rel="stylesheet"/>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<script src="js/css3-mediaqueries.js"></script>
<![endif]-->
<script src="/static/bootstrap/js/modernizr.custom.js"></script>
<script src="/static/js/jquery-1.9.0.js"></script>
<script src="/static/js/jquery-ui-1.10.0.custom.min.js"></script>
<script src="/static/bootstrap/js/jquery.scrolltotop.js"></script>
<script src="/static/bootstrap/js/jquery-1.7.2.min.js"></script>
<script src="/static/highcharts-3/js/highcharts.js"></script>
<script src="/static/bootstrap/js/bootstrap.min.js"></script>
<script src="/static/bootstrap/js/superfish.js"></script>
<title>CoAssets Platform (BETA)</title>
</head>
<body>
<!--div class="container-fluid"-->
<div class="row-fluid">
<div class="span12" id="topmenu">
{% block topmenu %}{% endblock %}
</div>
</div>
<div class="row-fluid" style="background-color:#ffad37">
<div class="span12" id="submenu" style="padding-top:2px; padding bottom:2px">
<ul class="nav nav-pills">
{% block submenu %}{% endblock %}
<li class="pull-right"><a class="btn" href="/account/logout" style="font-size: 16px; font-family: 'PT Sans', sans-serif; text-align: center;">Logout</a>
<li class="pull-right">Account</li>
</ul>
</div>
</div>
<!--/div-->
<!--div class="container-fluid"-->
<div class="row-fluid">
<div class="span12" id="main">
{% block main_body %}{% endblock %}
</div>
</div>
<!--/div-->
</br>
<div class="container-fluid" id="copyright">
<div class="row-fluid">
<div class="span4">
<p>Legalise</p>
<p>Contact Us</p>
</div>
<div class="span4">
<p>Partners</p>
<p>FAQ</p>
<p>Definitions</p>
</div>
<div class="span4">
<p>Admin</p>
</div>
</div>
<div class="row-fluid" id="copyright">
<div class="span12" id="footer">
<p>Copyright of CoAssets.com © 2013</p>
</div>
</div>
</div>
<script>
//script conflicts with some other jQuery scripts, so need to handle this script
jQuery.noConflict();
$(document).ready(function($){
$('.nav li').each(function() {
var currentPath = window.location.pathname;
var thisPath = $(this).children().attr('href');
//alert("sub menu currentPath= "+currentPath+" thisPath= "+thisPath);
$(this).removeClass('active');
if (thisPath == currentPath && !$(this).hasClass('active')) {
$(this).addClass('active');
};
});
$('#menu li').each(function() {
var currentPath = window.location.pathname;
var thisPath = $(this).children().attr('href');
var len = thisPath.length;
//alert("top menu currentPath= "+currentPath+" thisPath= "+thisPath);
$(this).removeClass('active');
if (thisPath != '/' && thisPath == currentPath.substring(0,len)
&& !$(this).hasClass('active')) {
$(this).addClass('active');
} else if (thisPath=='/' && currentPath == '/')
{
$(this).addClass('active');
};
});
});
</script>
</body>
</html>
{% extends "base.html" %}
{% block topbar %}
{% endblock %}
{% block topmenu %}
<section class="navbar">
<div class="navbar-inner main-menu">
<div class="row-fluid">
<div class="span2">
<img src="/public_media/index_01 edited4.png" alt="">
</div>
<div class="span10">
<nav id="menu" class="pull-right" >
<ul>
<li class="active">Home<br/><span>CoAssets</span></li>
<li>News</li>
<li>Portfolio</li>
<li>Opportunities</li>
<li>New Opportunities</li>
<li>Transaction</li>
<li>Research</li>
<!--li>Account</li-->
<!--li>Admin</li-->
</ul>
</nav>
</div>
</div>
</div>
</section>
{%comment%}
<div class="label label-warning offset2">
<p>CoAssets Beta</p>
</div>
{%endcomment%}
{% endblock %}
Using bootstrap 3.0, navbar-inner is no longer a class, and in my case, when experiencing this issue, removing that class resulted in the correct behavior.
<nav class="navbar" role="navigation">
<div class="container">
<div class="navbar navbar-inverse ">
<!-- Brand and toggle get grouped for better mobile display -->
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#collapsing-nav">
<span class="sr-only"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="collapse navbar-collapse" id="collapsing-nav">
<ul class="nav navbar-nav">
<!-- dropdown items go here -->
</ul>
</div>
</div><!--/.navbar -->
</div><!-- /.container -->
</nav>
alternatively, you could add the following into your style declarations to self-support this
.navbar-inner {
min-height: 50px;
}
The issue is cause by a combination of things:
no text in navbar when in collapsed mode (most common is navbar-brand item)
this leaves on floated elements in the layout
removal of navbar-inner class from the bootstrap library
the dev team fixed this here, however there are a lot of example pieces of code out there where users who needed to use a nav inside of a .container, and recommended using .navbar-inner... which no longer exists.
The use of that non-existent class throws off your css because bootstrap compiles the css from less, and that property is assigned to the .navbar property, but not .navbar-inner, so basically the min-height property does not wind up being assigned assigned to your navbar, and you're left with no height on the nav, no text to give the element a calculated height, and only floating elements that are outside of the flow and don't get calculated in height computations.
I had a similar problem , but just I added "position:fixed " for container and it works. Try , maybe it works for you.