I have a mat-tab with two tabs.
enter image description here
Here is the code for the tabs:
<div style="background:#F9F9F9" id="myHeader">
<div
style="background: white; font-size: 10px;border: none;">
<div>
<mat-progress-bar mode="determinate" [value]="x"></mat-progress-bar>
</div>
<mat-tab-group dynamicHeight mat-align-tabs="center">
<mat-tab label="OVERVIEW" style="font-weight: 600;color: #88929e;">
<div class="container">
<div class="d-flex justify-content-between">
<span style="font-weight: 600;">Description</span>
<button style="background: none;border: none;color: #00A5FF;">
Share this Job
<i class="fa fa-share-alt"></i>
</button>
</div>
<div class="content py-3">
Buying or selling a car shouldn’t be difficult! That’s why here at carwow we are on a mission to change the way
people buy, sell or use a car by creating the world’s best online car marketplace. We're not all petrolheads -
just a highly driven (excuse the pun) scale-up with over 350 carwowers in the UK, Germany, Spain and Portugal .
Since starting our journey in 2011, we’ve grown to become one of the most trusted comparison sites with over 12
million users and a Trustpilot rating of 4.7. We are also very proud to be backed by some of Europe’s most
respected technology, marketplace and automotive investors.
</div>
<div class="d-flex justify-content-between">
<span style="font-weight: 600;">Working here</span>
</div>
<div class="content py-3">
At carwow, we aim to create a culture where our team can thrive no matter where or how they work. With hybrid
working (1-2 days in the office although more if you like), and a healthy home office budget of £500, we are
also open to looking at alternative working patterns to ensure carwowers can work in a way that works best for
them.
We’re also a curious bunch and benefit from a number of different training opportunities. We are big on
celebrating successes, working collaboratively and have found lots of ways to stay connected as a team both
virtually and in person.
With a team of over 25 different nationalities, we know a diverse and inclusive workforce creates a more
innovative company. We have work to do to get us where we’d like to be, but are working hard to get there and
have a number of key DE&I initiatives underway.
So, if you always aim to WOW through everything you do (check out more info about our values here), we’d love
you to join us on our journey.
</div>
<div class="d-flex justify-content-between">
<span style="font-weight: 600;">About the role</span>
</div>
<div class="content py-3">
This is an exciting and rare-to-find in-house role at the cutting edge of the digitisation of the automotive
industry.
This PR & Communications Manager role will offer fantastic opportunities for a collaborative, proactive and
effective communications pro, looking to put their own stamp on a leading brand in a transforming market.
The candidate will have the opportunity to manage partner agencies, be able to offer senior counsel and be a
curious and natural internal networker, spotting positive media opportunities and see them through to delivery.
Supported by a press officer, they will report to the Head of Communications, UK Trading Director and Chief
Operating Officer. HQ’d in sleek offices in Victoria, you’ll be provided with a choice of the latest kit needed
for remote and hybrid working
In this role you will:
<ul class="py-2">
<li>Create and execute UK consumer comms campaigns and activities to support the business objectives through
integrated communications channels including events and media relations.
</li>
<li>Handle a mix of consumer, broadcast, , reputation (CSR) media and be part of a team also managing
corporate and B2B comms.
</li>
<li>
Be the day-to-day contact for external PR agencies, overseeing campaign delivery, reporting and ROI.
</li>
<li>
Partnering with Head of Comms and Marketing Manager, develop a calendar of ‘brand messaging’ to form
Consumer and Partner Storytelling calendar in order to achieve UK commercial & strategic goals - manage
campaigns across all consumer and partner touchpoints.
</li>
<li>
Be able to think creatively, tactically and strategically
</li>
<li>
Deliver key communications copy including press releases, thought leadership articles, Q&A and messaging and
internal or partner communications.
</li>
<li>
Build direct relationships with key journalists, broadcast planners and industry experts / commentators and
deliver on-message media coverage.
</li>
<li>
Be a trusted advisor on potential reputational challenges and crisis management.
</li>
<li>
Responsible for consistency and quality of messaging across all external facing channels.
</li>
<li>
With agency, develop media plans and partner with internal teams (editorial, growth, commercial, OEM) to
deliver these.
</li>
<li>
Closely partner on strategy and execution with Growth marketing teams
</li>
</ul>
</div>
<div class="d-flex justify-content-between">
<span style="font-weight: 600;">About the role</span>
</div>
<div class="content py-3">
This is an exciting and rare-to-find in-house role at the cutting edge of the digitisation of the automotive
industry.
This PR & Communications Manager role will offer fantastic opportunities for a collaborative, proactive and
effective communications pro, looking to put their own stamp on a leading brand in a transforming market.
The candidate will have the opportunity to manage partner agencies, be able to offer senior counsel and be a
curious and natural internal networker, spotting positive media opportunities and see them through to delivery.
Supported by a press officer, they will report to the Head of Communications, UK Trading Director and Chief
Operating Officer. HQ’d in sleek offices in Victoria, you’ll be provided with a choice of the latest kit needed
for remote and hybrid working
In this role you will:
<ul class="py-2">
<li>Create and execute UK consumer comms campaigns and activities to support the business objectives through
integrated communications channels including events and media relations.
</li>
<li>Handle a mix of consumer, broadcast, , reputation (CSR) media and be part of a team also managing
corporate and B2B comms.
</li>
<li>
Be the day-to-day contact for external PR agencies, overseeing campaign delivery, reporting and ROI.
</li>
<li>
Partnering with Head of Comms and Marketing Manager, develop a calendar of ‘brand messaging’ to form
Consumer and Partner Storytelling calendar in order to achieve UK commercial & strategic goals - manage
campaigns across all consumer and partner touchpoints.
</li>
<li>
Be able to think creatively, tactically and strategically
</li>
<li>
Deliver key communications copy including press releases, thought leadership articles, Q&A and messaging and
internal or partner communications.
</li>
<li>
Build direct relationships with key journalists, broadcast planners and industry experts / commentators and
deliver on-message media coverage.
</li>
<li>
Be a trusted advisor on potential reputational challenges and crisis management.
</li>
<li>
Responsible for consistency and quality of messaging across all external facing channels.
</li>
<li>
With agency, develop media plans and partner with internal teams (editorial, growth, commercial, OEM) to
deliver these.
</li>
<li>
Closely partner on strategy and execution with Growth marketing teams
</li>
</ul>
</div>
<div class="d-flex justify-content-between">
<span style="font-weight: 600;">About the role</span>
</div>
<div class="content py-3">
This is an exciting and rare-to-find in-house role at the cutting edge of the digitisation of the automotive
industry.
This PR & Communications Manager role will offer fantastic opportunities for a collaborative, proactive and
effective communications pro, looking to put their own stamp on a leading brand in a transforming market.
The candidate will have the opportunity to manage partner agencies, be able to offer senior counsel and be a
curious and natural internal networker, spotting positive media opportunities and see them through to delivery.
Supported by a press officer, they will report to the Head of Communications, UK Trading Director and Chief
Operating Officer. HQ’d in sleek offices in Victoria, you’ll be provided with a choice of the latest kit needed
for remote and hybrid working
In this role you will:
<ul class="py-2">
<li>Create and execute UK consumer comms campaigns and activities to support the business objectives through
integrated communications channels including events and media relations.
</li>
<li>Handle a mix of consumer, broadcast, , reputation (CSR) media and be part of a team also managing
corporate and B2B comms.
</li>
<li>
Be the day-to-day contact for external PR agencies, overseeing campaign delivery, reporting and ROI.
</li>
<li>
Partnering with Head of Comms and Marketing Manager, develop a calendar of ‘brand messaging’ to form
Consumer and Partner Storytelling calendar in order to achieve UK commercial & strategic goals - manage
campaigns across all consumer and partner touchpoints.
</li>
<li>
Be able to think creatively, tactically and strategically
</li>
<li>
Deliver key communications copy including press releases, thought leadership articles, Q&A and messaging and
internal or partner communications.
</li>
<li>
Build direct relationships with key journalists, broadcast planners and industry experts / commentators and
deliver on-message media coverage.
</li>
<li>
Be a trusted advisor on potential reputational challenges and crisis management.
</li>
<li>
Responsible for consistency and quality of messaging across all external facing channels.
</li>
<li>
With agency, develop media plans and partner with internal teams (editorial, growth, commercial, OEM) to
deliver these.
</li>
<li>
Closely partner on strategy and execution with Growth marketing teams
</li>
</ul>
</div>
<div>
<button class="btn btn-primary" style="width: 100%;font-size: small;background: #0A8FF0;font-weight: 600;">Apply
for this job</button>
</div>
</div>
</mat-tab>
<mat-tab label="APPLICATION" style="font-weight: 600;color: #88929e;" class="container">
<div class="container">
<div style="border: none;font-size: 12px;">
<div class="p-2" style="font-size: 10px;color: #636d77;">
<div class="card p-3 my-2">
<div class="d-flex justify-content-between autofill-card">
<div>
<div class="p-2 d-flex justify-space-around">
<div>
<i class="fa fa-flash"></i>
</div>
<div class="d-flex px-2" style="font-weight: 750;">
<span style="font-size: 11px;">AUTOFILL APPLICATION</span>
</div>
</div>
<span class="p-2" style="font-size: 11px;color: #636d77;">Save time by importing your resume.</span>
</div>
<div class="p-2">
<button class="btn btn-primary px-5 py-2"
style="width: 100%;font-size: small;background: #0A8FF0;font-weight: 600;font-size:11px;"
>
Import Resume from <i class="fa fa-caret-down"></i></button>
</div>
</div>
</div>
<div class="py-2">
<span style="color: red;">*</span> Required fields
</div>
<div class="p-2 d-flex justify-content-between" style="border-bottom: solid 1px #e1e6eb;">
<div>
<span style="font-weight: 400;font-size: 18px;color: #333e49;">Persoanl Information</span>
</div>
<div style="opacity: 0.4;">
<i class="fa fa-trash"></i>
Clear
</div>
</div>
<div class="py-2">
<form [formGroup]="jobForm">
<div class="form-row">
<div class="form-group col-md-6">
<mat-label for="" style="font-weight: 700;
color: #333e49;"> <span style="color: red;">*</span> First Name</mat-label>
<input matInput class="form-control" id="inputFirstName4" formControlName="firstName">
<mat-error *ngIf="jobForm.controls.firstName.errors.required && jobForm.controls.firstName.touched"
style="color: red;">
This field is required.
</mat-error>
</div>
<div class="form-group col-md-6">
<mat-label for="" style="font-weight: 700;
color: #333e49;"> <span style="color: red;">*</span> Last Name</mat-label>
<input matInput class="form-control" id="inputLastName4" formControlName="lastName">
<mat-error *ngIf="jobForm.controls.lastName.errors.required && jobForm.controls.lastName.touched"
style="color: red;">
This field is required.
</mat-error>
</div>
</div>
<div class="form-row">
<div class="form-group col-md-12">
<mat-label for="" style="font-weight: 700;
color: #333e49;"><span style="color: red;">*</span> Email</mat-label>
<input matInput class="form-control" id="inputEmail4" formControlName="email">
<mat-error *ngIf="jobForm.controls.email.errors.required && jobForm.controls.email.touched"
style="color: red;">
This field is required.
</mat-error>
</div>
</div>
<mat-label for="" style="font-weight: 700;
color: #333e49;"><span style="color: red;">*</span> Phone</mat-label>
<div class="form-row">
<div class="form-group col-md-12 d-flex" style="height: 35px;">
<mat-label for="dial_code"></mat-label>
<select name="dial_code" id="dial_code" style="border-top-left-radius: 5px;
border-bottom-left-radius: 5px;width: 10%;text-align: center;background: #F2F2F2;"
formControlName="dialCode">
<option value="">Please select</option>
<option value="+91">+91</option>
</select>
<input matInput placeholder=" 987654321" class="flex-grow-1" style="border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
border: solid 1px #000;
border-left: none;
" formControlName="mobileNumber">
</div>
<mat-error *ngIf="jobForm.controls.dialCode.errors.required && jobForm.controls.dialCode.touched"
style="color: red;">
This field is required.
</mat-error>
<mat-error class="px-1"
*ngIf="jobForm.controls.mobileNumber.errors.required && jobForm.controls.mobileNumber.touched"
style="color: red;">
This field is required.
</mat-error>
</div>
<label for="">The hiring team may use this number to contact you about this job.
</label>
<div class="p-2 d-flex justify-content-between" style="border-bottom: solid 1px #e1e6eb;margin-top: 30px;">
<div>
<span style="font-weight: 400;font-size: 18px;color: #333e49;">Profile</span>
</div>
<div style="opacity: 0.4;">
<i class="fa fa-trash"></i>
Clear
</div>
</div>
<div class="py-4">
<span class="py-2">* Resume</span>
<div class="p-4 resume-div">
<button class="file-button"><a (click)="uploadFile()">Upload a file</a> or drag and drop here</button>
<input type="file" id="myFile" name="filename" style="visibility: hidden;display: none;"
(change)="onFileChange($event.target.files)" formControlName="file">
</div>
</div>
<ng-container *ngIf="jobForm.controls.file.errors">
<mat-error class="px-1" *ngIf="submitted && jobForm.controls.file.errors.required " style="color: red;">
This field is required.
</mat-error>
</ng-container>
<div class="py-4">
<div class="p-2 d-flex justify-content-between" style="border-bottom: solid 1px #e1e6eb;">
<div>
<span style="font-weight: 400;font-size: 18px;color: #333e49;">Details</span>
</div>
<div style="opacity: 0.4;">
<i class="fa fa-trash"></i>
Clear
</div>
</div>
<!-- <div>
<button class="file-button"><a (click)="uploadFile()">Upload a file</a> or drag and drop here</button>
<input type="file" id="myFile" name="filename" style="visibility: hidden;display: none;">
<textarea name="" id="" cols="30" rows="10" style="width: 100%; padding: 0;"></textarea>
</div> -->
<div class="py-4">
<div class="py-2"><span style="font-weight: 700;color: #333e49;">Cover Letter</span> <span
class="px-1">(Optional)</span></div>
<textarea name="" matInput id="" cols="20" rows="5" style="width: 100%; padding: 0;border-radius: 5px;"
formControlName="details"></textarea>
</div>
<div class="py-2">
<span style="color: red;">*</span>
<span class="px-1" style="color: #333e49;font-weight: 600">Roughly, what are your salary expectations?
We only use this to check we're in the same ballpark before
asking you to invest your time interviewing.</span>
<textarea matInput class="py-2" name="" id="" cols="20" rows="5"
style="width: 100%; padding: 0;border-radius: 5px;" formControlName="salaryExpectations"></textarea>
<mat-error class="px-1"
*ngIf="jobForm.controls.salaryExpectations.errors.required && jobForm.controls.salaryExpectations.touched"
style="color: red;">
This field is required.
</mat-error>
</div>
<div class="py-2">
<span style="color: red;">*</span>
<span class="px-1" style="color: #333e49;font-weight: 600">Do you have the right to work in the UK
without requiring visa sponsorship? Unfortunately, we are not
looking to sponsor for this particular role.</span>
<div class="py-2">
<button [disabled]="jobForm.get('rightToWork').disabled"
(click)="jobForm.get('rightToWork').markAsTouched(); jobForm.get('rightToWork').setValue('yes');"
class="yes-button p-2" formControlName="rightToWork" ngDefaultControl> <i class="fa fa-check"></i>
YES</button>
<button [disabled]="jobForm.get('rightToWork').disabled"
(click)="jobForm.get('rightToWork').markAsTouched(); jobForm.get('rightToWork').setValue('no');"
class="no-button active-button p-2" formControlName="rightToWork" ngDefaultControl> <i
class="fa fa-close"></i>
NO</button>
</div>
<mat-error class="px-1" *ngIf="isValidRightToWork" style="color: red;">
This field is required.
</mat-error>
</div>
<div class="py-2">
<button class="btn btn-primary py-2"
style="width: 100%;font-size: 10px;background: #0A8FF0;font-weight: 600;" (click)="carrerSignupForm()"
type="submit">
Submit application</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</mat-tab>
</mat-tab-group>
</div>
</div>
I want to implement mat-progress-bar with below the mat-tabs and make it sticky when the user scrolls to bottom.
I have tried the following variations, but with no success:
Putting mat-progress-bar inside mat-tab-group and applying position sticky to it.
Putting mat-progress-bar at the end of the mat-tab-group after mat-tabs and applying position sticky to it
<mat-tab-group>
<mat-tab> </mat-tab>
<mat-tab> </mat-tab>
<mat-progress-bar> </mat-progress-bar>
</mat-tab-group>
Putting mat-progress-bar at the end of the outer div and applying position sticky to it.
But none of it seems to work.
I am not able to stick mat-progress-bar to a certain position. Is it default behavior or some other thing?
Can anybody help me over this?
So I’m trying to work on a platform for my church. Essentially, when youth come into our new media center, we want:
youth to click one of the provided emotions based on how they’re feeling
a scripture to popup associated with the emotion they selected
I’m new to coding (have only been doing it for a few weeks outside of work) and I’m stumped as to where I’ve gone wrong.
Originally I was using a hover feature, but now I want to upgrade to a popup as mentioned in bullet 2.
Here’s my codepen: https://codepen.io/mj2913/pen/pXgxOz
<div class="happy-thumb popup" onclick="myFunction()">
<p>happy
<span class="popup-thumb-span" id="happyPopup">I praise you, for I am fearfully and wonderfully made. Wonderful are your works; my soul knows it very well. Psalm 139:14</span>
</p>
</div>
<script>
function myFunction() {
var popup = document.getElementById("happyPopup");
popup.classList.toggle("show");
}
</script>
Try this. I've added jQuery modal popup. Replace your HTML page with below
<!DOCTYPE html>
<html lang="en">
<link href="https://fonts.googleapis.com/css?family=Raleway&display=swap" rel="stylesheet">
<!-- Remember to include jQuery :) -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<!-- jQuery Modal -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.1/jquery.modal.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.1/jquery.modal.min.css" />
<head>
<h1>Welcome to Friendship Community Church's Youth Media Center</h1>
<h2>How Are You Feeling Today?</h2>
</head>
<div class="col1">
<button class="happy-thumb popup" onclick="$('#happyPopup').modal();">
<p>happy
<span class="popup-thumb-span" id="happyPopup" rel:"modal:open">I praise you, for I am fearfully and wonderfully made. Wonderful are your works; my soul knows it very well. Psalm 139:14</>
</p>
</div>
<div class="sad-thumb popup">
<p>sad
<span class="popup-thumb-span" id="sadPopup">Therefore confess your sins to each other and pray for each other so that you may be healed. The prayer of a righteous man is powerful and effective. James 5:16</span>
</p>
</div>
<div class="surprised-thumb popup">
<p>surprised
<span class="popup-thumb-span" id="surprisedPopup">Trust in the Lord with all your heart and lean not on your own understanding; in all your ways submit to Him, and He will make your paths straight. Proverbs 3:5-6</span>
</p>
</div>
<div class="anxious-thumb popup">
<p>anxious
<span class="popup-thumb-span" id="anxiousPopup">Do not be anxious about anything, but in everything, by prayer and petition, with thanksgiving, present your requests to God. Phillipians 4:6</span>
</p>
</div>
</div>
<div class="col2">
<div class="fearful-thumb popup">
<p>fearful
<span class="popup-thumb-span" id="fearfulPopup">Surely God is my salvation; I will trust and not be afraid. The LORD himself is my strength and my defense; he has become my salvation. Isaiah 12:2</span>
</p>
</div>
<div class="confident-thumb popup">
<p>confident
<span class="popup-thumb-span" id="confidentPopup">I have told you these things, so that in me you may have peace. In this world you will have trouble. But take heart! I have overcome the world. John 16:33</span>
</p>
</div>
<div class="tired-thumb popup">
<p>tired
<span class="popup-thumb-span" id="tiredPopup">Come to me, all you who are weary and burdened, and I will give you rest. Matthew 11:28</span>
</p>
</div>
<div class="joyful-thumb popup">
<p>joyful
<span class="popup-thumb-span" id="joyfulPopup">Sing for joy, O heavens, and exult, O earth; break forth, O mountains, into singing! For the Lord has comforted his people and will have compassion on his afflicted. Isaiah 49:13</span>
</p>
</div>
</div>
<div class="col3">
<div class="discouraged-thumb popup">
<p>discouraged
<span class="popup-thumb-span" id="discouragedPopup">Have I not commanded you? Be strong and courageous. Do not be afraid; do not be discouraged, for the Lord your God will be with you wherever you go. Joshua 1:9</span>
</p>
</div>
<div class="pitiful-thumb popup">
<p>pitiful
<span class="popup-thumb-span" id="pitifulPopup">Humble yourselves, therefore, under God’s mighty hand, that He may lift you up in due time. Cast all your anxiety on Him because He cares for you. 1 Peter 5:6-7</span>
</p>
</div>
<div class="impatient-thumb popup">
<p>impatient
<span class="popup-thumb-span" id="impatientPopup">Jesus said, I am the way, the truth, and the life. No one comes to the Father except through Me. John 14:6</span>
</p>
</div>
<div class="cautious-thumb popup">
<p>cautious
<span class="popup-thumb-span" id="cautiousPopup">'For I know the plans I have for you', declares the LORD, 'plans to prosper you and not to harm you, plans to give you hope and a future'. Jeremiah 29:11</span>
</p>
</div>
</div>
<div class="col4">
<div class="unloved-thumb popup">
<p>unloved
<span class="popup-thumb-span" id="unlovedPopup">Love is patient, love is kind. It does not envy, it does not boast, it is not proud. 1 Corinthians 13:4</span>
</p>
</div>
<div class="hopeless-thumb popup">
<p>hopeless
<span class="popup-thumb-span" id="hopelessPopup">Jesus said to him, 'I am the way, and the truth, and the life. No one comes to the Father except through me'. John 14:6</span>
</p>
</div>
<div class="confused-thumb popup">
<p>confused
<span class="popup-thumb-span" id="confusedPopup">Be on your guard; stand firm in faith; be courageous; be strong. 1 Corinthians 16:13</span>
</p>
</div>
<div class="stressed-thumb popup">
<p>stressed
<span class="popup-thumb-span" id="stressedPopup">So do not fear, for I am with you; do not be dismayed, for I am your God. I will strengthen you and help you; I will uphold you with my righteous right hand. Isaiah 41:10</span>
</p>
</div>
</div>
</div>
</div>
<p>Code inspired by MIT. All rights reserved to them</p>
Output
jQuery Library - https://jquerymodal.com/
I am using bootstrap with angularjs mainly because I want to user partials with my navbar
I have taken this template and added angularJS
http://ironsummitmedia.github.io/startbootstrap-landing-page/
Here is the navbar
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li>
Inicio
</li>
<li>
Servicios
</li>
<li>
Contactenos
</li>
</ul>
</div>
And below that are the divs with the content of the navbar options
<a name="services"></a>
<div class="content-section-a">
<div class="container">
<div class="row">
<div class="col-lg-5 col-sm-6">
<hr class="section-heading-spacer">
<div class="clearfix"></div>
<h2 class="section-heading">Death to the Stock Photo:<br>Special Thanks</h2>
<p class="lead">A special thanks to <a target="_blank" href="http://join.deathtothestockphoto.com/">Death to the Stock Photo</a> for providing the photographs that you see in this template. Visit their website to become a member.</p>
</div>
<div class="col-lg-5 col-lg-offset-2 col-sm-6">
<img class="img-responsive" src="img/ipad.png" alt="">
</div>
</div>
</div>
<!-- /.container -->
</div>
When I click on the Servicios (#services) is taking me to
http://localhost:8080/index.html#/services
instead of taking me to
http://localhost:8080/index.html#services
a / was added between # and services
I have nodejs installed and running http-server (npm pakckage) for testing purposes
I found the solution
When creating the links use two ## and the target="_self"
Question 1
Question 2
Question 3
And use the id attribute in your html elements like this:
<div id="faq-1">Section 1</div>
<div id="faq-2">Section 2 Content></div>
<div id="faq-3">Question 3</div>
There is no need to change any routing or anything else
I am having trouble with tabs on foundation 5. It doesn't switch between the 2 tabs and the css doesn't seem to be working either.
JS Fiddle:
http://jsfiddle.net/XP6Bk/
<div class="row">
<div class="large-12 columns">
<ul class="tabs" data-tab>
<li class="tab-title active">Nutrition Plans</li>
<li class="tab-title">Fitness Plans</li>
</ul>
</div>
</div>
<div class="tabs-content">
<div class="content active" id="panel2-1">
<div class="row">
<div class="large-7 columns">
<p class="serv-intro">We can give advice & offer you a personalised nutrition Our nutrition plan will not leave you hungry but it will achieve results so you can look your best.</p>
<p class="serv-body">One of the key factors of living a healthy lifestyle is having the right nutrition. Making the correct choices and sourcing the correct food has a massive influence on your health & wellbeing.</p>
</div>
<div class="large-5 columns">
<p class="serv-intro">Our Advice will depend on the following:</p>
<ul class="serv-list">
<li>Weight</li><hr>
<li>BMI & Calorie Intake</li><hr>
<li>Blood Pressure & Heart Rate Checks</li><hr>
<li>Eating Habits & Lifestyle</li>
</ul>
</div>
</div>
<div class="row">
<div class="large-7 columns">
<p class="serv-intro">Eating Healthy For Life.</p>
</div>
<div class="large-5 columns">
<p class="serv-intro">Professional Analysts</p>
</div>
</div>
<div class="row">
<div class="large-7 columns">
<p class="serv-body">There are many misconceptions about the quality and type of foods that make up a healthy eating plan. Often people under eat which reduces their metabolic rate and lowers the rate you could be increasing your body fat mass. The immediate decrease in weight is often the result of losing lean muscle tissue and dehydration. Losing weight isn’t about eating less. It's important to realise that losing healthily isn’t a quick fix, it's learning to make healthy choices for life.</p>
</div>
<div class="large-5 columns">
<p class="serv-body">We use professional software to analyse and devise your personal nutrition plan based on your specific needs</p>
</div>
</div>
</div>
<div class="content" id="panel2-2">
<div class="row">
<div class="large-12 columns">
<p>Hello Dave</p>
</div>
</div>
</div>
</div>
Any suggestion would be very welcome.
Problem solved. I downloaded the most recent foundation file and replaced the JS and CSS folders and it now works.
The twitter bootstrap docs site, the left nav gets fixed to the top in a mobile layout.
ex: http://twitter.github.com/bootstrap/javascript.html
I want to do the same without using the ...docs.css as is done in the Bootstrap site.
Currently, the issue that I'm facing is that the 'affix nav' stays on top of the content in mobile dimensions as you scroll through the content.
<div class="row">
<div class="span3">
<div data-spy="affix">
<ul class="nav nav-list nav-stacked">
<li> Objective
</li>
<li> Experience
</li>
<li> Skills
</li>
<li> Education
</li>
</ul>
</div>
</div>
<div class="span9">
<section id="objective">
<div class="page-header">
<h1>
Objective: <small> Do good </small>
</h1>
</div>
</section>
<section id="experience">
<div class="page-header">
<h1>
Exprience: <small> I worked at a bit </small>
</h1>
</div>
</section>
<section id="skills">
<div class="page-header">
<h1>
skills: <small> my skillz </small>
</h1>
</div>
</section>
<section id="education">
<div class="page-header">
<h1>
education: <small> I went to school </small>
</h1>
</div>
</section>
</div>
http://jsfiddle.net/gPsWe/1/
I want the 'affix nav' to get fixed to the top in a mobile layout with using the latest bootstrap v2.3.1. How do I go about it? Any suggestions?
Menus for mobile screens aren't always the easiest things to work with.
Using the layout you've started with, here's a simple idea where you remove the affixed behaviour for mobile screens: http://jsfiddle.net/panchroma/ZuELd/ . Doing this returns the menu to normal flow so then the content falls nicely into place underneath.
You might need to fine-tune the menu links, or even change them to a horizontal list for mobile screens, but that's easy enough to do from here.
CSS
#media (max-width: 767px){
.affix{
position:static;
}
}
Good luck!