When I click the Main course, it's showing Main course details.
When I click the Soups, it's not showing Soups details - it's going up.
<div class="clearfix">
<article id="section-1"><h3 class="page-title">Soups</h3>
<p class="woocommerce-result-count pull-left" style="margin-right:30px;">Showing 1–9 of 11 results</p>
<p class="mint-products-per-page pull-left">
<span>View: </span>
18 / 36 / All </p>
</div>
<div class="row">
<div class="product_item_wrap">
<div class="product_item">
<div class="product_img">
<div class="product_buttons center">
<a class="wish_button" href="javascript:void(0);">Description<br>
You are previewing "Paradise", a premium HTML bootstrap template that will help you design
</a>
<a class="zoom" href="images/products1.jpg" data-gal="prettyPhoto[gal]"><i class="fe icon_search"></i></a>
<a class="add_to_cart_button" href="javascript:void(0);"><i class="glyphicon glyphicon-shopping-cart"></i>
</a>
</div>
<img src="images/products1.jpg" alt="" />
</div>
<div class="product_description center">
<h4 class="product_title">Striped Pants</h4>
<div class="price">$105.00</div>
</div>
</div>
</div>
<div class="product_item_wrap">
<div class="product_item">
<div class="product_img">
<div class="product_buttons center">
<a class="wish_button" href="javascript:void(0);">Description<br>
You are previewing "Paradise", a premium HTML bootstrap template that will help you design
</a>
<a class="zoom" href="images/products2.jpg" data-gal="prettyPhoto[gal]"><i class="fe icon_search"></i></a>
<a class="add_to_cart_button" href="javascript:void(0);"><i class="glyphicon glyphicon-shopping-cart"></i></a> </div>
<img src="images/products2.jpg" alt="" /> </div>
<div class="product_description center">
<h4 class="product_title">Cargo Pants</h4>
<div class="price">$59.00</div>
</div>
</div>
</div>
<div class="product_item_wrap">
<div class="product_item">
<div class="product_img">
<div class="product_buttons center">
<a class="wish_button" href="javascript:void(0);">Description<br>
You are previewing "Paradise", a premium HTML bootstrap template that will help you design
</a>
<a class="zoom" href="images/products3.jpg" data-gal="prettyPhoto[gal]"><i class="fe icon_search"></i></a>
<a class="add_to_cart_button" href="javascript:void(0);"><i class="glyphicon glyphicon-shopping-cart"></i></a> </div>
<img src="images/products3.jpg" alt="" /> </div>
<div class="product_description center">
<h4 class="product_title">Cargo Pants</h4>
<div class="price">$59.00</div>
</div>
</div>
</div>
<div class="product_item_wrap">
<div class="product_item">
<div class="product_img">
<div class="product_buttons center">
<a class="wish_button" href="javascript:void(0);">Description<br>
You are previewing "Paradise", a premium HTML bootstrap template that will help you design
</a>
<a class="zoom" href="images/products1.jpg" data-gal="prettyPhoto[gal]"><i class="fe icon_search"></i></a>
<a class="add_to_cart_button" href="javascript:void(0);"><i class="glyphicon glyphicon-shopping-cart"></i></a> </div>
<img src="images/products1.jpg" alt="" /> </div>
<div class="product_description center">
<h4 class="product_title">Striped Pants</h4>
<div class="price">$105.00</div>
</div>
</div>
</div>
<div class="product_item_wrap">
<div class="product_item">
<div class="product_img">
<div class="product_buttons center">
<a class="wish_button" href="javascript:void(0);">Description<br>
You are previewing "Paradise", a premium HTML bootstrap template that will help you design
</a>
<a class="zoom" href="images/products2.jpg" data-gal="prettyPhoto[gal]"><i class="fe icon_search"></i></a>
<a class="add_to_cart_button" href="javascript:void(0);"><i class="glyphicon glyphicon-shopping-cart"></i></a> </div>
<img src="images/products2.jpg" alt="" /> </div>
<div class="product_description center">
<h4 class="product_title">Cargo Pants</h4>
<div class="price">$59.00</div>
</div>
</div>
</div>
<div class="product_item_wrap">
<div class="product_item">
<div class="product_img">
<div class="product_buttons center">
<a class="wish_button" href="javascript:void(0);">Description<br>
You are previewing "Paradise", a premium HTML bootstrap template that will help you design
</a>
<a class="zoom" href="images/products3.jpg" data-gal="prettyPhoto[gal]"><i class="fe icon_search"></i></a>
<a class="add_to_cart_button" href="javascript:void(0);"><i class="glyphicon glyphicon-shopping-cart"></i></a> </div>
<img src="images/products3.jpg" alt="" /> </div>
<div class="product_description center">
<h4 class="product_title">Cargo Pants</h4>
<div class="price">$59.00</div>
</div>
</div>
</div>
<div class="clear"></div>
</div>
<div class="clearfix">
<article id="section-2"><h3 class="page-title">Main Course</h3>
<p class="woocommerce-result-count pull-left" style="margin-right:30px;">Showing 1–9 of 11 results</p>
</div>
<div class="row">
<div class="product_item_wrap">
<div class="product_item">
<div class="product_img">
<div class="product_buttons center">
<a class="wish_button" href="javascript:void(0);">Description<br>
You are previewing "Paradise", a premium HTML bootstrap template that will help you design
</a>
<a class="zoom" href="images/products1.jpg" data-gal="prettyPhoto[gal]"><i class="fe icon_search"></i></a>
<a class="add_to_cart_button" href="javascript:void(0);"><i class="glyphicon glyphicon-shopping-cart"></i>
</a>
</div>
<img src="images/products1.jpg" alt="" />
</div>
<div class="product_description center">
<h4 class="product_title">Striped Pants</h4>
<div class="price">$105.00</div>
</div>
</div>
</div>
<div class="product_item_wrap">
<div class="product_item">
<div class="product_img">
<div class="product_buttons center">
<a class="wish_button" href="javascript:void(0);">Description<br>
You are previewing "Paradise", a premium HTML bootstrap template that will help you design
</a>
<a class="zoom" href="images/products2.jpg" data-gal="prettyPhoto[gal]"><i class="fe icon_search"></i></a>
<a class="add_to_cart_button" href="javascript:void(0);"><i class="glyphicon glyphicon-shopping-cart"></i></a> </div>
<img src="images/products2.jpg" alt="" /> </div>
<div class="product_description center">
<h4 class="product_title">Cargo Pants</h4>
<div class="price">$59.00</div>
</div>
</div>
</div>
<div class="product_item_wrap">
<div class="product_item">
<div class="product_img">
<div class="product_buttons center">
<a class="wish_button" href="javascript:void(0);">Description<br>
You are previewing "Paradise", a premium HTML bootstrap template that will help you design
</a>
<a class="zoom" href="images/products3.jpg" data-gal="prettyPhoto[gal]"><i class="fe icon_search"></i></a>
<a class="add_to_cart_button" href="javascript:void(0);"><i class="glyphicon glyphicon-shopping-cart"></i></a> </div>
<img src="images/products3.jpg" alt="" /> </div>
<div class="product_description center">
<h4 class="product_title">Cargo Pants</h4>
<div class="price">$59.00</div>
</div>
</div>
</div>
<div class="product_item_wrap">
<div class="product_item">
<div class="product_img">
<div class="product_buttons center">
<a class="wish_button" href="javascript:void(0);">Description<br>
You are previewing "Paradise", a premium HTML bootstrap template that will help you design
</a>
<a class="zoom" href="images/products1.jpg" data-gal="prettyPhoto[gal]"><i class="fe icon_search"></i></a>
<a class="add_to_cart_button" href="javascript:void(0);"><i class="glyphicon glyphicon-shopping-cart"></i></a> </div>
<img src="images/products1.jpg" alt="" /> </div>
<div class="product_description center">
<h4 class="product_title">Striped Pants</h4>
<div class="price">$105.00</div>
</div>
</div>
</div>
<div class="product_item_wrap">
<div class="product_item">
<div class="product_img">
<div class="product_buttons center">
<a class="wish_button" href="javascript:void(0);">Description<br>
You are previewing "Paradise", a premium HTML bootstrap template that will help you design
</a>
<a class="zoom" href="images/products2.jpg" data-gal="prettyPhoto[gal]"><i class="fe icon_search"></i></a>
<a class="add_to_cart_button" href="javascript:void(0);"><i class="glyphicon glyphicon-shopping-cart"></i></a> </div>
<img src="images/products2.jpg" alt="" /> </div>
<div class="product_description center">
<h4 class="product_title">Cargo Pants</h4>
<div class="price">$59.00</div>
</div>
</div>
</div>
<div class="product_item_wrap">
<div class="product_item">
<div class="product_img">
<div class="product_buttons center">
<a class="wish_button" href="javascript:void(0);">Description<br>
You are previewing "Paradise", a premium HTML bootstrap template that will help you design
</a>
<a class="zoom" href="images/products3.jpg" data-gal="prettyPhoto[gal]"><i class="fe icon_search"></i></a>
<a class="add_to_cart_button" href="javascript:void(0);"><i class="glyphicon glyphicon-shopping-cart"></i></a> </div>
<img src="images/products3.jpg" alt="" /> </div>
<div class="product_description center">
<h4 class="product_title">Cargo Pants</h4>
<div class="price">$59.00</div>
</div>
</div>
</div>
<div class="clear"></div>
</div>
Hi Here is the what i am using code
Related
I'm trying to implement a navbar megamenu on my website using Bulma, since is the only framework that I found that works without interfering with the code already on the website. I never used Bulma before, and have only some basic knowledge of CSS, HTML and PHP.
The navbar is working fine on the desktop version, but I'm stuck on the mobile version. The drop-down menus are expanded by default, and I can't figure it out how to disable this behaviour. This is my code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://res.cloudinary.com/rosaritoliving/raw/upload/v1564503077/Baja123%20Menu/megamenu_1564427792.css">
<script>
.navbar-item.is-mega {
position: static;
.is-mega-menu-title {
margin-bottom: 0;
padding: .375rem 1rem;
}
}
</script>
</head>
<body>
<nav class="navbar">
<div class="navbar-brand">
<a class="navbar-item" href="https://www.baja123.com">
<img src="https://mlvtslglmiuu.i.optimole.com/otn1P_eJnbI/w:461/h:92/q:auto/https://www.rosaritoliving.com/wp-content/uploads/logo-baja123-real-estate.png" alt="Baja123 Baja's Best Real Estate Website" width="150" height="50">
</a>
<div class="navbar-burger burger" data-target="navMenubd-example">
<span></span>
<span></span>
<span></span>
</div>
</div>
<div id="navMenubd-example" class="navbar-menu">
<div class="navbar-start">
<div class="navbar-item">
<a class="navbar-item" href="https://www.baja123.com">HOME</a></div>
<div class="navbar-item has-dropdown is-hoverable is-boxed">
<div class="navbar-link">OCEANFRONT LISTINGS
</div>
<div id="moreDropdown" class="navbar-dropdown is-boxed">
<div class="container">
<div class="columns">
<div class="column">
<h1 class="title is-6 is-mega-menu-title has-text-danger has-text-weight-bold">BAJA REAL ESTATE</h1>
<div class="navbar-content">
<a class="navbar-item" href="https://www.baja123.com/BAJA_REAL_ESTATE/page_2493056.html">Listings for Sale</a>
<a class="navbar-item" href="https://www.baja123.com/ROSARITO_BEACH_AREA_RENTALS/page_1666562.html">Listings for Rent</a>
<a class="navbar-item" href="https://www.baja123.com/BAJA_LIVING/page_2312494.html">About Baja California</a>
</div>
</div>
<div class="column">
<h1 class="title is-6 is-mega-menu-title has-text-danger has-text-weight-bold">ROSARITO REAL ESTATE</h1>
<div class="navbar-content">
<a class="navbar-item" href="https://www.baja123.com/ROSARITO_REAL_ESTATE/page_1754239.html">Listings for Sale</a>
<a class="navbar-item" href="https://www.baja123.com/ROSARITO_BEACH_AREA_RENTALS/page_1666562.html">Listings for Rent</a>
<a class="navbar-item" href="https://www.baja123.com/ROSARITO_ROSARITO_MAIN_PAGE_BUYERS_GUIDE/page_2615332.html">About Rosarito Beach</a>
</div>
</div>
<div class="column">
<h1 class="title is-6 is-mega-menu-title has-text-danger has-text-weight-bold">TIJUANA REAL ESTATE</h1>
<div class="navbar-content">
<a class="navbar-item" href="https://www.baja123.com/TIJUANA_REAL_ESTATE_LISTINGS/page_1754238.html">Listings for Sale</a>
<a class="navbar-item" href="https://www.baja123.com/ROSARITO_BEACH_AREA_RENTALS/page_1666562.html">Listings for Rent</a>
<a class="navbar-item" href="https://www.baja123.com/TIJUANA_BUYERS_GUIDE/page_2649211.html">About Tijuana</a>
</div>
</div>
<div class="column">
<h1 class="title is-6 is-mega-menu-title has-text-danger has-text-weight-bold">ENSENADA REAL ESTATE</h1>
<div class="navbar-content">
<a class="navbar-item" href="https://www.baja123.com/ENSENADA_REAL_ESTATE_LISTINGS/page_1754240.html">Listings for Sale</a>
<a class="navbar-item" href="https://www.baja123.com/ROSARITO_BEACH_AREA_RENTALS/page_1666562.html">Listings for Rent</a>
<a class="navbar-item" href="https://www.baja123.com/ENSENADA_BUYERS_GUIDE/page_2650491.html">About Ensenada</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="navbar-item has-dropdown is-hoverable is-boxed">
<div class="navbar-link">BAJA LIVING</div>
<div id="blogDropdown" class="navbar-dropdown is-boxed">
<div class="container">
<div class="columns">
<div class="column">
<h1 class="title is-6 is-mega-menu-title has-text-danger has-text-weight-bold">UTILITIES AND SERVICES</h1>
<div class="navbar-content">
<a class="navbar-item" href="https://www.baja123.com/UTILITIES_AND_SERVICES_IN_BAJA_Water_Company/page_2312474.html">Water Company</a>
<a class="navbar-item" href="https://www.baja123.com/UTILITIES_AND_SERVICES_IN_BAJA_Electric_Company/page_2522445.html">Electric Company</a>
<a class="navbar-item" href="https://www.baja123.com/UTILITIES_AND_SERVICES_IN_BAJA_Gas_Company/page_2522339.html">Gas Company</a>
<a class="navbar-item" href="https://www.baja123.com/UTILITIES_AND_SERVICES_IN_BAJA_Telephone_Service/page_2313221.html">Telephone Service</a>
<a class="navbar-item" href="https://www.baja123.com/UTILITIES_AND_SERVICES_IN_BAJA_Internet_Service/page_2313224.html">Internet Service</a>
<a class="navbar-item" href="https://www.baja123.com/UTILITIES_AND_SERVICES_IN_BAJA_Cellular_Service/page_2313222.html">Cellular Service</a>
<a class="navbar-item" href="https://www.baja123.com/UTILITIES_AND_SERVICES_IN_BAJA_Television_Service/page_2313223.html">TV Service</a>
<a class="navbar-item" href="https://www.baja123.com/UTILITIES_AND_SERVICES_IN_BAJA_How_to_Dial_Phones/page_2313225.html">How to Dial Phones in Mexico</a>
<a class="navbar-item" href="https://www.baja123.com/UTILITIES_AND_SERVICES_IN_BAJA_Emergency_Numbers/page_2522342.html">Emergency Phone Numbers</a>
<a class="navbar-item" href="https://www.baja123.com/UTILITIES_AND_SERVICES_IN_BAJA_Bill_Paying_Service/page_2522340.html">Bill Paying Services</a>
</div>
</div>
<div class="column">
<h1 class="title is-6 is-mega-menu-title has-text-danger has-text-weight-bold">MOVING YOUR FURNITURE TO THE ROSARITO AREA</h1>
<div class="navbar-content">
<a class="navbar-item" href="https://www.baja123.com/MOVING_YOUR_PERSONAL_PROPERTY_INTO_MEXICO/page_2313227.html">Moving Instructions</a>
<a class="navbar-item" href="https://www.baja123.com/STORAGE_SERVICES_IN_THE_ROSARITO_BEACH_AREA/page_2645216.html">Storage Options</a>
<a class="navbar-item" href="https://www.baja123.com/MOVING_SERVICES_IN_THE_ROSARITO_BEACH_AREA/page_2645197.html">Moving Services</a>
</div>
</div>
<div class="column">
<h1 class="title is-6 is-mega-menu-title has-text-danger has-text-weight-bold">AUTO INFORMATION</h1>
<div class="navbar-content">
<a class="navbar-item" href="https://www.baja123.com/DRIVING_A_US_VEHICLE_IN_MEXICO/page_2313790.html">Driving your Car in Baja</a>
<a class="navbar-item" href="https://www.baja123.com/DRIVING_TIPS_AND_RULES_FOR_MEXICO/page_2313786.html">Driving Tips and Information</a>
<a class="navbar-item" href="https://www.baja123.com/AUTOMOBILE_INSURANCE_IN_MEXICO/page_2313289.html">Auto Insurancce Services</a>
<a class="navbar-item" href="https://www.baja123.com/MECHANICS_IN_THE_ROSARITO_BEACH_AREA/page_2313784.html">Auto Repair Services</a>
</div>
</div>
<div class="column">
<h1 class="title is-6 is-mega-menu-title has-text-danger has-text-weight-bold">HEALTH CARE, HOSPITALS AND DOCTORS IN THE ROSARITO AREA</h1>
<a class="navbar-item" href="https://www.baja123.com/HEALTHCARE_DOCTORS_DENTISTS_AND_HOSPITALS/page_2054379.html">Healthcare, Doctors, Dentists and Hospitals</a>
</div>
</div>
<hr class="navbar-divider">
<div class="columns">
<div class="column">
<h1 class="title is-6 is-mega-menu-title has-text-danger has-text-weight-bold">INSURANCE SERVICES IN BAJA</h1>
<div class="navbar-content">
<a class="navbar-item" href="https://www.baja123.com/AUTOMOBILE_INSURANCE_IN_MEXICO/page_2313289.html">Auto Insurance Services</a>
<a class="navbar-item" href="https://www.baja123.com/MEDICAL_INSURANCE_IN_MEXICO/page_2313292.html">Medical Insurance Services</a>
<a class="navbar-item" href="https://www.baja123.com/HOMEOWNER_INSURANCE_IN_MEXICO/page_2313290.html">Homeowners Insurance Services</a>
</div>
</div>
<div class="column">
<h1 class="title is-6 is-mega-menu-title has-text-danger has-text-weight-bold">PETS AND VETS</h1>
<div class="navbar-content">
<a class="navbar-item" href="https://www.baja123.com/MOVING_PETS_INTO_MEXICO/page_2058791.html">Bring your Pet to the Rosarito Area</a>
</div>
</div>
<div class="column">
<h1 class="title is-6 is-mega-menu-title has-text-danger has-text-weight-bold">PROFESSIONAL SERVICES IN BAJA</h1>
<div class="navbar-content">
<a class="navbar-item" href="https://www.baja123.com/IMMIGRATION_SERVICES_IN_THE_ROSARITO_BEACH_AREA/page_1681440.html">Immigration Services</a>
<a class="navbar-item" href="https://www.baja123.com/MAIL_SERVICE_IN_ROSARITO_BEACH/page_2522113.html">Mail Services</a>
<a class="navbar-item" href="https://www.baja123.com/UTILITIES_AND_SERVICES_IN_BAJA_Bill_Paying_Service/page_2522340.html">Bill Paying Services</a>
<a class="navbar-item" href="https://www.baja123.com/LEGAL_SERVICES_IN_MEXICO/page_2313260.html">Legal Services</a>
<a class="navbar-item" href="https://www.baja123.com/ACCOUNTING_IN_MEXICO/page_2313261.html">Accounting Services</a>
<a class="navbar-item" href="https://www.baja123.com/STORAGE_SERVICES_IN_THE_ROSARITO_BEACH_AREA/page_2645216.html">Storage Services</a>
<a class="navbar-item" href="https://www.baja123.com/MOVING_SERVICES_IN_THE_ROSARITO_BEACH_AREA/page_2645197.html">Moving Services</a>
<a class="navbar-item" href="https://www.baja123.com/CLOSING_SERVICES_FOR_BAJA_REAL_ESTATE/page_2645211.html">Closing Services</a>
<a class="navbar-item" href="https://www.baja123.com/PROPERTY_MANAGEMENT_IN_MEXICO/page_2313213.html">Property Management</a>
</div>
</div>
<div class="column">
<h1 class="title is-6 is-mega-menu-title has-text-danger has-text-weight-bold">TRANSPORTATION SERVICES</h1>
<a class="navbar-item" href="https://www.baja123.com/GETTING_AROUND_IN_THE_ROSARITO_BEACH_AREA/page_2313801.html">Transportation in Rosarito Beach</a>
</div>
</div>
<hr class="navbar-divider">
<div class="column">
<h1 class="title is-6 is-mega-menu-title has-text-danger has-text-weight-bold">SHOPPING IN THE ROSARITO AREA</h1>
<a class="navbar-item" href="https://www.baja123.com/BUYING_FOOD_IN_MEXICO/page_2313807.html">Supermarkets & Convenience Stores</a>
<a class="navbar-item" href="https://www.baja123.com/BUYING_HOUSEHOLD_FURNISHINGS_IN_MEXICO/page_2313809.html">Furniture & Appliances</a>
</div>
</div>
</div>
</div>
<div class="column">
<div class="navbar-content">
<div class="navbar-item has-dropdown is-hoverable is-boxed">
<div class="navbar-link">
SELLERS & BUYERS
</div>
<div id="moreDropdown" class="navbar-dropdown is-boxed">
<a class="navbar-item" href="https://www.baja123.com/BAJA_REAL_ESTATE/page_2493056.html">
<div class="level is-mobile">
<div class="level-left">
<div class="level-item">
<p>
<strong>Baja Real Estate</strong>
<br>
<small>Click Here!</small>
</p>
</div>
</div>
<div class="level-right">
<div class="level-item">
<span class="icon">
<i class="fa fa-search "></i>
</span>
</div>
</div>
</div>
<a class="navbar-item" href="https://www.baja123.com/LIST_YOUR_ROSARITO_BEACH_PROPERTY/page_2198558.html">
<div class="level is-mobile">
<div class="level-left">
<div class="level-item">
<p>
<strong>List Your Property</strong>
<br>
<small>Click Here!</small>
</p>
</div>
</div>
<div class="level-right">
<div class="level-item">
<span class="icon">
<i class="fa fa-usd"></i>
</span>
</div>
</div>
</div>
<a class="navbar-item" href="https://www.baja123.com/Newsletter/page_2517204.html">
<div class="level is-mobile">
<div class="level-left">
<div class="level-item">
<p>
<strong>Hot Property Alert</strong>
<br>
<small>Click Here!</small>
</p>
</div>
</div>
<div class="level-right">
<div class="level-item">
<span class="icon">
<i class="fa fa-bullhorn"></i>
</span>
</div>
</div>
</div>
<a class="navbar-item" href="https://www.baja123.com/MEXICO_BUYERS_GUIDE/page_2609247.html">
<div class="level is-mobile">
<div class="level-left">
<div class="level-item">
<p>
<strong>Buyer's Guide</strong>
<br>
<small>Click Here!</small>
</p>
</div>
</div>
<div class="level-right">
<div class="level-item">
<span class="icon">
<i class="fa fa-compass"></i>
</span>
</div>
</div>
</div>
</div>
</a>
</div>
</div>
</div>
<div class="navbar-item">
<a class="navbar-item" href="http://blog.baja123.com/" target="_blank">BLOG</a></div>
<div class="navbar-item">
<a class="navbar-item" href="https://www.baja123.com/CONTACT_US/page_1232095.html">CONTACT US</a></div>
</nav>
</body>
</html>
<script>
document.addEventListener('DOMContentLoaded', function () {
// Get all "navbar-burger" elements
var $navbarBurgers = Array.prototype.slice.call(document.querySelectorAll('.navbar-burger'), 0);
// Check if there are any nav burgers
if ($navbarBurgers.length > 0) {
// Add a click event on each of them
$navbarBurgers.forEach(function ($el) {
$el.addEventListener('click', function () {
// Get the target from the "data-target" attribute
var target = $el.dataset.target;
var $target = document.getElementById(target);
// Toggle the class on both the "navbar-burger" and the "navbar-menu"
$el.classList.toggle('is-active');
$target.classList.toggle('is-active');
});
});
}
});</script>
I need the dropdown menus to be collapsed by default on the mobile version, right now they are expanded by default. Your help will be greatly appreciated.
I have used bootstrap carousel to show 3 items on a row, and it works on a good way. But I want to show only one item for the small devices(mobiles or tablets). Can anyone help me please?
Here is the code I have used
<section id="services" class="service">
<div class="container">
<div class="row">
<div class="col-lg-12 text-center">
<h2 class="section-heading" style="font-family:daniel; font-weight:bolder; font-size:40px; color:#F9121A;">WorkShops & Tracks</h2>
<hr class="primary">
</div>
</div>
</div><br>
<div id="myCarousel" class="carousel slide" data-ride="carousel" >
<div class="container">
<div class="row">
<!-- Indicators -->
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<div class="col-lg-4 col-md-4 text-center">
<div class="service-box">
<img src="img/img.jpg" class="text-primary sr-icons" width="200px" height="150px">
<h3 style="color:#F9121A;"></h3>
<p class="text-muted" >
</p>
Show Details
</div>
</div>
<div class="col-lg-4 col-md-4 text-center">
<div class="service-box">
<img src="img.jpg" class="text-primary sr-icons" width="200px" height="150px">
<h3 style="color:#F9121A;"></h3>
<p class="text-muted" >
</p>
Show Details
</div>
</div>
<div class="col-lg-4 col-md-4 text-center">
<div class="service-box">
<img src="img.jpg" class="text-primary sr-icons" width="200px" height="150px"><br><br>
<h3 style="color:#F9121A;"></h3>
<p class="text-muted" >
</p>
Show Details
</div>
</div>
</div>
<div class="item">
<div class="col-lg-4 col-md-4 text-center">
<div class="service-box">
<img src="img.jpg" class="text-primary sr-icons" width="200px" height="150px">
<h3 style="color:#F9121A;"></h3>
<p class="text-muted" >
</p>
Show Details
</div>
</div>
<div class="col-lg-4 col-md-4 text-center">
<div class="service-box">
<img src="img.jpg" class="text-primary sr-icons" width="200px" height="150px">
<h3 style="color:#F9121A;"></h3>
<p class="text-muted" >
</p>
Show Details
</div>
</div>
<div class="col-lg-4 col-md-4 text-center">
<div class="service-box">
<img src="img.jpg" class="text-primary sr-icons" width="200px" height="150px">
<h3 style="color:#F9121A;"></h3>
<p class="text-muted" >
</p>
Show Details
</div>
</div>
</div>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
</section>
I would use a media query with javascript.
https://www.sitepoint.com/javascript-media-queries/
I am trying to open each div under their respective parent div, but my code opens up each div under the first image, where no one can see. I feel i am using position wrong?
.collapse {
position: relative;
bottom: 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<section class="">
<div class="container">
<div class="row">
<a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
<div class="col-md-4 clickable">
<img src="https://placeimg.com/640/480/arch" class="img-responsive">
</div>
</a>
<a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseSecond" aria-expanded="true" aria-controls="collapseSecond">
<div class="col-md-4 clickable">
<img src="https://placeimg.com/640/480/nature" class="img-responsive">
</div>
</a>
<a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseThird" aria-expanded="true" aria-controls="collapseThird">
<div class="col-md-4 clickable">
<img src="https://placeimg.com/640/480/tech" alt="" class="img-responsive">
</div>
</a>
<div class="col-md-4">
<img src="" class="img-responsive">
</div>
<div class="col-md-4">
<img src="" alt="" class="img-responsive">
</div>
<div class="col-md-4">
<img src="" alt="" class="img-responsive">
</div>
</div>
</div>
<div class="container">
<div id="collapseOne" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne">
<div class="row">
<div class="container">
<div class="col-sm-2">
<img src="https://placeimg.com/20/20/any/sepia" alt="">
</div>
<div class="col-sm-2">
<img src="https://placeimg.com/20/20/any" alt="">
</div>
</div>
</div>
</div>
</div>
<div id="collapseSecond" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingSecond">
<div class="row">
<div class="container">
<div class="col-sm-2">
<img src="https://placeimg.com/20/20/nature/sepia" alt="">
</div>
<div class="col-sm-2">
<img src="https://placeimg.com/20/20/animals/grayscale" alt="">
</div>
</div>
</div>
</div>
<div id="collapseThird" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThird">
<div class="row">
<div class="container">
<div class="col-sm-2">
<img src="https://placeimg.com/20/20/any/sepia" alt="">
</div>
<div class="col-sm-2">
<img src="https://placeimg.com/20/20/any" alt="">
</div>
</div>
</div>
</div>
</section>
just put the collapsable divs inside the col-md-4 divs
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<section class="">
<div class="container">
<div class="row">
<a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
<div class="col-md-4 clickable">
<img src="https://placeimg.com/640/480/arch" class="img-responsive">
</div>
</a>
<a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseSecond" aria-expanded="true" aria-controls="collapseSecond">
<div class="col-md-4 clickable">
<img src="https://placeimg.com/640/480/nature" class="img-responsive">
</div>
</a>
<a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseThird" aria-expanded="true" aria-controls="collapseThird">
<div class="col-md-4 clickable">
<img src="https://placeimg.com/640/480/tech" alt="" class="img-responsive">
</div>
</a>
<div class="col-md-4">
<img src="" class="img-responsive">
<div id="collapseOne" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne">
<div class="row">
<div class="container">
<div class="col-sm-2">
<img src="https://placeimg.com/20/20/any/sepia" alt="">
</div>
<div class="col-sm-2">
<img src="https://placeimg.com/20/20/any" alt="">
</div>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<img src="" alt="" class="img-responsive">
<div id="collapseSecond" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingSecond">
<div class="row">
<div class="container">
<div class="col-sm-2">
<img src="https://placeimg.com/20/20/nature/sepia" alt="">
</div>
<div class="col-sm-2">
<img src="https://placeimg.com/20/20/animals/grayscale" alt="">
</div>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<img src="" alt="" class="img-responsive">
<div id="collapseThird" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThird">
<div class="row">
<div class="container">
<div class="col-sm-2">
<img src="https://placeimg.com/20/20/any/sepia" alt="">
</div>
<div class="col-sm-2">
<img src="https://placeimg.com/20/20/any" alt="">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="container">
</div>
</section>
I'm currently struggling to figure out why the navigation tabs, do not scroll to the specified sections for one page site. Initially I assumed that the issue may have been result of simple syntax error, but from my perspective it seems perfectly fine. Below I have included minimal copy of code from my index.html. I would really appreciate, if some could let me know what the problem & solution could be. Thanks in advance.
<!-- Navigation -->
<header class="header scrolling-header">
<nav id="nav" class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container clearfix">
<a class="toggle-button visible-xs-block" data-toggle="collapse" data-target="#navbar-collapse">
<i class="fa fa-navicon"></i>
</a>
<a class="navbar-brand scroll" href="index.html">
<img class="normal-logo " src="img/logo.png" alt="logo" />
<img class="scroll-logo hidden-xs" src="img/logo-dark.png" alt="logo" />
</a>
<div class="right-nav-block pull-right clearfix">
<div class="navbar-collapse collapse floated" id="navbar-collapse">
<ul class="main-menu nav navbar-nav clearfix navbar-with-inside vcenter">
<li class="">Services
</li>
<li class="">Work
</li>
<li class="">About
</li>
<li class="">Quote
</li>
<li class="">
Contact
<div class="wrap-inside-nav">
<div class="inside-col">
<ul class="inside-nav">
<li>Contact 1
</li>
<li>Contact 2
</li>
<li>Contact 3
</li>
</ul>
</div>
</div>
</li>
<li class=""><i class="fa fa-twitter"></i>
</li>
<li class=""><i class="fa fa-facebook"></i>
</li>
</ul>
<ul class="nav navbar-nav hidden-xs clearfix vcenter">
<li>
<a href="#" class="toggle-menu-button">
<div class="toggle-menu-button-icon">
</div>
</a>
</li>
<li class="no-hover">call us 1.800.12345
</li>
</ul>
</div>
</div>
</div>
</nav>
<div class="wrap-fixed-menu" id="fixedMenu">
<div class="top-items">
<a href="blog.html" class="top-menu-item menu-item">
<span class="subtitle">All The Latest</span>
<span class="title">Blog</span>
</a>
<a href="portfolio.html" class="top-menu-item menu-item">
<span class="subtitle">Awesome</span>
<span class="title">Portfolio</span>
</a>
</div>
<div class="bottom-items">
<a href="contact.html" class="bottom-menu-item menu-item">
<span class="subtitle">We Are Designers</span>
<span class="title">Contacts</span>
</a>
<div class="bottom-menu-item menu-item contact-info">
<div class="row">
<div class="col-md-12">
<i class="fa fa-home"></i>
<label>ADDRESS</label>
<p class="vcenter">746 Roberts Road Findlay, OH 45840</p>
</div>
<div class="col-md-12">
<i class="fa fa-phone"></i>
<label>PHONE</label>
<p class="vcenter">+201 126 216 88</p>
</div>
<div class="col-md-12">
<i class="fa fa-envelope"></i>
<label>EMAIL</label>
<p class="vcenter">support#CreativeBrick.com</p>
</div>
</div>
</div>
</div>
</div>
</header>
<!--./navigation -->
<!-- Slider header -->
<section class="section-header-slider">
</section>
<!-- Section intro -->
<section class="section-intro blue-dark ">
<div class="container dark-content">
<div class="row">
<div class="col-md-3 hidden-sm hidden-xs">
</div>
<div class="col-md-3 scrollme animateme" data-when="enter" data-from="0.5" data-to="0" data-crop="false" data-scale="1.5" data-opacity="0">
<div class="arrow hidden-sm hidden-xs">
<img src="img/arrow.png" alt="" />
</div>
<div class="intro-title">Intro</div>
</div>
<div class="col-md-5 col-sm-12">
<div class="intro-text">
</div>
<div class="under-intro-text">
</div>
</div>
</div>
</div>
</section>
<!-- Section intro 2 -->
<section class="section-intro-2 ">
<div class="container">
<div class="row">
</div>
</div>
</section>
<!-- ========================== -->
<!-- Section Services -->
<!-- ========================== -->
<section class="section-services">
<div class="container">
<div class="section-heading">
<div class="section-subtitle">creating awesomeness</div>
<div class="section-title">services we provide</div>
<div class="sep-element"></div>
</div>
</div>
<div class="wrap-services-tabs">
<div class="wrap-tabs">
</div>
<div class="wrap-tabs-content top-arrow-effect">
<div class="container">
<!-- Tab panes -->
<div class="tab-content">
<div class="tab-pane" id="support">
<div class="row">
<div class="col-md-10 col-md-offset-1 col-sm-12">
<div class="row">
<div class="col-md-12">
<h5 class="bold text-uppercase blue">Analytics details</h5>
<p>
TEXT HERE
</p>
<ul class="list list-round-check orange-list">
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="tab-pane active" id="responsive">
<div class="row">
<div class="col-md-12 col-sm-12">
<div class="row">
<div class="col-md-6 animateme scrollme" data-when="enter" data-from="0.75" data-to="0" data-opacity="0" data-translatex="-400">
<img src="img/sections/tab-image-1.png" alt="" />
</div>
<div class="col-md-6 animateme scrollme" data-when="enter" data-from="0.75" data-to="0" data-opacity="0" data-translatex="400">
<h5 class="bold text-uppercase blue">Analytics details</h5>
<p>
TEXT HERE
</p>
</div>
</div>
</div>
</div>
</div>
<div class="tab-pane" id="analytics">
<div class="row">
<div class="col-md-10 col-md-offset-1 col-sm-12">
<div class="row">
<div class="col-md-6">
<h5 class="bold text-uppercase blue">Analytics details</h5>
<p>
TEXT HERE
</p>
<ul class="list list-round-check orange-list">
</ul>
<div class="designations clearfix">
<div class="last-year"><span></span>last year</div>
<div class="this-year"><span></span>this year</div>
</div>
</div>
<div class="col-md-6">
<div class="graph-line" id="graph-line3"></div>
</div>
</div>
</div>
</div>
</div>
<div class="tab-pane" id="customizable">
<div class="row">
<div class="col-md-10 col-md-offset-1 col-sm-12">
<div class="row">
<div class="col-md-12">
<h5 class="bold text-uppercase blue">Analytics details</h5>
<p>
TEXT HERE
</p>
<ul class="list list-round-check orange-list">
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="tab-pane" id="multipurpose">
<div class="row">
<div class="col-md-10 col-md-offset-1 col-sm-12">
<div class="row">
<div class="col-md-12">
<h5 class="bold text-uppercase blue">Analytics details</h5>
<p>
TEXT HERE
</p>
<ul class="list list-round-check orange-list">
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="section-purchase orange-dark">
<div class="container dark-content">
<div class="row">
<div class="col-md-2 col-sm-3 text-right logo-block">
<img src="img/logo.png" alt="" />
<div>Creative Agency</div>
</div>
<div class="col-md-offset-1 col-md-6 col-sm-6">
<h3 class="bold">Drop us a line if you’d like to work with us</h3>
<p>We’re always looking for new talent so join our team now</p>
</div>
<div class="col-md-2 col-sm-3 text-right">
get in touch
</div>
</div>
</div>
</section>
<section class="section-skills">
<div class="feature-section dark dark-strong">
<div class="container dark-content">
<div class="row">
<div class="col-md-4">
<div class="feature-item text-right animateme scrollme" data-when="enter" data-from="0.95" data-to="0" data-opacity="0" data-translatex="-300">
<h5><span>01</span>Generate Ideas</h5>
<p>
TEXT HERE
</p>
</div>
<div class="feature-item feature-divider text-right animateme scrollme" data-when="enter" data-from="0.95" data-to="0" data-opacity="0" data-translatex="-300">
<div class="feature-divider-item"></div>
</div>
<div class="feature-item text-right animateme scrollme" data-when="enter" data-from="0.95" data-to="0" data-opacity="0" data-translatex="-300">
<h5><span>04</span>Launch & Deliver</h5>
<p>
TEXT HERE
</p>
</div>
</div>
<div class="col-md-4">
<div class="wrap-feature-content">
<img src="img/feature-background.png" alt="" />
<div class="feature-content">
<img src="img/logo-free.png" alt="" />
<div class="feature-text">
THE PROCESS
<span>We Follow</span>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="feature-item right-feature-item animateme scrollme" data-when="enter" data-from="0.95" data-to="0" data-opacity="0" data-translatex="300">
<h5>Preparing Briefs<span>02</span></h5>
<p>
TEXT HERE
</p>
</div>
<div class="feature-item right-feature-item feature-divider animateme scrollme" data-when="enter" data-from="0.95" data-to="0" data-opacity="0" data-translatex="300">
<div class="feature-divider-item"></div>
</div>
<div class="feature-item right-feature-item animateme scrollme" data-when="enter" data-from="0.95" data-to="0" data-opacity="0" data-translatex="300">
<h5>Project Development<span>03</span></h5>
<p>
TEXT HERE
</p>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- ========================== -->
<!-- Section trust -->
<!-- ========================== -->
<section class="section-trust-us clearfix">
<div class="trus-image">
<img src="img/sections/section-trust-us-image.png" alt="" />
</div>
<div class="container">
<div class="row">
<div class="col-md-offset-6 col-md-6">
<div class="section-heading">
<div class="section-title">why trust us</div>
<div class="section-subtitle">creating awesomeness</div>
</div>
</div>
<div class="col-md-offset-6 col-md-6" data-wow-duration="2s">
<div id="accordion-one" role="tablist" aria-multiselectable="true">
<div class="panel panel-default panel-alt-two">
<div class="panel-heading active" role="tab" id="headingOne">
<h5 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion-one" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
<span class="accordion-icon">
<span class="stacked-icon">
<i class="icon-bulb"></i>
</span>
</span>
TEXT HERE
</a>
</h5>
</div>
<div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
<div class="panel-body">
<p>
TEXT HERE
</p>
</div>
</div>
<div class="panel-heading" role="tab" id="headingTwo">
<h5 class="panel-title">
<a class="collapsed" data-toggle="collapse" data-parent="#accordion-one" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
<span class="accordion-icon">
<span class="stacked-icon">
<i class="icon-rocket"></i>
</span>
</span>
<b>TEXT HERE</b>
</a>
</h5>
</div>
<div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
<div class="panel-body">
<p>
TEXT HERE
</p>
</div>
</div>
<div class="panel-heading" role="tab" id="headingThree">
<h5 class="panel-title">
<a class="collapsed" data-toggle="collapse" data-parent="#accordion-one" href="#collapseThree" aria-expanded="false" aria-controls="collapseTwo">
<b>TEXT HERE</b>
<span class="accordion-icon">
<span class="stacked-icon">
<i class="icon-badge"></i>
</span>
</span>
</a>
</h5>
</div>
<div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
<div class="panel-body">
<p>
TEXT HERE
</p>
</div>
</div>
</div>
<!--panel-->
</div>
<!--accordion-->
</div>
</div>
</div>
</section>
You are missing id="works-section", etc.
The way it works is you have a page anchor like
Some Title
Then later in the markup, where you want to the link to jump to, you place a corresponding ID, like:
<section id="someID">…</section>.
Makes sense?
I am building a webpage using Twitter Bootstrap. I have a .box class where I put my content. The problem is, that on one of the pages where I have 2 boxes, one of them doesn't have the proper width of the container. The first box is wider than the second one and It doesn't look nice. I think that there will be a problem with an unclosed div or something like that, but I wasn't able to figure that out.
HTML
<!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">
<meta name="description" content="">
<meta name="author" content="">
<title>MG STAV - Reference</title>
<!-- Bootstrap Core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="css/business-casual.css" rel="stylesheet">
<link href="css/bootstrap-lightbox.css" rel="stylesheet">
<!-- Fonts -->
<link href="http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800" rel="stylesheet" type="text/css">
<link href="http://fonts.googleapis.com/css?family=Josefin+Slab:100,300,400,600,700,100italic,300italic,400italic,600italic,700italic" rel="stylesheet" type="text/css">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[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]-->
</head>
<body>
<div class="container text-center">
<img class="img-responsive brand-img" src="img/logo.png" alt="">
</div>
<!-- Navigation -->
<nav class="navbar navbar-default" role="navigation">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<!-- navbar-brand is hidden on larger screens, but visible when the menu is collapsed -->
<a class="navbar-brand" id="link" href="index.html">MG STAV stavební, spol. s r.o</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li>
<a id="link" href="index.html">Domů</a>
</li>
<li>
<a id="link" href="about.html">O společnosti</a>
</li>
<li>
<a id="link" href="reference.html">Reference</a>
</li>
<li>
<a id="link" href="contact.html">Kontakt</a>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
<div class="container">
<div class="row">
<div class="box">
<div class="col-lg-12">
<hr>
<h2 class="intro-text text-center">Naše
<strong>reference</strong>
</h2>
<hr>
</div>
<div class="col-md-5">
<img class="img-responsive img-border-left thumbnail" src="img/banner.jpg" alt="">
</div>
<div class="col-md-7">
<ul class="list-unordered list-reference">
<li>Stavba budovy sociálního zařízení rekreačního areálu Kristýna, Hrádek nad Nisou</li>
<li>Rekonstrukce bytového domu, Horní Počernice</li>
<li>Stavba RD, Stráž pod Ralskem</li>
<li>Stavba RD, Vratislavice nad Nisou</li>
<li>Rekonstrukce RD, Proseč nad Nisou</li>
<li>Rekonstrukce RD, Rychnov u Jablonce nad Nisou</li>
<li>Oprava výrobní haly, Jablonné v Podještědí</li>
<li>Rekontrukce bytového domu, Česká Lípa</li>
</ul>
</div>
<div class="clearfix"></div>
</div>
</div>
<div class="box">
<div class="row">
<div class="col-sm-12 text-center">
<hr>
<div class="galerie">
<ul class="intro-text text-center">
<li class="active">Rekonstrukce</li>
<li>Zemní práce</li>
<li>Rodinné domy</li>
</ul>
</div>
<hr>
</div>
</div>
<div class="tab-content">
<div class="tab-pane odstavec fade in active" id="rekonstrukce">
<div class="row">
<div class="col-sm-4 text-center">
<a href="#" class="thumbnail" data-toggle="modal" data-target="#lightbox">
<img class="img-responsive" src="img/rekonstrukce/pic1.jpg" alt="">
</a>
</div>
<div class="col-sm-4 text-center">
<a href="#" class="thumbnail" data-toggle="modal" data-target="#lightbox">
<img class="img-responsive" src="img/rekonstrukce/pic2.jpg" alt="">
</a>
</div>
<div class="col-sm-4 text-center">
<a href="#" class="thumbnail" data-toggle="modal" data-target="#lightbox">
<img class="img-responsive" src="img/rekonstrukce/pic3.jpg" alt="">
</a>
</div>
</div>
<div class="row">
<div class="col-sm-4 text-center">
<a href="#" class="thumbnail" data-toggle="modal" data-target="#lightbox">
<img class="img-responsive" src="img/rekonstrukce/pic4.jpg" alt="">
</a>
</div>
<div class="col-sm-4 text-center">
<a href="#" class="thumbnail" data-toggle="modal" data-target="#lightbox">
<img class="img-responsive" src="img/rekonstrukce/pic5.jpg" alt="">
</a>
</div>
<div class="col-sm-4 text-center">
<a href="#" class="thumbnail" data-toggle="modal" data-target="#lightbox">
<img class="img-responsive" src="img/rekonstrukce/pic6.jpg" alt="">
</a>
</div>
</div>
<div class="row">
<div class="col-sm-4 text-center">
<a href="#" class="thumbnail" data-toggle="modal" data-target="#lightbox">
<img class="img-responsive" src="img/rekonstrukce/pic7.jpg" alt="">
</a>
</div>
<div class="col-sm-4 text-center">
<a href="#" class="thumbnail" data-toggle="modal" data-target="#lightbox">
<img class="img-responsive" src="img/rekonstrukce/pic1.jpg" alt="">
</a>
</div>
<div class="col-sm-4 text-center">
<a href="#" class="thumbnail" data-toggle="modal" data-target="#lightbox">
<img class="img-responsive" src="img/rekonstrukce/pic9.jpg" alt="">
</a>
</div>
</div>
<div class="row">
<div class="col-sm-4 text-center">
<a href="#" class="thumbnail" data-toggle="modal" data-target="#lightbox">
<img class="img-responsive" src="img/rekonstrukce/pic10.jpg" alt="">
</a>
</div>
<div class="col-sm-4 text-center">
<a href="#" class="thumbnail" data-toggle="modal" data-target="#lightbox">
<img class="img-responsive" src="img/rekonstrukce/pic11.jpg" alt="">
</a>
</div>
</div>
</div>
<div class="tab-pane odstavec fade" id="rodinne_domy">
<div class="row">
<div class="col-sm-4 text-center">
<a href="#" class="thumbnail" data-toggle="modal" data-target="#lightbox">
<img class="img-responsive" src="img/rodinne_domy/pic1.jpg" alt="">
</a>
</div>
<div class="col-sm-4 text-center">
<a href="#" class="thumbnail" data-toggle="modal" data-target="#lightbox">
<img class="img-responsive" src="img/rodinne_domy/pic2.jpg" alt="">
</a>
</div>
<div class="col-sm-4 text-center">
<a href="#" class="thumbnail" data-toggle="modal" data-target="#lightbox">
<img class="img-responsive" src="img/rodinne_domy/pic3.jpg" alt="">
</a>
</div>
</div>
<div class="row">
<div class="col-sm-4 text-center">
<a href="#" class="thumbnail" data-toggle="modal" data-target="#lightbox">
<img class="img-responsive" src="img/rodinne_domy/pic4.jpg" alt="">
</a>
</div>
<div class="col-sm-4 text-center">
<a href="#" class="thumbnail" data-toggle="modal" data-target="#lightbox">
<img class="img-responsive" src="img/rodinne_domy/pic5.jpg" alt="">
</a>
</div>
<div class="col-sm-4 text-center">
<a href="#" class="thumbnail" data-toggle="modal" data-target="#lightbox">
<img class="img-responsive" src="img/rodinne_domy/pic6.jpg" alt="">
</a>
</div>
</div>
<div class="row">
<div class="col-sm-4 text-center">
<a href="#" class="thumbnail" data-toggle="modal" data-target="#lightbox">
<img class="img-responsive" src="img/rodinne_domy/pic7.jpg" alt="">
</a>
</div>
<div class="col-sm-4 text-center">
<a href="#" class="thumbnail" data-toggle="modal" data-target="#lightbox">
<img class="img-responsive" src="img/rodinne_domy/pic8.jpg" alt="">
</a>
</div>
<div class="col-sm-4 text-center">
<a href="#" class="thumbnail" data-toggle="modal" data-target="#lightbox">
<img class="img-responsive" src="img/rodinne_domy/pic9.jpg" alt="">
</a>
</div>
</div>
<div class="row">
<div class="col-sm-4 text-center">
<a href="#" class="thumbnail" data-toggle="modal" data-target="#lightbox">
<img class="img-responsive" src="img/rodinne_domy/pic10.jpg" alt="">
</a>
</div>
<div class="col-sm-4 text-center">
<a href="#" class="thumbnail" data-toggle="modal" data-target="#lightbox">
<img class="img-responsive" src="img/rodinne_domy/pic11.jpg" alt="">
</a>
</div>
<div class="col-sm-4 text-center">
<a href="#" class="thumbnail" data-toggle="modal" data-target="#lightbox">
<img class="img-responsive" src="img/rodinne_domy/pic12.jpg" alt="">
</a>
</div>
</div>
<div class="row">
<div class="col-sm-4 text-center">
<a href="#" class="thumbnail" data-toggle="modal" data-target="#lightbox">
<img class="img-responsive" src="img/rodinne_domy/pic13.jpg" alt="">
</a>
</div>
<div class="col-sm-4 text-center">
<a href="#" class="thumbnail" data-toggle="modal" data-target="#lightbox">
<img class="img-responsive" src="img/rodinne_domy/pic14.jpg" alt="">
</a>
</div>
</div>
</div>
<div class="tab-pane odstavec fade" id="zemni_prace">
<div class="row">
<div class="col-sm-4 text-center">
<a href="#" class="thumbnail" data-toggle="modal" data-target="#lightbox">
<img class="img-responsive" src="img/zemni_prace/pic1.jpg" alt="">
</a>
</div>
<div class="col-sm-4 text-center">
<a href="#" class="thumbnail" data-toggle="modal" data-target="#lightbox">
<img class="img-responsive" src="img/zemni_prace/pic2.jpg" alt="">
</a>
</div>
<div class="col-sm-4 text-center">
<a href="#" class="thumbnail" data-toggle="modal" data-target="#lightbox">
<img class="img-responsive" src="img/zemni_prace/pic3.jpg" alt="">
</a>
</div>
</div>
<div class="row">
<div class="col-sm-4 text-center">
<a href="#" class="thumbnail" data-toggle="modal" data-target="#lightbox">
<img class="img-responsive" src="img/zemni_prace/pic4.jpg" alt="">
</a>
</div>
<div class="col-sm-4 text-center">
<a href="#" class="thumbnail" data-toggle="modal" data-target="#lightbox">
<img class="img-responsive" src="img/zemni_prace/pic5.jpg" alt="">
</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="lightbox" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
<div class="modal-dialog">
<button type="button" class="close hidden" data-dismiss="modal" aria-hidden="true">×</button>
<div class="modal-content">
<div class="modal-body">
<img src="" alt="" />
</div>
</div>
</div>
</div>
<footer>
<div class="container">
<div class="row">
<div class="col-lg-12 text-center">
<p>Copyright © www.mgstav.cz</p>
</div>
</div>
</div>
</footer>
<!-- jQuery -->
<script src="js/jquery.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="js/bootstrap.min.js"></script>
<script src="js/bootstrap-lightbox.js"></script>
</body>
</html>
Here is the webpage, so you could look at what it does: http://www.mgstav.cz/reference.html
I noticed that the footer acts differently than on the other subpages too. I think that the container doesn't apply on the whole content, but I don't know why.
Your "row" and "box" classes are reversed in this section of your code:
<div class="box"><!-- should be "row" -->
<div class="row"><!-- should be "box" -->
<div class="col-sm-12 text-center">
<hr>
<div class="galerie">
<ul class="intro-text text-center">
<li class="active">Rekonstrukce</li>
<li>Zemní práce</li>
<li>Rodinné domy</li>
</ul>
</div>
<hr>
</div>
</div>
And the padding appearing below your home page footer (which is not applied on your sub pages) is coming from a rule in your 'bootstrap-lightbox.css' file:
body {
padding: 30px 0px; /* applies top and bottom padding of 30px */
overflow-y: auto !important;
}
UPDATE: Padding Issue Fix When Modal Window Opens
The easiest way to fix this issue is to override the inline styles I mentioned in the comments below. Add the following style rule to your 'business-casual.css' file:
body.modal-open,
.modal-open .modal {
padding-right: 0 !important;
}