How do I make the the first nav pill in my nav active?
I've tried adding class="active", but that just makes all nav pills active.
<div class="container-fluid bg-dark">
<div class="container text-center menu-meals">
<ul class="nav nav-pills center-pills">
{% for menu in menus %}
{% if menu.mealtype %}
<li role="presentation">{{ menu.mealtype }}</li>
{% endif %}
{% endfor %}
</ul>
</div>
</div>
Got it working by adding id="menu-meals" to my and then added a script.
<script>
$(function () {
$('#menu-meals li:eq(0) a').tab('show');
});
</script>
Related
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;
}
There is no actual link to my rss feed from the nav, but it adds a css borderon top of another border in my menu, which looks ugly. So how do I remove the feed from my nav?
The jekyll-feed gem outputs an li for the feed
Nav Menu
<nav id="menu">
<ul class="links">
{% for page in site.pages %}
{% if page.layout == "home" %}
<li>{{ page.title }}</li>
{% endif %}
{% endfor %}
{% for page in site.pages %}
{% if page.layout != "home" %}
<li>{{ page.title }}</li>
{% endif %}
{% endfor %}
<div class="content">
<ul class="actions">
<li>Contact</li>
</ul>
</div>
</ul>
<ul class="actions vertical">
<li>Subscribe to Newsletter
</li>
</ul>
</nav>
Nav HTML
<nav id="menu">
<ul class="links">
<li>Home</li>
<li>about</li>
<li>archive</li>
<li>
</li>
<li>
</li>
<div class="content">
<ul class="actions">
<li>Contact</li>
</ul>
</div>
</ul>
<ul class="actions vertical">
<li>Subscribe to Newsletter
</li>
</ul>
</nav>
I think the following code should work for you:
<nav id="menu">
<ul class="links">
<li>Home</li>
{% for page in site.pages %}
{% if page.layout == "home" or page.url contains ".xml" %}
{% else %}
<li>{{ page.title }}</li>
{% endif %}
{% endfor %}
<div class="content">
<ul class="actions">
<li>Contact</li>
</ul>
</div>
</ul>
<ul class="actions vertical">
<li>Subscribe to Newsletter
</li>
</ul>
</nav>
Note that I removed the extra loop over the pages to make the build quicker. I also think the absolute_url statement is not needed. Are you sure you want to open a div inside an ul?
I'm trying to get bootstrap 4 dev tabs working with a for loop in jinja2.
Here's the test code I'm trying:
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
{% for e in range(1,3) %}
<li class="nav-item">
<a class="nav-link {% if loop.index == 1 %}active{% endif %}" href="#{{ e }}" role="tab"
data-toggle="tab">{{ e }}</a>
</li>
{% endfor %}
</ul>
<!-- Tab panes -->
<div class="tab-content">
{% for e in range(1,3) %}
<div role="tabpanel" class="tab-pane fade {% if loop.index == 1 %}in active{% endif %}"
id="{{ e }}">{{ e }}</div>
{% endfor %}
</div>
The nav tabs function as expected, two tabs are visible, "1" and "2", and the active class is correctly applied.
However the content tabs do not change when clicking between nav tabs. The content tab is static on "1".
Changing the loop.index condition to loop.index == 2 means the tab content is static on "2".
What am I missing here?
Thanks.
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
{% for club in clubs %}
<li class="nav-item">
<a class="nav-link {% if loop.index == 1 %}active{% endif %}" href="#{{ club }}" role="tab"
data-toggle="tab">{{ club }}</a>
</li>
{% endfor %}
<!-- Tab panes -->
<div class="tab-content">
{% for club in clubs %}
<div role="tabpanel" class="tab-pane fade {% if loop.index == 1 %}in active{% endif %}"
id="{{ clubs }}">{{ clubs }}</div>
{% endfor %}
Changing the for loop from a range to the actual NDB datastore query worked.
I have a list of locations that I populate from a database. I then use flask and bootstrap to show a nav-tabs for each iteration in the list.
I dynamically create a nav-tab for each location in the list when I iterate through it. Which then has dynamic data specific to that tab
I have been able to get the locations as the nav-tab names. I do not see the content for each tab.
Q: What am I doing wrong that causes the content for each tab to not show?
__init.py__
engine = create_engine('mysql://user:passwd#ip_add/db')
insp = reflection.Inspector.from_engine(engine)
locations = []
for i in insp.get_table_names():
locations.append(str(i))
#app.route('/dashboard/')
#login_required
def dashboard():
return render_template("dashboard.html", TOPIC_DICT = TOPIC_DICT, locations=locations)
dashboard.html
{% extends "header.html" %}
{% block body %}
<div>
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
{% for loc in locations %}
<li role="presentation">{{ loc }}</li>
{% endfor %}
</ul>
<!-- Tab panes -->
<div class="tab-content">
{% for loc in locations %}
<div role="tabpanel" class="tab-pane fade" id="{{ loc }}">stuff for {{ loc }}</div>
{% endfor %}
</div>
</div>
{% endblock %}
browser view screenshot
browser page source
When I look at the page source I can see the content 'stuff for PRETORIA', but doesnt show on the page.
<div>
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
<li role="presentation">GTSP</li>
<li role="presentation">PRETORIA</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div role="tabpanel" class="tab-pane fade" id="GTSP">stuff for GTSP</div>
<div role="tabpanel" class="tab-pane fade" id="PRETORIA">stuff for PRETORIA</div>
</div>
</div>
The error is that your a hrefs in your nav tabs are linked to incorrect ids: each should be linked to the id of the corresponding tab content.
<li role="presentation">GTSP</li>
<li role="presentation">PRETORIA</li>
So you should have in your jinja2 template the href set up like so:
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
{% for loc in locations %}
<li role="presentation">{{ loc }}</li>
{% endfor %}
</ul>
See how is set up the href attribute:
href="#{{ loc }}"
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