I have an issue that when language changes the all elements changes direction from ltr to rtl and float command also changed from left to right direction.
is there any way that ltr changes but float stay right?
please view images below
when float left
when float right
the original language is English which is set as dir="ltr" but Arabic set as "rtl" and these elements appear as rtl when floated in Arabic, so how can I fix it?
.flip-clock-divider {
float: left;
display: inline-block;
position: relative;
width: 6px;
height: 50px;
}
.flip-clock-wrapper ul {
position: relative;
float: right;
margin: 1px;
width: 30px;
height: 50px;
font-size: 30px;
font-weight: bold;
line-height: 50px;
border-radius: 5px;
background: #d3d3d3;
}
<html dir="rtl" lang="ar">
<div id="ab__deal_of_the_day_141" class="flip-clock-wrapper">
<span class="flip-clock-divider days"><span class="flip-clock-label">days</span></span>
<ul class="flip ">
<li class="flip-clock-before">
<a href="#">
<div class="up">
<div class="shadow"></div>
<div class="inn">2</div>
</div>
<div class="down">
<div class="shadow"></div>
<div class="inn">2</div>
</div>
</a>
</li>
<li class="flip-clock-active">
<a href="#">
<div class="up">
<div class="shadow"></div>
<div class="inn">3</div>
</div>
<div class="down">
<div class="shadow"></div>
<div class="inn">3</div>
</div>
</a>
</li>
</ul>
<ul class="flip ">
<li class="flip-clock-before">
<a href="#">
<div class="up">
<div class="shadow"></div>
<div class="inn">7</div>
</div>
<div class="down">
<div class="shadow"></div>
<div class="inn">7</div>
</div>
</a>
</li>
<li class="flip-clock-active">
<a href="#">
<div class="up">
<div class="shadow"></div>
<div class="inn">8</div>
</div>
<div class="down">
<div class="shadow"></div>
<div class="inn">8</div>
</div>
</a>
</li>
</ul>
<span class="flip-clock-divider hours"><span class="flip-clock-label">hours</span><span class="flip-clock-dot top"></span><span class="flip-clock-dot bottom"></span></span>
<ul class="flip ">
<li class="flip-clock-before">
<a href="#">
<div class="up">
<div class="shadow"></div>
<div class="inn">1</div>
</div>
<div class="down">
<div class="shadow"></div>
<div class="inn">1</div>
</div>
</a>
</li>
<li class="flip-clock-active">
<a href="#">
<div class="up">
<div class="shadow"></div>
<div class="inn">1</div>
</div>
<div class="down">
<div class="shadow"></div>
<div class="inn">1</div>
</div>
</a>
</li>
</ul>
<ul class="flip play">
<li class="flip-clock-before">
<a href="#">
<div class="up">
<div class="shadow"></div>
<div class="inn">5</div>
</div>
<div class="down">
<div class="shadow"></div>
<div class="inn">5</div>
</div>
</a>
</li>
<li class="flip-clock-active">
<a href="#">
<div class="up">
<div class="shadow"></div>
<div class="inn">4</div>
</div>
<div class="down">
<div class="shadow"></div>
<div class="inn">4</div>
</div>
</a>
</li>
</ul>
<span class="flip-clock-divider minutes"><span class="flip-clock-label">minutes</span><span class="flip-clock-dot top"></span><span class="flip-clock-dot bottom"></span></span>
<ul class="flip play">
<li class="flip-clock-before">
<a href="#">
<div class="up">
<div class="shadow"></div>
<div class="inn">1</div>
</div>
<div class="down">
<div class="shadow"></div>
<div class="inn">1</div>
</div>
</a>
</li>
<li class="flip-clock-active">
<a href="#">
<div class="up">
<div class="shadow"></div>
<div class="inn">0</div>
</div>
<div class="down">
<div class="shadow"></div>
<div class="inn">0</div>
</div>
</a>
</li>
</ul>
<ul class="flip play">
<li class="flip-clock-before">
<a href="#">
<div class="up">
<div class="shadow"></div>
<div class="inn">1</div>
</div>
<div class="down">
<div class="shadow"></div>
<div class="inn">1</div>
</div>
</a>
</li>
<li class="flip-clock-active">
<a href="#">
<div class="up">
<div class="shadow"></div>
<div class="inn">0</div>
</div>
<div class="down">
<div class="shadow"></div>
<div class="inn">0</div>
</div>
</a>
</li>
</ul>
<span class="flip-clock-divider seconds"><span class="flip-clock-label">seconds</span><span class="flip-clock-dot top"></span><span class="flip-clock-dot bottom"></span></span>
<ul class="flip play">
<li class="flip-clock-before">
<a href="#">
<div class="up">
<div class="shadow"></div>
<div class="inn">3</div>
</div>
<div class="down">
<div class="shadow"></div>
<div class="inn">3</div>
</div>
</a>
</li>
<li class="flip-clock-active">
<a href="#">
<div class="up">
<div class="shadow"></div>
<div class="inn">2</div>
</div>
<div class="down">
<div class="shadow"></div>
<div class="inn">2</div>
</div>
</a>
</li>
</ul>
<ul class="flip play">
<li class="flip-clock-before">
<a href="#">
<div class="up">
<div class="shadow"></div>
<div class="inn">3</div>
</div>
<div class="down">
<div class="shadow"></div>
<div class="inn">3</div>
</div>
</a>
</li>
<li class="flip-clock-active">
<a href="#">
<div class="up">
<div class="shadow"></div>
<div class="inn">2</div>
</div>
<div class="down">
<div class="shadow"></div>
<div class="inn">2</div>
</div>
</a>
</li>
</ul>
</div>
</html>
is it possible to float it initial?
Related
So I am trying to create a footer and I have a couple of links featured however the default text-decoration on the links is weirdly not responding to text-decoration none. All the other text-decoration options are working except the text-decoration none. I have even tried making changes to the bootstrap.min.css file as I saw it suggested as a solution however it hasn't worked.
.custom-footer{
background-color: tomato;
}
.list-items{
list-style: none;
margin: 0;
padding: 0;
}
.company-item{
text-decoration: none;
color: inherit;
}
<footer>
<div class="container-fluid custom-footer">
<div class="row footer-logo">
<div class="col"><img src="/images/Logo_White.png" alt="" width="150px">
</div>
</div>
<div class="row">
<div class=" col footer-column px-4">
<h6>Company</h6>
<ul class="list-items">
<li class="company-item">Become a rider</li>
<li class="company-item">Our Story</li>
<li class="company-item">Our Team</li>
<li class="company-item">Contacts</li>
<li class="company-item">Partners</li>
</ul>
</div>
<div class="col footer-column">
<h6>Product</h6>
<ul class="list-items">
<li class="product-item">Ride safely</li>
<li class="product-item">How it works</li>
<li class="product-item">testimonials</li>
</ul>
</div>
<div class="col footer-column contacts">
<p>+254 111 220 055</p>
<p>info#tissboda.com</p>
<p>Nairobi, Kenya</p>
</div>
</div>
<div class="row">
<div class="col px-4">
<ul class="list-items">
<li class="social-icons"><i class="fab fa-facebook-square"></i></i></li>
<li class="social-icons"><i class="fab fa-twitter-square"></i></i></li>
<li class="social-icons"><i class="fab fa-instagram-square"></i></i></li>
</ul>
</div>
<div class="col"></div>
<div class="col">
<img src="/images/google-play-badge.png" alt="" width="150px">
</div>
</div>
<div class="row">
<div class="col px-4">
<p>©2021 TissBoda. All Rights Reserved</p>
</div>
<div class="col"></div>
<div class="col d-flex">
<ul class="list-items">
<li class="legal-link">Privacy</li>
<li class="legal-link">Terms</li>
</ul>
</div>
</div>
</div>
</footer>
'none' option.
Give it to the a-element
.company-item a {
text-decoration: none;
color: inherit;
}
This would be your code:
.custom-footer{
background-color: tomato;
}
.list-items{
list-style: none;
margin: 0;
padding: 0;
}
.company-item a{
text-decoration: none;
color: inherit;
}
<footer>
<div class="container-fluid custom-footer">
<div class="row footer-logo">
<div class="col"><img src="/images/Logo_White.png" alt="" width="150px">
</div>
</div>
<div class="row">
<div class=" col footer-column px-4">
<h6>Company</h6>
<ul class="list-items">
<li class="company-item">Become a rider</li>
<li class="company-item">Our Story</li>
<li class="company-item">Our Team</li>
<li class="company-item">Contacts</li>
<li class="company-item">Partners</li>
</ul>
</div>
<div class="col footer-column">
<h6>Product</h6>
<ul class="list-items">
<li class="product-item">Ride safely</li>
<li class="product-item">How it works</li>
<li class="product-item">testimonials</li>
</ul>
</div>
<div class="col footer-column contacts">
<p>+254 111 220 055</p>
<p>info#tissboda.com</p>
<p>Nairobi, Kenya</p>
</div>
</div>
<div class="row">
<div class="col px-4">
<ul class="list-items">
<li class="social-icons"><i class="fab fa-facebook-square"></i></i></li>
<li class="social-icons"><i class="fab fa-twitter-square"></i></i></li>
<li class="social-icons"><i class="fab fa-instagram-square"></i></i></li>
</ul>
</div>
<div class="col"></div>
<div class="col">
<img src="/images/google-play-badge.png" alt="" width="150px">
</div>
</div>
<div class="row">
<div class="col px-4">
<p>©2021 TissBoda. All Rights Reserved</p>
</div>
<div class="col"></div>
<div class="col d-flex">
<ul class="list-items">
<li class="legal-link">Privacy</li>
<li class="legal-link">Terms</li>
</ul>
</div>
</div>
</div>
</footer>
You have to use company-item a when styling because links are styled by default so you have to call directly to that element. Also, added !important; for good measures.
.custom-footer{
background-color: tomato;
}
.list-items{
list-style: none;
margin: 0;
padding: 0;
}
.company-item a {
text-decoration: none !important;
color: inherit;
}
<footer>
<div class="container-fluid custom-footer">
<div class="row footer-logo">
<div class="col"><img src="/images/Logo_White.png" alt="" width="150px">
</div>
</div>
<div class="row">
<div class=" col footer-column px-4">
<h6>Company</h6>
<ul class="list-items">
<li class="company-item">Become a rider</li>
<li class="company-item">Our Story</li>
<li class="company-item">Our Team</li>
<li class="company-item">Contacts</li>
<li class="company-item">Partners</li>
</ul>
</div>
<div class="col footer-column">
<h6>Product</h6>
<ul class="list-items">
<li class="product-item">Ride safely</li>
<li class="product-item">How it works</li>
<li class="product-item">testimonials</li>
</ul>
</div>
<div class="col footer-column contacts">
<p>+254 111 220 055</p>
<p>info#tissboda.com</p>
<p>Nairobi, Kenya</p>
</div>
</div>
<div class="row">
<div class="col px-4">
<ul class="list-items">
<li class="social-icons"><i class="fab fa-facebook-square"></i></i></li>
<li class="social-icons"><i class="fab fa-twitter-square"></i></i></li>
<li class="social-icons"><i class="fab fa-instagram-square"></i></i></li>
</ul>
</div>
<div class="col"></div>
<div class="col">
<img src="/images/google-play-badge.png" alt="" width="150px">
</div>
</div>
<div class="row">
<div class="col px-4">
<p>©2021 TissBoda. All Rights Reserved</p>
</div>
<div class="col"></div>
<div class="col d-flex">
<ul class="list-items">
<li class="legal-link">Privacy</li>
<li class="legal-link">Terms</li>
</ul>
</div>
</div>
</div>
</footer>
.custom-footer{
background-color: tomato;
}
.list-items{
list-style: none;
margin: 0;
padding: 0;
}
.company-item a{
text-decoration: none;
color: inherit;
}
<footer>
<div class="container-fluid custom-footer">
<div class="row footer-logo">
<div class="col"><img src="/images/Logo_White.png" alt="" width="150px">
</div>
</div>
<div class="row">
<div class=" col footer-column px-4">
<h6>Company</h6>
<ul class="list-items">
<li class="company-item">Become a rider</li>
<li class="company-item">Our Story</li>
<li class="company-item">Our Team</li>
<li class="company-item">Contacts</li>
<li class="company-item">Partners</li>
</ul>
</div>
<div class="col footer-column">
<h6>Product</h6>
<ul class="list-items">
<li class="product-item">Ride safely</li>
<li class="product-item">How it works</li>
<li class="product-item">testimonials</li>
</ul>
</div>
<div class="col footer-column contacts">
<p>+254 111 220 055</p>
<p>info#tissboda.com</p>
<p>Nairobi, Kenya</p>
</div>
</div>
<div class="row">
<div class="col px-4">
<ul class="list-items">
<li class="social-icons"><i class="fab fa-facebook-square"></i></i></li>
<li class="social-icons"><i class="fab fa-twitter-square"></i></i></li>
<li class="social-icons"><i class="fab fa-instagram-square"></i></i></li>
</ul>
</div>
<div class="col"></div>
<div class="col">
<img src="/images/google-play-badge.png" alt="" width="150px">
</div>
</div>
<div class="row">
<div class="col px-4">
<p>©2021 TissBoda. All Rights Reserved</p>
</div>
<div class="col"></div>
<div class="col d-flex">
<ul class="list-items">
<li class="legal-link">Privacy</li>
<li class="legal-link">Terms</li>
</ul>
</div>
</div>
</div>
</footer>
i think the problem was it was selecting the list items and not the links
anyway this works
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.
How to make a layout on bootstrap4, and then I can not. Thank you in advance!
<div class="col-8">
<a href="#">
<div class="card">
<img class="card-img" src="img.jpg">
</div>
</a>
</div>
<div class="col-4">
<a href="#">
<div class="card">
<img class="card-img" src="img.jpg">
</div>
</a>
</div>
<div class="col-4">
<a href="#">
<div class="card">
<img class="card-img" src="img.jpg">
</div>
</a>
</div>
<div class="col-4">
<a href="#">
<div class="card">
<img class="card-img" src="img.jpg">
</div>
</a>
</div>
<div class="col-4">
<a href="#">
<div class="card">
<img class="card-img" src="img.jpg">
</div>
</a>
</div>
<div class="col-4">
<a href="#">
<div class="card">
<img class="card-img" src="img.jpg">
</div>
</a>
</div>
<div class="col-4">
<a href="#">
<div class="card">
<img class="card-img" src="img.jpg">
</div>
</a>
</div>
<div class="col-4">
<a href="#">
<div class="card">
<img class="card-img" src="img.jpg">
</div>
</a>
</div>
<div class="col-4">
<a href="#">
<div class="card">
<img class="card-img" src="img.jpg">
</div>
</a>
</div>
<div class="col-4">
<a href="#">
<div class="card">
<img class="card-img" src="img.jpg">
</div>
</a>
</div>
Now it goes like this
And need to look like this
Using float: left; styling on the columns will give you this effect.
Below I changed the <img> tag to a <div> with a border to give the same visuals since I don't have img.jpg. If you swap those back in it should still work.
I added the styling to the col classes by just adding:
.col-4, .col-8{
float:left;
}
Though, I would recommend adding a class to the outer div's with this styling instead of pigy-backing on bootstrap's classes.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>title</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css"
integrity="sha384-Smlep5jCw/wG7hdkwQ/Z5nLIefveQRIY9nfy6xoR1uRYBtpZgI6339F5dgvm/e9B" crossorigin="anonymous">
</head>
<body>
<style>
.small-card {
height: 60px;
width: 100%;
border: solid 2px #333;
}
.large-card{
height: 120px;
width: 100%;
border: solid 2px #333;
}
.col-4, .col-8{
float:left;
}
</style>
<div class="col-8">
<a href="#">
<div class="card">
<div class="large-card"></div>
</div>
</a>
</div>
<div class="col-4">
<a href="#">
<div class="card">
<div class="small-card"></div>
</div>
</a>
</div>
<div class="col-4">
<a href="#">
<div class="card">
<div class="small-card"></div>
</div>
</a>
</div>
<div class="col-4">
<a href="#">
<div class="card">
<div class="small-card"></div>
</div>
</a>
</div>
<div class="col-4">
<a href="#">
<div class="card">
<div class="small-card"></div>
</div>
</a>
</div>
<div class="col-4">
<a href="#">
<div class="card">
<div class="small-card"></div>
</div>
</a>
</div>
<div class="col-4">
<a href="#">
<div class="card">
<div class="small-card"></div>
</div>
</a>
</div>
<div class="col-4">
<a href="#">
<div class="card">
<div class="small-card"></div>
</div>
</a>
</div>
<div class="col-4">
<a href="#">
<div class="card">
<div class="small-card"></div>
</div>
</a>
</div>
<div class="col-4">
<a href="#">
<div class="card">
<div class="small-card"></div>
</div>
</a>
</div>
</body>
</html>
I'm creating a website and I'm having some issues. I'm using my boss' 4k monitor to test if the my sticky footer is all the way at the bottom. And it's not. The weird thing is that the footer never changes how far down it is even if I change min-height: 100vh; to something higher.
Here's my HTML:
<body>
<div class="page">
<div class="contactandsocial">
<p class="phonenumbers">
Brockville - (613) 865-7733    
Cornwall - (343) 885-7733    
Kingston - (613) 817-7733    
Ottawa - (613) 454-7733
</p>
<form action="http://www.truespeed.ca/contact">
<input type="submit" value="Contact" class="contact" />
</form>
<form action="#">
<input type="submit" value="My Account" class="myaccount" />
</form>
<form action="http://webmail.truespeed.ca/">
<input type="submit" value="Webmail" class="webmail" />
</form>
</div>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="row">
<div class="navbar-header">
<a class="navbar-brand " style="margin-top: -15px; float: left;" href="#">
<img alt="Brand" class="hidden-xs pull-left" style="margin-left: -6px; margin-top: -1px;" src="Images/TrueInternet.png" height="89px" />
</a>
<button class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse">
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse navHeaderCollapse">
<ul class="nav navbar-nav">
<li>Home</li>
<li class="dropdown">Internet<span class="caret"></span>
<ul class="dropdown-menu">
<li>Cable</li>
<li>DSl</li>
<li>Wireless</li>
<li>Business Cable</li>
<li>Business DSL</li>
</ul>
</li>
<li class="dropdown">Phone<span class="caret"></span>
<ul class="dropdown-menu">
<li>Residential Phone</li>
<li>Business Phone</li>
<li>Transfers and Rates</li>
</ul>
</li>
<li>Android TV</li>
<li>Shaw Direct</li>
<li>Careers</li>
</ul>
</div>
</div>
</div>
</nav>
<div class="container">
<div class="row">
<div class="col-md-12">
<div id="trueSlider" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators carousel-indicators-numbers">
<li data-target="#trueSlider" data-slide-to="0"></li>
<li data-target="#trueSlider" data-slide-to="1"></li>
<li data-target="#trueSlider" data-slide-to="2"></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="Images/blank.png" class="img-responsive" alt="Promotions" />
<div class="carousel-caption">
<h1>Promotions!</h1>
</div>
</div>
<div class="item">
<img src="Images/blank.png" class="img-responsive" alt="Promotions" />
<div class="carousel-caption">
<h1>News and Alerts!</h1>
</div>
</div>
<div class="item">
<img src="Images/blank.png" class="img-responsive" alt="Promotions" />
<div class="carousel-caption">
<h1>Shaw Direct!</h1>
</div>
</div>
</div>
<a class="left carousel-control" href="#trueSlider" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#trueSlider" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
</div>
<div class="page-content">
<p>Test.Test.Test.Test.Test.Test.Test.Test.Test.Test.Test.Test.Test.Test.Test.Test.Test.Test.Test.Test.Test.Test.Test.Test.Test.Test.Test.Test.Test.Test.Test.Test.Test.Test.Test.Test.Test.Test.Test.Test.Test.Test.Test.Test.Test.Test.Test.Test.Test.Test.Test.Test.Test.Test.Test.Test.Test.Test.Test.Test.Test.Test.Test.Test.Test.Test.Test.Test.Test.Test.Test.Test.Test.Test.Test.Test.Test.Test.Test.Test.Test.Test.Test.Test.Test.Test.Test.Test.Test.Test.Test.Test.Test.Test.Test.Test.Test.Test.Test.Test.Test.Test.Test.Test.Test.Test.Test.Test.Test.Test.Test.Test.Test.Test.Test.Test.Test.Test.Test.Test.Test.Test.Test.Test.Test.Test.Test.Test.Test.Test.Test.Test.Test.Test.Test.Test.Test.Test.Test.Test.Test.Test.Test.Test.</p>
</div>
</div>
<footer>
<div class="container-fluid">
<div class="row">
<div class="col-md-2 footersocial">
<i class="hidden-xs fa fa-facebook-official fa-3x socialicons" aria-hidden="true"></i>
<i class="hidden-xs fa fa-twitter fa-3x socialicons" aria-hidden="true"></i>
<i class="hidden-xs fa fa-instagram fa-3x socialicons" aria-hidden="true"></i>
</div>
</div>
<div class="row footerlinks" style="margin-left: 15px; margin-top: 15px;">
<div class="col-xs-12 col-md-2 text-center">
<p>Privacy Policy</p>
</div>
<div class="col-xs-12 col-md-2 text-center">
<p>Terms of Service</p>
</div>
<div class="col-xs-12 col-md-2 text-center">
<p>Acceptable Use Policy</p>
</div>
<div class="col-xs-12 col-md-2 text-center">
<p>Warranty & Returns Policy</p>
</div>
<div class="col-xs-12 col-md-2 text-center">
<p>Third Party Copyright Notices</p>
</div>
<div class="col-xs-12 col-md-2 text-center">
<p style="text-align: center;">Terms of Service for Phone</p>
</div>
<div class="col-xs-12 col-md-12 text-center">
<p>Truespeed Internet Services Inc. 2014-2016, all rights reserved.</p>
</div>
</div>
</div>
</footer>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script src="https://use.fontawesome.com/42e4157b18.js"></script>
</body>
And my CSS:
.page {
display: flex;
flex-wrap: wrap;
flex-direction: column;
min-height: 100vh;
}
.page-content {
flex: 1;
width: auto;
}
html, body {
height: 100%;
width: auto;
}
footer {
background-color: #00AEFE;
height: auto;
}
footer p {
color: white;
}
Make sure that your <footer> has no padding or margin values:
footer {
background-color: #00AEFE;
height: auto;
margin: 0;
padding: 0;
}
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?