I am struggling to adjust the height of the navbar for mobile devices on the Shopify platform. I am using Bootstrap v2.1.0 if it makes a difference. Here is the HTML for the navbar:
<div class="navbar{% if settings.inverse_color %} navbar-inverse{% endif %} navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<!-- COLLAPSE BUTTON -->
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<div class="nav-collapse collapse">
<!-- LOGO IN NAV BAR -->
{% if settings.logo_position == 'header' %}
{% if settings.use_logo_image %}
<a class="logo logo-header-image fl hidden-tablet hidden-phone" href="/" title="{{ shop.name }}">
<img src="{{ 'header_logo.png' | asset_url }}" alt="{{ shop.name }} Logo">
</a>
{% else %}
{{ shop.name }}
{% endif %}
{% endif %}
<!-- MAIN NAVIGATION -->
<ul class="nav">
{% for link in linklists.main-menu.links %}
{% capture child_list_handle %}{{ link.title | handle }}{% endcapture %}
{% if linklists[child_list_handle] and linklists[child_list_handle].links.size > 0 %}
<li class="dropdown{% if link.active %} active{% endif %}" id="menu{{ forloop.index }}" >
<a class="dropdown-toggle" data-toggle="dropdown" href="#menu{{ forloop.index }}" title="View {{ link.title }}">
{{ link.title }}
<b class="caret"></b>
</a>
I've tried the solutions here
Decreasing height of bootstrap 3.0 navbar & Custom height Bootstrap's navbar but have been unsuccessful.
This is what I've tried adding to my CSS under mobile:
.navbar-nav > li > a { padding-top: 5px !important; padding-bottom: 5px !important; }
.navbar .brand { padding-top: 5px !important; padding-bottom: 5px !important; }
.navbar-inverse, .navbar-fixed-top, .navbar, .navbar-inner { min-height: 35px !important; }
Thank you in advance!
Remember bootstrap is mobile - first and you have to reference for anything above that. So simply adding .navbar {height: /* your height!important; */ should do the trick. You may need to add #media (min-width :768px) to change it back to original but that is at most.
Related
I'm working on a project and during it I had to use :root to set the font size. However I also need to override it in the next section and I can't seem to do it.
I used the root from the online template here.
However in the main section I failed to reset the html font size to 16px. This is my code:
layout.html:
{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
<title>{% block title %}{% endblock %}</title>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<link href="{% static 'cs50gram/styles.css' %}" rel="stylesheet">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css">
{% block style %}{% endblock %}
{% block script %}{% endblock %}
</head>
<body>
<!-- Navbar -->
<nav class="navbar navbar-expand-lg navbar-light" id="nav-background">
<a class="navbar-brand" id="nav-brand" href="{% url 'index' %}">CS50gram</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
{% if user.is_authenticated %}
<div class="navbar-nav">
<a class="nav-item nav-link" href="{% url 'index' %}">Home </a>
<a class="nav-item nav-link" href="{% url 'explore' %}">Explore</a>
<a class="nav-item nav-link" href="{% url 'profile' request.user %}">Profile</a>
<a class="nav-item nav-link" href="{% url 'add-post' %}">Add Post</a>
</div>
<div class="navbar-nav ml-auto">
<a class="nav-item nav-link" href="{% url 'logout' %}">Logout</a>
</div>
{% else %}
<div class="navbar-nav ml-auto">
<a class="nav-item nav-link" href="{% url 'login' %}">Login</a>
<a class="nav-item nav-link" href="{% url 'register' %}">Register</a>
</div>
{% endif %}
</div>
</nav>
<div id="body">
{% block body %}
{% endblock %}
</div>
<!-- Bootstrap 4 CDN -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
</body>
</html>
The main page where I want to reset the font-size in <main>:
{% extends 'cs50gram/layout.html' %}
{% load static %}
{% block title %}
Profile
{% endblock %}
{% block body %}
<header>
<div class="container">
<div class="profile">
<div class="profile-image">
<img src="https://pbs.twimg.com/profile_images/1313117763519606784/IkM0WYGt_400x400.jpg" alt="Profile Picture" width="150px">
</div>
<div class="profile-user-settings">
<h1 class="profile-user-name">{{ profile.user.username }}</h1>
{% if user.is_authenticated and request.user.username == profile.user.username %}
<button class="btn profile-edit-btn">Edit Profile</button>
{% elif user.is_authenticated and request.user.username != profile.user %}
<button class="btn profile-edit-btn">Follow</button>
{% endif %}
<!-- button class="btn profile-settings-btn" aria-label="profile settings"><i class="fas fa-cog" aria-hidden="true"></i></button -->
</div>
<div class="profile-stats">
<ul>
<li><span class="profile-stat-count">{{ profile.user.posts.count }}</span> posts</li>
<li><span class="profile-stat-count">188</span> followers</li>
<li><span class="profile-stat-count">{{ profile.followings.count }}</span> following</li>
</ul>
</div>
<div class="profile-bio">
<hr>
<h2 class="profile-real-name">{{ profile.user.first_name }} {{ profile.user.last_name }}</h2>
<hr>
<p> <b> Date Joined:</b> {{ profile.user.date_joined|date:"D d M Y" }}
{% if profile.birthdate %}
<span style="margin-left: 10px"> <b> BirthDate: </b> {{ profile.birthdate }}</span></p>
{% endif %}
{% if profile.gender %}
<p> <b> Gender: </b> {{ profile.gender }}</p>
{% endif %}
<hr>
{% if profile.bio %}
<p> {{ profile.bio }}</p>
{% endif %}
</div>
</div>
<!-- End of profile section -->
</div>
<!-- End of container -->
</header>
<main> <!-- Here I want to restore font-size to 16px -->
<div class="container">
{% for post in profile.user.posts.all %}
<div class="row justify-content-center mt-3">
<div class="col-md-6" style="background-color: #f4f6f6">
<!-- Username -->
<h5 class="mt-2"> #{{ post.posted_by }} </h5>
<!-- Post image -->
<img src="{{ post.image.url }}" class="img-fluid" width="550px">
<!-- Like Icon and Counter -->
<img data-id="{{post.id}}" id="post-like-{{post.id}}" class="liked"
{% if request.user in post.like.all %}
data-is_liked="yes"
src="https://img.icons8.com/ios-filled/32/fa314a/hearts.png"
{% else %}
data-is_liked="no"
src="https://img.icons8.com/windows/32/000000/like--v2.png"
{% endif %}
/> <span id="like-counter-{{post.id}}"> {{ post.like.count }} </span>
<!-- Comment icon and counter -->
<span class="comment-pointer" data-id="{{post.id}}" id="view-comments" data-toggle="modal" data-target="#exampleModalCenter">
<img src="https://img.icons8.com/windows/32/000000/speech-bubble--v1.png" class="comment-icon" /> <span id="comment-counter-{{post.id}}"> {{ post.comments.all.count }} </span>
</span>
<!-- Caption -->
{% if post.caption %}
<h5 class="mt-2"><strong>{{ post.posted_by }}</strong> {{ post.caption }}</h5>
{% endif %}
<!-- Date Posted -->
<h6 class="gray">Posted on {{ post.date_posted }}</h6>
<!-- Add Comment -->
<div class="input-group mb-3">
<input type="text" placeholder="Add Comment" id="post-comment-{{post.id}}" class="form-control mr-1">
<button class="btn btn-outline-dark comment" data-id="{{post.id}}" type="button">Add Comment</button>
</div>
<!-- Show comments -->
{% if post.comments.all %}
<!-- Gets the comments of each post based on the related_name -->
{% for comment in post.comments.all.reverse|slice:":2" %}
<div>
<b> {{ comment.commented_by }} </b>
<span class="gray"> {{ comment.comment }} </span>
</div>
{% endfor %}
<!-- Div to show recently added comment -->
<div id="recent_comment"></div>
<div class="text-center mb-2 view-all">
<a data-toggle="modal" data-id="{{post.id}}" id="view-comments" data-target="#exampleModalCenter">View all comments...</a>
</div>
{% endif %}
</div>
</div>
{% endfor %}
</main>
{% endblock %}
{% block style %}
<link href="{% static 'cs50gram/profile.css' %}" rel="stylesheet">
{% endblock %}
Please note that the profile.css is taken from the link provided above.
I have the following navbar, which works pretty well with my screen (1300 pixels wide by 700 high):
When the viewport is smaller, the elements in the navbar go crazy:
I've found that switching between any of the typical bootstrap classes just cause more problems with alignment and sizing.
I tried to use this media query in my CSS but it did nothing at all:
#media only screen and (max-width: 700px) {
.navbar .app-badge {
display: block !important;
}
}
I've tried a bunch of ways to adjust the bootstrap classes or use a media query. Nothing works. I need help figuring out how to make the navbar collapse on smaller viewports.
Here's my HTML:
<nav class="navbar navbar-expand-sm navbar-spur
{% if not current_user.admin %}navbar-spur-user {% else %} navbar-spur-admin {% endif %}">
<div class="border rounded border-1 border-white pt-1 pl-1 even-height ml-n1 app-badge">
<a class="navbar-nav mr-auto text-center p-1" href="https://www.spur.community/holiday-cheer-drive">
<div class="text-center ml-n1 mt-n1">
<div class="stacked">
<img src="/static/logos/logo-spur-main.png">
</div>
<div class="stacked">
<span class="text-spur-ribbon m-1"><small><b>SPUR</b></small></span>
</div>
</div>
</a>
</div>
<div class="border rounded border-1 border-white pt-1 pl-1 ml-3 even-height app-badge">
<a class="navbar-brand p-0" href="/" title="Home">
<div class="parallel">
<img src="/static/logos/logo-spur-white.png">
</div>
<div class="parallel">
<span class="text-spur-red">
<h1>
<em>
<b>SPUR</b>
</em>
</h1>
</span>
</div>
<div class="ml-1 parallel">
<div class="mt-n2 stacked">
<small><span class="text-spur-green"><em>Holiday</em></span></small>
</div>
<div class="mt-n3 stacked">
<small><span class="text-spur-green"><em>Cheer</em></span></small>
</div>
<div class="mt-n3 stacked">
<small><span class="text-spur-green"><em>Drive</em></span></small>
</div>
</div>
{% if current_user.admin %}
<div class="mt-2 parallel">
<span class="text-spur-ribbon mt-2 ml-2"><em>Admin</em></span>
</div>
{% endif %}
</a>
</div>
<ul class="navbar-nav mr-auto mt-2 mt-lg-0">
<div class="navbar-nav border rounded border-1 border-white ml-3 pt-2 pb-2 even-height app-badge">
{% for url, route, label in nav_main %}
<li class="nav-item">
<a class="nav-link {{ 'active' if active_page==route }}" href="{{ url }}">{{ label }}</a>
</li>
{% endfor %}
</div>
{% if current_user.admin %}
<div class="navbar-nav border rounded border-1 border-white ml-3 pt-2 pb-2 even-height app-badge">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle {{ 'active' if active_page in admin_labels }}" data-toggle="dropdown"
href="" id="adminDropdown" aria-haspopup="true" aria-expanded="false">Admin</a>
<ul class="dropdown-menu" aria-labelledby="adminDropdown">
{% for url, route, label in nav_admin_dropdown_top %}
<li>{{ label }}</li>
{% endfor %}
<div class="dropdown-divider"></div>
{% for url, route, label in nav_admin_dropdown_bottom %}
<li>{{ label }}</li>
{% endfor %}
</ul>
</li>
</div>
{% endif %}
{% if current_user.is_authenticated and nav_logged_in %}
<div class="navbar-nav border rounded border-1 border-white ml-3 pt-2 pb-2 even-height app-badge">
{% for url, route, label in nav_logged_in %}
<li class="nav-item">
<a class="nav-link {{ 'active' if active_page==route }}" href="{{ url }}">{{ label }}</a>
</li>
{% endfor %}
</div>
{% endif %}
</ul>
<ul class="navbar-nav m1-auto">
{% if current_user.is_anonymous %}
<!-- e.g., if NOT current_user.is_authenticated -->
<div class="navbar-nav border rounded border-1 border-white ml-3 pt-2 pb-2 even-height app-badge">
{% for url, route, label in nav_anon %}
<li class="nav-item">
<a class="nav-link {{ 'active' if active_page==route }}" href="{{ url }}">{{ label }}</a>
</li>
{% endfor %}
</div>
{% elif current_user.is_authenticated %}
{% if nav_right %}
<div class="navbar-nav border rounded border-1 border-white ml-3 pt-2 pb-2 even-height app-badge">
{% for url, route, label in nav_right %}
<li class="nav-item">
<a class="nav-link {{ 'active' if active_page==route }}" href="{{ url }}">{{ label }}</a>
</li>
{% endfor %}
</div>
{% endif %}
<div class="navbar-nav border rounded border-1 border-white ml-3 pt-2 pb-2 even-height app-badge">
<li class="nav-item">
<a class="nav-link" href="{{ url_for('user.logout') }}">Log Out</a>
</li>
</div>
{% endif %}
</ul>
</nav>
And my CSS (if you noticed the navbar-spur-admin class, it's the same as navbar-spur-user but with different colors):
/* NAVBAR */
/* NAVBAR */
/* NAVBAR */
/* BASE NAVBAR */
.navbar-spur, .navbar-spur .navbar-brand .navbar-nav {
background-image: none;
background-repeat: no-repeat;
}
.navbar-spur .navbar-brand .parallel img {
max-width: 2.5em;
}
.navbar-spur div a img {
max-width: 1.5em;
}
.navbar-spur .even-height {
height: 3.7em;
}
.navbar-spur .navbar-brand small {
font-size: 0.7em;
}
.navbar-spur a {
text-decoration: none;
}
.navbar-spur .navbar-brand .parallel, .navbar-spur .navbar-nav .parallel {
display: inline-block;
text-align: left;
vertical-align: top;
}
.navbar-spur .navbar-brand .stacked, .navbar-spur .navbar-nav .stacked {
display: block;
}
/* USER NAVBAR */
.navbar-spur-user, .navbar-spur-user .navbar-brand .navbar-nav {
background-color: #003274 !important;
}
.navbar-spur-user .app-badge {
background-color: #002658 !important;
}
.navbar-spur-user .navbar-nav .nav-item .nav-link {
color: #356275 !important;
}
.navbar-spur-user .navbar-nav .nav-item .active {
color: white !important;
}
Any advice, links to resources that would help me, or feedback would be greatly appreciated. Thank you!
Peter, I believe your problem has to do with the width of your logo under the class "navbar-brand". I had a similar issue, but fixed it by controlling the width of my logo under the Navbar-brand. According to bootstrap, "Adding images to the .navbar-brand will likely always require custom styles or utilities to properly size." Below is bootstraps example:
<!-- Just an image -->
<nav class="navbar navbar-light bg-light">
<a class="navbar-brand" href="#">
<img src="/docs/4.4/assets/brand/bootstrap-solid.svg" width="30" height="30" alt="">
</a>
</nav>
Notice the width and height settings after the image. In my case I was able to change the width of my logo image in CSS within my media query for small screen sizes.
I'm creating a menu with three levels for my store in opencart 3.0, the whole programming part I've already done, with your help here. Now, I'm having trouble adjusting CSS, as I need the menus displayed to cascade, but the opencart menu default does not cascade, it's opening all at once, as in the example below.
I need to leave something like this.
The code in my menu.twig looks like this:
{% if categories %}
<div class="container">
<nav id="menu" class="navbar">
<div class="navbar-header"><span id="category" class="visible-xs">{{ text_category }}</span>
<button type="button" class="btn btn-navbar navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse"><i class="fa fa-bars"></i></button>
</div>
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav">
{% for category in categories %}
{% if category.children %}
<li class="dropdown"><a href="{{ category.href }}" class="dropdown-toggle" data-toggle="dropdown"><b>
<div style="font-size: 15px;">{{ category.name }}</div>
</b></a>
<div class="dropdown-menu">
<div class="dropdown-inner"> {% for children in category.children|batch(category.children|length / category.column|round(1, 'ceil')) %}
<ul class="list-unstyled">
{% for child in children %}
<li>{{ child.name }}
// begin changes
<ul class="dropdown-menu sub-menu dropdown-inner">
{% set children2 = child.children2 %}
{% for child2 in children2 %}
<li> <a href="{{ child2.href }}" >{{ child2.name }}</a> </li>
{% endfor %}
</ul>
// end changes
</li>
{% endfor %}
</ul>
{% endfor %} </div>
{{ text_all }} {{ category.name }} </div>
</li>
{% else %}
<li>{{ category.name }}</li>
{% endif %}
{% endfor %}
</ul>
</div>
</nav>
</div>
{% endif %}
Does Opencart 3.0 already have CSS classes for this? How to make?
In this file:
catalog/view/theme/default/stylesheet/stylesheet.css
Find:
#menu .dropdown:hover .dropdown-menu {
display: block;
}
Replace with:
#menu .dropdown:hover > .dropdown-menu {
display: block;
}
#menu ul ul ul.dropdown-inner {
left: 100%;
top: 0;
display: none;
}
#menu .nav li {
position: relative;
}
#menu ul ul li:hover ul.dropdown-inner {
display: block;
}
I'm using a desk drawer for my page when it's in phone. But for some reason when I try out the links inside the desk drawer on mobile, they won't work. I was hoping anyone could give me a hint as to what I'm doing wrong.
Because it works when I try it on the computer on Chrome while simulating a phone browser but not in my phone's browser. The page is www.bebe2go.com and the desk drawer I'm using is this one: http://git.blivesta.com/drawer/fixed-navbar-left.
Here is the code for the navigator:
<div class="row">
<div class="col-lg-12">
<div class="drawer-header">
<button type="button" class="drawer-toggle drawer-hamburger">
<span class="sr-only">toggle navigation</span>
<span class="drawer-hamburger-icon"></span>
</button>
</div>
<div class="drawer-main drawer-navbar-default">
<nav class="container drawer-nav" role="navigation">
<div class="drawer-brand hidden-md hidden-lg">Bebe2Go</div>
<ul class="drawer-menu">
{% for link in linklists.main-menu.links %}
{% assign child_list_handle = link.title | handleize %}
{% if linklists[child_list_handle].links != blank %}
<li class="drawer-menu-item dropdown drawer-dropdown-hover">
{{ link.title | escape }}<span class="caret"></span>
<ul class="drawer-submenu dropdown-menu" role="menu">
<li class="drawer-submenu-item">{{ link.title | escape }}</li>
{% for childlink in linklists[child_list_handle].links %}
<li class="drawer-submenu-item">{{ childlink.title | escape }}</li>
{% endfor %}
</ul>
</li>
{% else %}
<li class="drawer-menu-item">{{ link.title | escape }}</li>
{% endif %}
{% endfor %}
</ul>
</nav>
</div>
</div>
</div>
Here is the link for the js: https://github.com/blivesta/drawer/blob/master/src/js/jquery.drawer.js
and here the link to the css:
https://github.com/blivesta/drawer/blob/master/dist/css/drawer.css
I am trying to make a vertical menu bar on the left of the buycraft shop, however I sadly do not know the css for this, I would appreciate help. The menu bar should look something like this
This is to be used for a 'Buycraft' shop page.
My code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>{{ store.name }} | {{ page.title }}</title>
<link href="/templates/209/css/style.min.css" rel="stylesheet">
<link rel="shortcut icon" href="/templates/209/img/favicon.ico">
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-36735942-3']);
_gaq.push(['_trackPageview']);
{% if store.googleAnalytics %}
_gaq.push(['b._setAccount', '{{ store.googleAnalytics }}']);
_gaq.push(['b._trackPageview']);
{% endif %}
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
<style>{{ store.css|raw }}</style>
</head>
<body>
<div class="container">
<div class="header">
<div class="logo">
{% if store.logo %}
<img src="{{ store.logo }}" />
{% else %}
<span>{{ store.name }}</span>
{% endif %}
</div>
<div class="buttons">
<div class="toolbar">
<div class="logout">
{% if basket.username %}
{{ lang("button.logout") }}
{% endif %}
</div>
<div class="currency">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
{{ basket.currency }} <span class="fa fa-caret-down"></span>
</button>
<ul class="dropdown-menu" role="menu">
{% for currency in store.currencies %}
{% if currency.code in [store.currency, "AUD", "BRL", "CAD", "DKK", "EUR", "NOK", "NZD", "GBP", "SEK", "USD", "PLN"] %}
<li {% if basket.currency == currency.code %}class="active"{% endif %}>
{{ currency.code }}
</li>
{% endif %}
{% endfor %}
</ul>
</div>
<div class="basket">
{% if basket.packages|length > 0 %}
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
{{ lang("basket.count", basket.packages|length, basket.price|money, basket.currency) }} <span class="fa fa-caret-down"></span>
</button>
<ul class="dropdown-menu dropdown-menu-right" role="menu">
{% for package in basket.packages %}
<li class="item">
<div class="name">{{ package.name[:25] }}</div>
<div class="price">{{ package.price|money }} <small>{{ basket.currency }}</small></div>
<div class="remove"><span class="fa fa-times"</span></div>
</li>
{% endfor %}
<li class="checkout">
<div class="total"><b>{{ lang("basket.total") }}:</b> {{ basket.price|money }} <small>{{ basket.currency }}</small></div>
<div class="button">Checkout</div>
</li>
</ul>
{% else %}
<i class="icon-shopping-cart icon-white"></i> {{ lang("basket.count", 0, 0.00, basket.currency) }}
{% endif %}
</div>
</div>
</div>
</div>
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="/">{{ store.name }}</a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="{% if page.category == "index" %}active{% endif %}">{{ lang("category.home") }}</li>
{% for category in store.categories %}
{% if category.subcategories|length > 0 %}
<li class="dropdown {% if category.active %}active{% endif %}">
{{ category.name }} <i class="fa fa-caret-down"></i>
<ul class="dropdown-menu">
{% for subcategory in category.subcategories %}
<li>{{ subcategory.name }}</li>
{% endfor %}
</ul>
{% else %}
<li class="{% if category.active %}active{% endif %}">{{ category.name }}</li>
{% endif %}
{% endfor %}
{% if basket.packages|length > 0 %}
<li class="visible-xs {% if page.category == "checkout" %}active{% endif %}">Checkout</li>
{% endif %}
{% if basket.username %}
<li class="visible-xs">Logout</li>
{% endif %}
</ul>
</div>
</div>
</nav>
<div class="notification">
{% if page.message.display %}
<div class="alert alert-{{ page.message.type}} alert-dismissable">
<button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
{{ page.message.text }}
</div>
{% endif %}
</div>
{% block content %}{% endblock %}
{% if store.plan == "1" %}
<div class="advertisement">
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle" style="display:inline-block;width:728px;height:90px;" data-ad-client="ca-pub-9830135219921132" data-ad-slot="7404819681"></ins>
<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
</div>
{% endif %}
<div class="footer">
<div class="language">
<div class="dropdown dropup">
<span class="fa fa-globe"></span> Language
<ul class="dropdown-menu up">
{% for language in store.languages %}
<li>{{ language.name }}</li>
{% endfor %}
</ul>
</div>
</div>
{% if store.branding or store.plan != "3" %}
<div class="branding">
<!-- Do not remove the Buycraft branding if you are not on the Ultimate Plan. Your account will be deleted. -->
Powered by Buycraft.net
</div>
{% endif %}
</div>
</div>
<div class="modal" id="popup-modal" tabindex="-1" role="dialog"></div>
{% if page.category == "checkout" %}
<script src="https://wallet.google.com/inapp/lib/buy.js"></script>
<script src="https://js.stripe.com/v2/"></script>
{% endif %}
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="/templates/209/js/bootstrap.min.js"></script>
<script src="/templates/209/js/skin.min.js"></script>
<script src="/templates/209/js/site.js"></script>
</body>
</html>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
a:link, a:visited {
display: block;
font-weight: bold;
color: #FFFFFF;
background-color: #98bf21;
width: 120px;
text-align: center;
padding: 4px;
text-decoration: none;
text-transform: uppercase;
}
a:hover, a:active {
background-color: #7A991A;
}
</style>