Hi I'm trying to middle vertical align my site's logo with my navigation link list. I've tried adding "vertical-align: middle" to my div columns, but nothing happens. Right now my logo and my navigations look kinda weird and is just floating around. Any help on this would be great.
HTML:
<div class="sixteen columns clearfix">
<div class="five columns">
<a href="{{ shop.url }}" title="{{ shop.name }}">
{% if settings.use_logo %}
<img src="{{ 'logo.png' | asset_url }}" alt="{{ shop.name }}" />
{% else %}
{{ shop.name }}
{% endif %}
</a>
</div>
<div class="eleven columns">
<div id="mobile_nav"></div>
<div id="nav">
<ul id="menu">
{% for link in linklists[settings.main_linklist].links %}
{% if linklists[link.handle] == empty %}
<li><a href="{{ link.url }}" title="{{ link.title }}" {% if link.active %}class="active"{% endif %}>{{ link.title }}</a></li>
{% else %}
<li><a href="{{ link.url }}" title="{{ link.title }}" {% if link.active %}class="active"{% endif %} {% for link in linklists[link.handle].links %}{% if link.active %}class="active"{% endif %}{% endfor %}>{{ link.title }}
<span class="arrow">∨</span></a>
<ul>
{% for link in linklists[link.handle].links %}
{% if linklists[link.handle] == empty %}
<li>{{ link.title }}</li>
{% else %}
<li>{{ link.title }} <span class="arrow"> ></span>
<ul>
{% for link in linklists[link.handle].links %}
<li>{{ link.title }}</li>
{% endfor %}
</ul>
</li>
{% endif %}
{% endfor %}
</ul>
</li>
{% endif %}
{% endfor %}
</ul>
</div>
</div>
</div>
Column CSS:
.column, .columns {
float: left;
display: inline;
margin-left: 10px;
margin-right: 10px;
vertical-align: middle;
}
Here's how it currently looks like:
Need to move it to the middle:
Specify the parent container as position: relative or position: absolute.
Specify a fixed height on the child container.
Set position: absolute and top: 50% on the child container to move the top down to the middle of the parent.
Set margin-top: -yy where yy is half the height of the child container to offset the item up.
(http://phrogz.net/CSS/vertical-align/)
Either relatively position .columns (position: relative) or absolutely position it (position: absolute)
Give .column a height value
Absolutely position .column (position: absolute), and give it top: 50%
Give .column a top margin of the negative of half its height value (margin-top: -yy where yy is half of the height of .column)
As you have already used vertical-align: middle in class; so by just adding display: table-cell property your problem must solved.
Note: There are many ways to align content or div vertically.. using line-height (condition is only apply for first line), padding-top, table-cell and giving absolute position.
Related
So I have this js code but it's not being applied. I want the on-scroll class to be added to .logo-nav-contain, but when I scroll nothing happens. If I apply the red background to the .logo-nav-contain class it changes, so I know the style block is right. I think it may have something to do with Shopify and JS. Does anyone see a mistake here?
<script type="text/javascript">
$(function() {
$(window).on("scroll", function() {
if($(window).scrollTop() > 1) {
$(".logo-nav-contain").addClass("on-scroll");
} else {
$(".logo-nav-contain").removeClass("on-scroll");
}
});
});
</script>
<noscript><img height="1" width="1" style="display:none"
src="https://www.facebook.com/tr?id=397982167525776&ev=PageView&noscript=1"
/></noscript>
<!-- End Facebook Pixel Code -->
<style>
.on-scroll {
background-color: red !important;
}
</style>
<div data-section-id="{{ section.id }}" data-section-type="header-section" >
<div class="site-header-wrapper">
<header class="site-header {% if section.settings.minimal_padding == "minimal" %}minimal{% endif %} {% if section.settings.header_full_width %}full-width{% endif %}" data-scroll-lock="{{ section.settings.scroll_lock }}" role="banner">
<div class="wrapper" style="position: fixed; z-index: 1000; width: 100%; padding-right: 40px">
<div class="logo-nav-contain layout-{{ section.settings.header_layout }}">
{% comment %}
Use the uploaded logo from theme settings if enabled.
Site name gets precedence with H1 tag on homepage, div on other pages.
{% endcomment %}
{% comment %}
mobile menu below
{% endcomment %}
<header class="util">
<div class="wrapper">
<div class="left-wrapper">
<ul class="text-links">
<li class="mobile-menu">
<a href="#menu" class="toggle-menu menu-link">
<span class="icon-text">
<span class="icon icon-menu" aria-hidden="true">{% include 'icon-ui-menu' %}</span>
<span class="text" data-close-text="{{ 'layout.drawers.close_menu' | t }}">{{ 'layout.navigation.menu' | t }}</span>
</span>
</a>
</li>
</ul>
</div>
</div>
</header>
<div class="logo-contain">
{% if template.name == 'index' %}
<h1 class="site-logo {% if section.settings.logo %}has-image{% endif %}" itemscope itemtype="http://schema.org/Organization">
{% else %}
<div class="site-logo {% if section.settings.logo %}has-image{% endif %}" itemscope itemtype="http://schema.org/Organization">
{% endif %}
{% if section.settings.logo %}
<a href="/" itemprop="url" class="logo-image">
{%- assign image = section.settings.logo -%}
{%- assign image_default_width = section.settings.logo_max_width -%}
{%- assign image_2x_width = image_default_width | times: 2 -%}
{%- assign image_3x_width = image_default_width | times: 3 -%}
{%- assign image_default = image_default_width | append: 'x' -%}
{%- capture widths -%}{{ image_default_width }},{{ image_2x_width }},{{ image_3x_width }}{%- endcapture -%}
{% assign image_widths = widths %}
{% include 'theme-rias' %}
<img id="{{ img_id }}" class="lazyload"
src="{{ image | img_url: image_default }}"
data-src="{{ image_url_pattern }}"
data-widths="[{{ image_widths }}]"
data-aspectratio="{{ image.aspect_ratio }}"
data-sizes="auto"
alt="{{ image.alt | escape | default: shop.name }}">
</a>
{% else %}
{{ shop.name }}
{% endif %}
{% if template.name == 'index' %}
</h1>
{% else %}
</div>
{% endif %}
</div>
<nav class="nav-bar" role="navigation">
{% include 'site-nav' %}
</nav>
<header class="util">
<div class= "right-wrapper">
{% if shop.customer_accounts_enabled %}
{% include 'accounts-nav' %}
{% endif %}
<a href="/cart" id="CartButton">
<span class="icon-fallback-text"></span>
{{ 'layout.cart.title' | t }}
<span id="CartCount">({{ cart.item_count }})</span>
</a>
{% if settings.ajax_cart_enable %}
{% include 'cart-preview' %}
{% endif %}
</div>
</header>
</div>
</div>
</header>
</div>
</div>
<nav id="menu" class="panel" role="navigation">
<div class="search">
{% include 'search-bar' %}
</div>
{% include 'site-nav' %}
<div class="account">
{% if shop.customer_accounts_enabled %}
{% include 'accounts-nav' %}
{% endif %}
</div>
</nav>
let logo = document.querySelector('.logo-nav-contain');
window.addEventListener("scroll", (e) => {
let scrolled = document.scrollingElement.scrollTop;
if(scrolled > 1){
logo.classList.add(
'on-scroll');
}else {
logo.classList.remove(
'on-scroll');
}
});
.logo-nav-contain {
position: fixed;
top: 0;
left: 0;
width: 100%;
text-align: center;
}
.on-scroll {
background: red;
color: #fff;
}
<div class="logo-nav-contain">logo</div>
<div style="height:1000px"></div>
I'm trying to get my featured collections section on my Shopify site to display as a slider. It looks like it is already installed on the Debut theme but I can't get it to initialize. I'm not getting any errors in my console so does anyone know how to get the slick slider to display correctly?
Here is my site and password to view the site if it's helpful.
https://test-shop-986573.myshopify.com/
password: shecka
<ul data-slides="{{section.settings.grid}}" class="grid grid--uniform grid--view-items collection-slider ">
{
.slick-track {
display: flex;
}
.product-card {
width: 100%;
}
.slick-prev {
left: 0;
z-index: 999;
}
.slick-next {
right: 0;
z-index: 999;
}
padding-right: 25px;
overflow: hidden;
}
$(document).ready(function(){
$('.collection-slider').each(function(){
var num_slides = 2;
if(window.innerWidth >= 750)
{
var num_slides = $(this).data('slides');
}
$(this).slick({slidesToShow:num_slides});
});
});
{% case section.settings.grid %}
{% when 2 %}
{%- assign max_height = 530 -%}
{% when 3 %}
{%- assign max_height = 345 -%}
{% when 4 %}
{%- assign max_height = 250 -%}
{% when 5 %}
{%- assign max_height = 195 -%}
{% endcase %}
{% if section.settings.layout == 'grid' %}
{%- assign limit = section.settings.grid | times: section.settings.rows -%}
{% else %}
{%- assign limit = 16 -%}
{% endif %}
{% paginate collection.products by limit %}
<div data-section-id="{{ section.id }}" data-section-type="collection-template">
<header class="collection-header">
{%- assign is_filter_by_available = false -%}
{%- if section.settings.tags_enable and collection.all_tags.size > 0 -%}
{%- assign is_filter_by_available = true -%}
{%- endif -%}
{% if section.settings.show_collection_image and collection.image %}
<div class="collection-hero">
<div class="collection-hero__image ratio-container lazyload js"
data-bgset="{% include 'bgset', image: collection.image %}"
data-sizes="auto"
data-parent-fit="cover"
style="background-image: url('{{ collection.image | img_url: '300x300' }});"></div>
<noscript>
<div class="collection-hero__image" style="background-image: url({{ collection.image | img_url: '2048x600', crop: 'top' }});"></div>
</noscript>
<div class="collection-hero__title-wrapper">
<h1 class="collection-hero__title page-width">
<span class="visually-hidden">{{ 'collections.general.collection_label' | t }}: </span>
{{ collection.title }}
</h1>
</div>
</div>
{% if is_filter_by_available == false and section.settings.sort_enable == false %}
<div class="page-width">
<span class="filters-toolbar__product-count">{{ 'collections.general.items_with_count' | t: count: collection.products_count }}</span>
</div>
{% endif %}
{% if collection.description != blank %}
<div class="rte collection-description page-width">
{{ collection.description }}
</div>
{% endif %}
{% else %}
<div class="page-width">
<div class="section-header text-center">
<h1>
<span class="visually-hidden">{{ 'collections.general.collection_label' | t }}: </span>
{{ collection.title }}
</h1>
{% if collection.description != blank %}
<div class="rte">
{{ collection.description }}
</div>
{% endif %}
{% if is_filter_by_available == false and section.settings.sort_enable == false %}
<span class="filters-toolbar__product-count">{{ 'collections.general.items_with_count' | t: count: collection.products_count }}</span>
{% endif %}
</div>
</div>
{% endif %}
{% if is_filter_by_available or section.settings.sort_enable %}
<div class="filters-toolbar-wrapper{% if is_filter_by_available %} filters-toolbar--has-filter{% endif %}">
<div class="page-width">
<div class="filters-toolbar">
<div class="filters-toolbar__item-wrapper">
{% if section.settings.tags_enable %}
{% unless collection.all_tags.size == 0 %}
<div class="filters-toolbar__item-child">
<label class="filters-toolbar__label select-label" for="FilterTags">{{ 'collections.filters.title_tags' | t }}</label>
<div class="filters-toolbar__input-wrapper select-group">
<select class="filters-toolbar__input hidden" name="FilterTags" id="FilterTags" aria-describedby="a11y-refresh-page-message a11y-selection-message">
<option value="{{ collection.url }}">{{ 'collections.filters.all_tags' | t }}</option>
{% for tag in collection.all_tags %}
{%- assign new_url = tag | link_to_tag: tag | split: 'href="' | last | split: '"' | first -%}
<option value="{{ new_url }}"{% if current_tags contains tag %} selected="selected"{% endif %}>{{ tag }}</option>
{% endfor %}
</select>
{% include 'icon-chevron-down' %}
</div>
</div>
{% endunless %}
{% endif %}
{% if section.settings.sort_enable %}
<div class="filters-toolbar__item-child">
{%- assign sort_by = collection.sort_by | default: collection.default_sort_by -%}
<label class="filters-toolbar__label select-label" for="SortBy">{{ 'collections.sorting.title' | t }}</label>
<div class="filters-toolbar__input-wrapper select-group">
<select name="sort_by" id="SortBy"
class="filters-toolbar__input hidden"
aria-describedby="a11y-refresh-page-message a11y-selection-message"
data-default-sortby="{{ collection.default_sort_by }}"
>
{%- for option in collection.sort_options -%}
<option value="{{ option.value }}" {% if option.value == sort_by %}selected="selected"{% endif %}>{{ option.name }}</option>
{%- endfor -%}
</select>
{% include 'icon-chevron-down' %}
</div>
</div>
{% endif %}
</div>
<div class="filters-toolbar__item filters-toolbar__item--count">
<span class="filters-toolbar__product-count">{{ 'collections.general.items_with_count' | t: count: collection.products_count }}</span>
</div>
</div>
</div>
</div>
{% endif %}
</header>
<div class="page-width" id="Collection">
{% if section.settings.layout == 'grid' %}
{% case section.settings.grid %}
{% when 2 %}
{%- assign grid_item_width = 'medium-up--one-half' -%}
{% when 3 %}
{%- assign grid_item_width = 'small--one-half medium-up--one-third' -%}
{% when 4 %}
{%- assign grid_item_width = 'small--one-half medium-up--one-quarter' -%}
{% when 5 %}
{%- assign grid_item_width = 'small--one-half medium-up--one-fifth' -%}
{% endcase %}
<ul class="grid grid--uniform{% if collection.products_count > 0 %} grid--view-items{% endif %}">
{% for product in collection.products %}
<li class="grid__item grid__item--{{section.id}} {{ grid_item_width }}">
{% include 'product-card-grid', max_height: max_height, product: product, show_vendor: section.settings.show_vendor %}
</li>
{% else %}
{% comment %}
Add default products to help with onboarding for collections/all only.
The onboarding styles and products are only loaded if the
store has no products.
{% endcomment %}
{% if collection.handle == 'all' and collection.all_vendors.size == 0 and collection.all_types.size == 0 %}
<li class="grid__item">
<div class="grid grid--uniform">
{% for i in (1..limit) %}
<div class="grid__item {{ grid_item_width }}">
<div class="grid-view-item">
<a href="#" class="grid-view-item__link">
<div class="grid-view-item__image">
{% capture current %}{% cycle 1, 2, 3, 4, 5, 6 %}{% endcapture %}
{{ 'product-' | append: current | placeholder_svg_tag: 'placeholder-svg' }}
</div>
<div class="h4 grid-view-item__title">{{ 'homepage.onboarding.product_title' | t }}</div>
<div class="grid-view-item__meta">
<span class="product-price__price">$19.99</span>
</div>
</a>
</div>
</div>
{% endfor %}
</div>
</li>
{% else %}
{%- assign is_empty_collection = true -%}
{% endif %}
{% endfor %}
</ul>
{% else %}
<ul class="list-view-items">
{% for product in collection.products %}
<li class="list-view-item">
{% include 'product-card-list', product: product, show_vendor: section.settings.show_vendor %}
</li>
{% else %}
{% comment %}
Add default products to help with onboarding for collections/all only.
The onboarding styles and products are only loaded if the
store has no products.
{% endcomment %}
{% if collection.handle == 'all' and collection.all_vendors.size == 0 and collection.all_types.size == 0%}
{% for i in (1..4) %}
<li class="list-view-item">
<a href="#" class="list-view-item__link">
<div class="list-view-item__image-column">
<div class="list-view-item__image-wrapper">
<div class="list-view-item__image">
{% capture current %}{% cycle 1, 2, 3, 4 %}{% endcapture %}
{{ 'product-' | append: current | placeholder_svg_tag: 'placeholder-svg' }}
</div>
</div>
</div>
<div class="list-view-item__title-column">
<div class="list-view-item__title">{{ 'homepage.onboarding.product_title' | t }}</div>
</div>
<div class="list-view-item__price-column">
<span class="product-price__price">$19.99</span>
</div>
</a>
</li>
{% endfor %}
{% else %}
{%- assign is_empty_collection = true -%}
{% endif %}
{% endfor %}
</ul>
{% endif %}
{% if is_empty_collection %}
<div class="grid__item small--text-center">
<p class="text-center">{{ 'collections.general.no_matches' | t }}</p>
</div>
{% endif %}
{%- if paginate.pages > 1 -%}
{% include 'pagination', paginate: paginate %}
{%- endif -%}
</div>
</div>
{% endpaginate %}
I have a Shopify mobile nav that currently expands all options at once. They must manually be collapsed, which creates an annoying user experience on mobile.
I am looking for any advice on modifying it so only one option expands at a time ('.mobile-nav__sublist-trigger is-active show-dropdown' is the link with multiple options).
Any help is appreciated!
<nav role="navigation">
<ul id="MobileNav" class="mobile-nav post-large--hide">
<a href="{{ routes.cart_url }}" class="cart-page-link mobile-cart-page-link">
<span class="icon icon-cart header-bar__cart-icon" aria-hidden="true"></span>
{{ 'layout.cart.title' | t }} <span class="cart-count{% if cart.item_count == 0 %} hidden-count{% endif %}">{{ cart.item_count }}</span>
</a>
<form class="search" action="/search">
<input type="text" placeholder="Search" name="q" value="{{ search.terms | escape }}" />
<input type="submit" value="Search" />
</form>
{% for link in mobile-nav.links %}
{% if link.links != blank %}
{% assign parent_index = forloop.index %}
<li class="mobile-nav__link" aria-haspopup="true">
<a
href="{{ link.url }}"
class="mobile-nav__sublist-trigger"
aria-controls="MobileNav-Parent-{{ parent_index }}"
aria-expanded="false">
{{ link.title | escape }}
{% include 'mobile-nav-icons' %}
</a>
<ul
id="MobileNav-Parent-{{ parent_index }}"
class="mobile-nav__sublist">
{% if link.type == 'collection_link' or link.type == 'blog_link' or link.url == routes.all_products_collection_url %}
<li class="mobile-nav__sublist-link {% if link.active %}site-nav--active{% endif %}">
{{ link.title | escape }}</span>
</li>
{% endif %}
{% for childlink in link.links %}
{% if childlink.links != blank %}
{% assign child_index = forloop.index %}
<li class="mobile-nav__sublist-link">
<a
href="{{ childlink.url }}"
class="mobile-nav__sublist-trigger"
aria-controls="MobileNav-Child-{{ parent_index }}-{{ child_index }}"
aria-expanded="false"
>
{{ childlink.title | escape }}
{% include 'mobile-nav-icons' %}
</a>
<ul
id="MobileNav-Child-{{ parent_index }}-{{ child_index }}"
class="mobile-nav__sublist mobile-nav__sublist--grandchilds">
{% for grandchildlink in childlink.links %}
<li class="mobile-nav__sublist-lin">
<a
href="{{ grandchildlink.url }}"
class="collapse"
{% unless request.page_type == 'index' %}{% if grandchildlink.active %}aria-current="page"{% endif %}{% endunless%}>
{{ grandchildlink.title | escape }}
</a>
</li>
{% endfor %}
</ul>
</li>
{% else %}
<li class="mobile-nav__sublist-link">
<a
href="{{ childlink.url }}"
{% unless request.page_type == 'index' %}{% if childlink.active %}aria-current="page"{% endif %}{% endunless%}>
{{ childlink.title | escape }}
</a>
</li>
{% endif %}
{% endfor %}
</ul>
</li>
{% else %}
<li class="mobile-nav__link">
<a
href="{{ link.url }}"
class="mobile-nav"
{% unless request.page_type == 'index' %}{% if link.active %}aria-current="page"{% endif %}{% endunless%}>
{{ link.title | escape }}
</a>
</li>
{% endif %}
{% endfor %}
{% if shop.customer_accounts_enabled %}
{% if customer %}
<li class="mobile-nav__link">
{{ 'layout.customer.account' | t }}
</li>
<li class="mobile-nav__link">
{{ 'layout.customer.log_out' | t | customer_logout_link }}
</li>
{% else %}
<li class="mobile-nav__link">
{{ 'layout.customer.log_in' | t | customer_login_link }}
</li>
<li class="mobile-nav__link">
{{ 'layout.customer.create_account' | t | customer_register_link }}
</li>
{% endif %}
{% endif %}
<li class="mobile-nav__link">
{% if section.settings.header_search_enable %}
{% endif %}
</li>
</ul>
</nav>
Try this I did this for your "Shop" Submenus
$('.mobile-nav__link ul > li').click(function(){
// Setting all the submenu hidden by default
$('.mobile-nav__link ul > li').find('a').removeClass('is-active');
$('.mobile-nav__link ul > li').find('ul').css({'display': 'none'});
$('.mobile-nav__link ul > li').find('a').attr('aria-expanded', 'false');
// Activating the current (clicked) submenu
$(this).find('a').addClass('is-active');
$(this).find('a').attr('aria-expanded', 'true');
$(this).find('ul').css({'display': 'block'});
});
In my django project, I am trying to build a menu for navigation on one single site. The navigation should be done by href="#about us" The menu has three sizes, one for big screens (PC), one for medium screens (Tablets), and one for small screens (Phones). The navigation works on PC size menu, but does not work on the other ones. To be clear, all of the menus redirects the user to something like mywebsite.com/info#about us, but just the PC menu actually scrolls the site. There, I fill the menus with some content from a database:
{% block big-menu %}
{% for faq in question_list %}
{{faq.question}}
{% endfor %}
{% endblock %}
{% block small-menu %}
{% for faq in question_list %}
{{faq.question}}
{% endfor %}
{% endblock %}
And there is the template for the menus:
<div class="w3-sidebar w3-bar-block w3-collapse w3-card w3-animate-right w3-hide-small" style="width:300px;right:0;top:0;" id="mySidebar">
<button class="w3-bar-item w3-button w3-large w3-hide-large" onclick="w3_close()"><h3>Menu ×</h3></button>
<a class="w3-bar-item w3-large w3-hide-small w3-hide-medium"><h3>Menu</h3></a>
{% block big-menu %}
{% endblock %}
</div>
<div class="w3-bar-block w3-collapse w3-animate-right w3-hide-large w3-hide-medium w3-light-gray" style="display:none;" id="smallSidebar">
<a class="w3-bar-item w3-large"><h3>Menu</h3></a>
{% block small-menu %}
{% endblock %}
</div>
And there I assign ids to content I am linking to in the menu:
<div class="w3-hide-small w3-hide-medium"style="width: calc(100% - 300px);">
{% for faq in question_list %}
<div class="w3-card-4" id="{{faq.question}}">
<h3 class="w3-container w3-blue">{{faq.question}}</h3>
<div class="w3-container">
{{faq.answer}}
</div>
</div>
{% endfor %}
</div>
<div class="w3-hide-large">
{% for faq in question_list %}
<div class="w3-card-4" id="{{faq.question}}">
<h3 class="w3-container w3-blue">{{faq.question}}</h3>
<div class="w3-container">
{{faq.answer}}
</div>
</div>
{% endfor %}
</div>
There are screenshots of working & not working menu:
The problem was caused by two elements (the big content and the small one) having the same id ({{faq.question}}). So, the fix is as following:
{% block big-menu %}
{% for faq in question_list %}
{{faq.question}}
{% endfor %}
{% endblock %}
{% block small-menu %}
{% for faq in question_list %}
{{faq.question}}
{% endfor %}
{% endblock %}
{% block body %}
<h1>Vitosoft - FAQ</h1>
<div class="w3-hide-small w3-hide-medium"style="width: calc(100% - 300px);">
{% for faq in question_list %}
<div class="w3-card-4" id="{{faq.question}}big">
<h3 class="w3-container w3-blue">{{faq.question}}</h3>
<div class="w3-container">
{{faq.answer}}
</div>
</div>
{% endfor %}
</div>
<div class="w3-hide-large">
{% for faq in question_list %}
<div class="w3-card-4" id="{{faq.question}}">
<h3 class="w3-container w3-blue">{{faq.question}}</h3>
<div class="w3-container">
{{faq.answer}}
</div>
</div>
{% endfor %}
</div>
A jquery script will do it, try the following:
$("a").on('click', function(event) {
# Distinguish the a tags with others by adding a class, like $('a.anchor').click
if (this.hash !== "") {
event.preventDefault(); // prevent the default behavior of the link
var hash = this.hash;
$('html, body').animate({ # With just a smooth animation within 800 miliseconds, we scroll towards the target anchor
scrollTop: $(hash).offset().top // we scroll
}, 800, function(){
// window.location.hash = hash; // Optional here
// this will return the part of the URL that follows the # symbol, including the # symbol.
});
} // End if
});
I'm creating a blog with python and django. Most of it has been fine up until i've just tried to create the footer. The footer display's fine on the home page but when you click into the blog post the footer gets constrained by the content container and row div class.
When you look at this in firefox dev inspector and DOM it's showing that my footer div is sat within the content container and row, and not in the body. Most things i've usually managed to find the answer for but this is driving me nuts. I think i'm either missing something or i'm not asking the right question.
I don't understand why it's just the footer div that has been put within the content container / row div and nothing else that is effected in the same way.
Is there anyway to amend this without using jquery / jscript and changing the parentElement node?
If i have to amend this with jscript, where exactly do i have to amend it, and with what?
Thanks
.footer {
height: 50px;
background-color: #000000;
color: #ffffff;
padding: 10px;
text-align: center;
clear: both;
}
<div class="content container">
<div class="row">
<div class="col-md-8">
{% block content %}
{% endblock %}
</div>
</div>
</div>
<footer>
<div class="footer">
Copyright © 2017
</div>
</footer>
firefox dev inspector image - sat in row div
firefox dev inspector image - moved to body
This could happen if there are opening tags that don't have closing tags. For example, if your blog looked like this,
{% block content %}
<div id="open_tag_1">
<div id="open_tag_2">
{% endblock %}
The tags that you expect to be closing <div class="content container"> and <div class="row"> will actually be used to close <div id="open_tag_1"> and <div id="open_tag_2">.
<footer> will then be inside <div class="row">.
This is the blog post detail page
{% extends 'blog/base.html' %}
{% block content %}
{% if post.published_date %}
{{ post.published_date }}
by Matt Cheetham
{% else %}
<a class="btn btn-default" href="{% url 'blog.views.post_publish' pk=post.pk %}">Publish</a>
{% endif %}
{% if user.is_authenticated %}
<a class="btn btn-default" href="{% url 'post_edit' pk=post.pk %}"><span class="glyphicon glyphicon-pencil"></span></a>
<a class="btn btn-default" href="{% url 'post_remove' pk=post.pk %}"><span class="glyphicon glyphicon-remove"></span></a>
{% endif %}
<div class="postview">
{{ post.title }}
</div>
<p>{{ post.text|safe }}</p>
<div class="comment">
<div class="date">
<h3>Comments</h3>
<br>
<a class="btn btn-default" href="{% url 'add_comment_to_post' pk=post.pk %}">Add comment</a>
<br>
<br>
{% for comment in post.comments.all %}
{% if user.is_authenticated or comment.approved_comment %}
{{ comment.created_date }}
{% if not comment.approved_comment %}
<a class="btn btn-default" href="{% url 'comment_remove' pk=comment.pk %}"><span class="glyphicon glyphicon-remove"></span></a>
<a class="btn btn-default" href="{% url 'comment_approve' pk=comment.pk %}"><span class="glyphicon glyphicon-ok"></span></a>
{% endif %}
</div>
<strong>{{ comment.author }}</strong>
<p>{{ comment.text|safe }}</p>
</div>
{% endif %}
{% empty %}
<p>No comments here yet...</p>
{% endfor %}
{% endblock %}