I figured out that the Perspective CSS property I have listed in my div for a parallax scrolling is causing my sticky navbar function to not work at all.
Does anyone have suggestions?
Here's a link to my code: https://jsbin.com/luresosone/edit?html,css,js,output
$('.navbar').affix({
offset: {
top: function() {
return (this.top = $('.navbar').offset().top)
}
}
});
#media (max-width: 600px) {
.carousel-caption {
display: none;
}
.navbar {
margin-bottom: 0;
border-radius: 0;
}
.row.content {
height: 450px
}
.sidenav {
padding-top: 20px;
background-color: #f1f1f1;
height: 100%;
}
}
#media (max-width: 767px) {
.sidenav {
height: auto;
padding: 15px;
}
.row.content {
height: auto;
}
}
.panel-footer.panel-custom {
background: red;
color: white;
}
.navbar.navbar-default.affix {
top: 0;
width: 100%;
}
.jumbotron {
margin-bottom: 0;
}
/* Parllax scrolling styling starts */
.parallax {
height: 100vh;
overflow-x: auto;
/* I believe this is causing the issue */
-webkit-perspective: 300px;
perspective: 300px;
/* I believe this is causing the issue */
}
.parallax__group {
position: relative;
height: 500px;
height: 100vh;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.parallax__layer {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.parallax__layer--fore {
-webkit-transform: translateZ(90px) scale(.7);
transform: translateZ(90px) scale(.7);
z-index: 1;
}
.title {
text-align: center;
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
#group1 {
z-index: 5;
/* Slide over group 2 */
background-color: transparent
}
#group1 .parallax__layer--base {
background: red;
height: 65%
}
#group1 .parallax__layer--fore {
background: yellow left:27%;
top: 20%
}
#group2 {
z-index: 3;
/* Slide under groups 1 and 3 */
}
#group2 .parallax__layer--back {
background: green;
background-size: cover;
height: 616px;
padding-top: 140px;
padding-bottom: 140px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>JS Bin</title>
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<div class="parallax">
<div class="jumbotron">
<div class="container text-center">
<p>fdsfdsfsdfdsfsd</p>
</div>
</div>
<nav class="navbar navbar-default navbar-static-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.html">sadsadasd</a>
</div>
<div id="myNavbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>hgfgfsf</li>
<li>dsasafew</li>
<li>dsadsaf</li>
<li>dsadasd</li>
<li>Cdas</li>
</ul>
</div>
</div>
</nav>
<div id="group1" class="parallax__group">
<div class="parallax__layer parallax__layer--base"></div>
<div class="parallax__layer parallax__layer--fore"></div>
</div>
<div id="group2" class="parallax__group">
<div class="parallax__layer parallax__layer--back"></div>
</div>
<p style="font-size: 20px">Some code to waste space to make the sticky navbar work</p>
<p style="font-size: 20px">Some code to waste space to make the sticky navbar work</p>
<p style="font-size: 20px">Some code to waste space to make the sticky navbar work</p>
<p style="font-size: 20px">Some code to waste space to make the sticky navbar work</p>
<p style="font-size: 20px">Some code to waste space to make the sticky navbar work</p>
<p style="font-size: 20px">Some code to waste space to make the sticky navbar work</p>
<p style="font-size: 20px">Some code to waste space to make the sticky navbar work</p>
<p style="font-size: 20px">Some code to waste space to make the sticky navbar work</p>
<p style="font-size: 20px">Some code to waste space to make the sticky navbar work</p>
<p style="font-size: 20px">Some code to waste space to make the sticky navbar work</p>
<p style="font-size: 20px">Some code to waste space to make the sticky navbar work</p>
<p style="font-size: 20px">Some code to waste space to make the sticky navbar work</p>
<p style="font-size: 20px">Some code to waste space to make the sticky navbar work</p>
</body>
</html>
Why don't you keep navbar outside of parallax? This will solve your problem. Reference
Fiddle demo
Related
Hello I'm working on a frontend mentor challenge and encountered a bug when I click my hamburger menu it seems to remove the middle bar, my intentions were to make an X appear and have the li's come easing in from the left, can anyone tell me what I did wrong? I'm teaching myself how to develop and maintain sites.
<!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.0">
<link rel="preconnect" href="https://fonts.googleapis.com"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link href="https://fonts.googleapis.com/css2?family=Inter:wght#400;700;800&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css">
<script src="script.js" defer></script>
<title>Angel News</title>
</head>
<body>
<div id="con">
<nav class="navbar">
W.
<ul class="nav-menu">
<li class="nav-menu">
Home
</li>
<li class="nav-menu">
News
</li>
<li class="nav-menu">
Popular
</li>
<li class="nav-menu">
Trending
</li>
<li class="nav-menu">
Catergories
</li>
</ul>
<div class="hamburger">
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</div>
</nav>
<div class="section1">
<img src="" alt="">
<h2 class="section1-h2">The Bright Future of Web 3.0?</h2>
<p class="section1-p">We dive into the next evolution of the web that claims to put the power of the platforms back into the hands of the people. But is it really fulfilling it's promise?</p>
Read More
</div>
<div class="section2">
<div class="section2-inside">
<h3 class="section2-h3">New</h3>
<div class="insidesection2-1">
<h4>Hydrogen VS Electric Cars</h4>
<p>Will hydrogen-fueled cars ever catch up to EV's?</p>
</div>
<div class="insidesection2-2">
<h4>The Downsides og AI Artistry</h4>
<p>What are the possible adverse effects of on-demand AI image generation?</p>
</div>
<div class="insidesection2-3">
<h4>Is VC Funding Drying Up?</h4>
<p>Private funding by VC firms is down 50% YOY. We take a look at what that means.</p>
</div>
</div>
</div>
<div class="section3">
<div class="section3-1">
<img src="" alt="">
<div class="insidesection3-1">
<h4 class="insidesection3-1-h4">01</h4>
<h5 class="insidesection3-1-h5">Reviving Retro PCs</h5>
<p>What happens when old PCs are given modern upgrades?</p>
</div>
</div>
<div class="section3-2">
<img src="" alt="">
<div class="insidesection3-2">
<h4 class="insidesection3-2-h4">02</h4>
<h5 class="insidesection3-2-h5">Top 10 Laptops of 2023</h5>
<p>Our best picks for various needs and budgets.</p>
</div>
</div>
<div class="section3-3">
<img src="" alt="">
<div class="insidesection3-3">
<h4 class="insidesection3-3-h4">03</h4>
<h5 class="insidesection3-3-h5">The Growth of Gaming</h5>
<p>How the pandemic has sparked fresh opportunities.</p>
</div>
</div>
</div>
</div>
</body>
</html>
* {
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: "Inter", sans-serif;
}
li {
list-style: none;
}
a {
color: black;
text-decoration: none;
}
.navbar {
min-height: 70px;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 24px;
}
.nav-menu {
display: flex;
justify-content: space-between;
align-items: center;
gap: 60px;
}
.nav-branding {
font-size: 2rem;
}
.nav-link {
transition: 0.7s ease;
}
.nav-link:hover {
color: hsl(35deg, 77%, 62%);
}
.hamburger {
display: none;
cursor: pointer;
}
.bar {
display: block;
width: 25px;
height: 3px;
margin: 5px auto;
transition: all 0.3s ease-in-out;
background-color: black;
}
#media (max-width: 768px) {
.hamburger {
display: block;
}
.hamburger.active .bar:nth-child(2) {
opacity: 0;
}
.hamburger.active .bar:nth-child(1) {
transform: rotateY(8px) rotate(45deg);
}
.hamburger.active .bar:nth-child(3) {
transform: rotateY(-8px) rotate(-45deg);
}
.nav-menu {
position: fixed;
left: -100%;
top: 70px;
gap: 0;
flex-direction: column;
width: 100%;
background-color: black;
text-align: center;
transition: 0.3s;
}
.nav-item {
margin: 16px 0;
}
.nav-menu.active {
left: 0;
}
}
const hamburger = document.querySelector('.hamburger');
const navMenu = document.querySelector('.nav-menu');
hamburger.addEventListener('click', () => {
hamburger.classList.toggle('active')
navMenu.classList.toggle('active')
})
Please try to use translateY instead of RotateY in your css #media tag as follows:
.hamburger.active .bar:nth-child(1) {
transform: translateY(8px) rotate(45deg);
}
.hamburger.active .bar:nth-child(3) {
transform: translateY(-8px) rotate(-45deg);
}
I'm looking at the card-reveal component of the materializecss framework shown here: https://codepen.io/JP_juniordeveloperaki/pen/YXRyvZ the official doc is here: http://next.materializecss.com/cards.html
For my application, I have moved the <div class="card-content"> to the top to look like this: https://codepen.io/anon/pen/YaqYOj
So I was wondering whether or not it was possible to make the card-reveal animation go from top to bottom, like the top card-content is a curtain that pulls down to reveal more information.
Thanks
You can achieve this by changing transform property of this element .card .card-reveal {}.
And i add extra class to change the transform property make the top card-content is a curtain that pulls down to reveal more information*
Here is the working code
Note: Also add display: block to .card .card-image img fix the bottom gap in your demo.
$('.card-content').click(()=>{
$('.card-reveal').addClass('card-closing');
});
$('.card-reveal .card-title-custom').click(()=>{
$('.card-reveal').removeClass('card-closing');
});
.main {
width: 450px;
margin: 30px;
}
.card .card-image img {
border-radius: 2px 2px 0 0;
position: relative;
left: 0;
right: 0;
top: 0;
bottom: 0;
width: 100%;
display: block;
}
.card .card-reveal {
padding: 20px;
position: absolute;
background-color: #fff;
width: 100%;
overflow-y: auto;
top: 100%;
height: 100%;
z-index: 1;
display: block !important;
transform: translateY(-200%) !important;
transition: transform .6s;
will-change: opacity, transform;
}
.card .card-reveal.card-closing {
transform: translateY(-100%) !important;
display: block !important;
}
.grey-text.text-darken-4 {
display: block;
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-alpha.4/css/materialize.min.css">
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-alpha.4/js/materialize.min.js"></script>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<div class="main">
<div class="card">
<div class="card-content">
<span class="card-title activator grey-text text-darken-4">Card Title<i class="material-icons right">more_vert</i></span>
<p>This is a link</p>
</div>
<div class="card-image waves-effect waves-block waves-light">
<img class="activator-custom" src="http://materializecss.com/images/office.jpg">
</div>
<div class="card-reveal">
<span class="card-title-custom grey-text text-darken-4">Card Title<i class="material-icons right">close</i></span>
<p>Here is some more information about this product that is only revealed once clicked on.</p>
</div>
</div>
</div>
Here is the working codepen
My "home" button goes up into the div as I condense the page. What is the best way to stabilize the button so that it will stay in center of the div as the page is condensed? I've tried many different things and so far nothing has worked so I'm hoping someone on this site could help me answer this problem. I've tried many different things without success.
JS/CSS/HTML
$(document).ready(function () {
//mouseenter overlay
$('ul#gallery li').on('mouseenter', function () {
// Get data attribute values
var title = $(this).children().data('title');
var desc = $(this).children().data('desc');
//validation
if (desc == null) {
desc = 'Click To Enlarge';
}
if (title == null) {
title = '';
}
//Create overlay div
$(this).append('<div class="overlay"></div>');
//Get the overlay div
var overlay = $(this).children('.overlay');
// Add html to overlay
overlay.html('<h3>' + title + '</h3><p>' + desc + '</p>');
// Fade in overlay
overlay.fadeIn(400);
});
$('ul#gallery li').on('mouseleave', function () {
//Create overlay div
$(this).append('<div class="overlay"></div>');
//Get the overlay div
var overlay = $(this).children('.overlay');
//Fade out overlay
overlay.fadeOut(200);
});
});
body{
background-color: white;
font-family:Orbitron;
color:white;
width:100%
}
.fa-stack-overflow{
color: #f48024
}
.fa-github{
color:rgb(102,43,129);
}
.fa-linkedin{
color:rgb(0,127,178);
}
.fa-facebook-official{
color:rgb(59, 89, 153);
}
.nav-pills{
font-size: 1.7em;
background-color: none;
margin-bottom: 10%;
color:white;
}
.block{
background-color: #337ab7;
opacity: .7;
padding:10px;
width:50%;
margin-right: auto;
margin-left: auto;
border-radius:5px;
}
h1{
padding:0;
margin-top: 0px;
font-size: 5.0em;
}
.btn-default{
font-size:1.7em;
color:#337ab7;
}
.pageOne{
background: url(https://images.pexels.com/photos/311039/pexels-photo-311039.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb);
background-repeat: none;
background-size: cover;
height: 1000px;
}
/*
parallax effect start
*/
.pageOne, .pageThree{
position: relative;
background-position: center;
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
}
/*
parallax effect end
*/
.pageTwo{
background: white;
color:#337ab7;
background-repeat:no-repeat;
background-size: cover;
height: 400px;
padding-top: 5%;
border-bottom:#00bfff 3px solid;
border-top:#00bfff 3px solid;
background-attachment: fixed;
}
.boxed{
font-size: 1.7em;
text-align: center;
margin-right: auto;
margin-left: auto;
margin-bottom: 100px;
}
.me{
height: 850px;
display:block;
margin-right: auto;
margin-left: auto;
}
.pageThree{
background: url(https://images.pexels.com/photos/311039/pexels-photo-311039.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb);
background-repeat: none;
background-size: cover;
height: 800px;
padding-top:6%;
background-attachment: fixed;
}
.button{
background-size: contain;
}
.container{
width:80%;
margin:auto;
overflow:auto;
}
section{
padding:20px 0;
overflow:hidden;
padding-bottom: 5%;
margin-top: 2.5%;
}
#gallery{
list-style: none;
margin: 0;
padding: 0;
width: 100%;
}
#gallery li{
display: block;
float: left;
width: 23%;
cursor: pointer;
border: 5px;
box-sizing: border-box;
margin: 0 12px 7px 0;
position: relative;
}
#gallery img{
width:100%;
border-radius:5%
}
.overlay{
display:none;
background:#337ab7 url(https://images.pexels.com/photos/311039/pexels-photo-311039.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb) no-repeat top center;
color:#fff;
position:absolute;
top:0;
z-index:100;
width:100%;
height:100%;
padding:20px;
border-radius:5%;
box-sizing: border-box;
pointer-events: none;
opacity: .7;
}
.overlay h3{
margin: 0;
padding: 0;
}
.pageThreeFooter{
background: black;
color:#337ab7;
background-repeat: none;
background-size: cover;
height: 150px;
padding-top: 2.5%;
background-attachment: fixed;
}
.pageFour{
background: white;
color:#337ab7;
background-repeat: none;
background-size: cover;
height: 300px;
padding-top: 2.5%;
}
.black{
color:black;
}
<!DOCTYPE html>
<html>
<head>
<title>Daniel's Portfolio | Welcome</title>
<link rel="stylesheet" href="CSS/bootstrap.min.css">
<link rel="stylesheet" href="CSS/style.css">
<link rel="stylesheet" href="CSS/font-awesome.min.css">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="js/main.js"></script>
<link href="https://fonts.googleapis.com/css?family=Orbitron" rel="stylesheet">
</head>
<body>
<div class="pageOne text-center">
<ul class = "nav nav-pills">
<li>
Daniel Collins
</li>
<li class="pull-right">
Contact Me
</li>
<li class="pull-right">
Portfolio
</li>
<li class="pull-right">
About Me
</li>
</ul>
<div class="block text-center" id="p1">
<h1>Daniel's Portfolio Website</h1>
<h2>Various Web Projects</h2>
</div>
<div class = "btnList text-center">
<a class = "btn btn-default" href="https://stackoverflow.com/users/7024823/daniel"><i class="fa fa-stack-overflow" aria-hidden="true"></i>Stack Overflow</a>
<a class = "btn btn-default" href="https://github.com/casteyes"><i class="fa fa-github" aria-hidden="true"></i>GitHub</a>
<a class = "btn btn-default" href="https://www.linkedin.com/in/daniel-collins-927b1ab0/"><i class="fa fa-linkedin" aria-hidden="true"></i>Linkedin</a>
<a class = "btn btn-default" href="https://www.facebook.com/daniel.p.collins1"><i class="fa fa-facebook-official" aria-hidden="true"></i>Facebook</a>
</div>
</div>
<div class= "pageTwo text-center" id="p2">
<h2>Daniel Collins</h2>
<div class="boxed">
<p class="black">
I’m a web developer and designer living in Jacksonville, Florida, United States. I spend my days with my hands in many
different areas of web development from back end programming (MySQL, PHP, C#, Java) to front end engineering
(HTML, CSS, and jQuery/Javascript), digital accessibility, user experience and visual design.
</p>
</div>
</div>
<div class= "pageThree" id="p3">
<header>
<div class="block text-center">
<h1 class = "logo">Portfolio</h1>
</div>
</header>
<section>
<div class="container">
<h1 id="heading">Projects</h1>
<ul id="gallery">
<li> <img src="https://images.pexels.com/photos/311039/pexels-photo-311039.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb"></li>
<li> <img src="https://images.pexels.com/photos/311039/pexels-photo-311039.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb"></li>
<li> <img src="https://images.pexels.com/photos/311039/pexels-photo-311039.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb"></li>
<li> <img src="https://images.pexels.com/photos/311039/pexels-photo-311039.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb"></li>
<li> <img src="https://images.pexels.com/photos/311039/pexels-photo-311039.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb"></li>
<li> <img src="https://images.pexels.com/photos/311039/pexels-photo-311039.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb"></li>
<li> <img src="https://images.pexels.com/photos/311039/pexels-photo-311039.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb"></li>
<li> <img src="https://images.pexels.com/photos/311039/pexels-photo-311039.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb"></li>
</ul>
</div>
</div>
</section>
<div class="pageThreeFooter text-center">
<div class="row">
Home
</div>
</div>
<div class= "pageFour text-center" id="p4">
<div class="container">
<div class="row">
<div class="col-lg-8 col-lg-offset-2 text-center">
<h2 class="section-heading">Let's Get In Touch!</h2>
<hr class="primary">
<p class="black">Ready to start your next project with us? That's great! Give us a call or send us an email and we will get back to you as soon as possible!</p>
</div>
<div class="col-lg-4 col-lg-offset-2 text-center">
<i class="fa fa-phone fa-3x sr-contact"></i>
<p class="black">555-5555</p>
</div>
<div class="col-lg-4 text-center">
<i class="fa fa-envelope-o fa-3x sr-contact"></i>
<p class="black"><a class="black" href="mailto:casteyestothesun#gmail.com">myemail.com</a></p>
</div>
</div>
</div>
</div>
</body>
</html>
You are missing the important responsive meta tag:
<meta name="viewport" content="width=device-width, initial-scale=1">
But you are using Bootstrap, which is a responsive framework. So, the answer to your question is to study and understand Bootstrap, along with more general studying of what it means for a site to be responsive.
There is a lot more to making a website responsive than just changing one or two things. You really need to plan on how each element or container of those elements is going to be responsive in their own right. Also, how your wrap or container of all content will behave as well as how your images, text/font, etc... will also be responsive.
This is too broad a question to be answered simply.
Since you are already using bootstrap, I would research how to utilize this to it's full potential and you can easily make your website responsive.
As you guessed, media queries are a good way to do this.
You'll need to add this tag in your header for these to work:
<meta name="viewport" content="width=device-width, initial-scale=1">
There are two ways you can go about setting your breakpoints - by min width or max width.
Since you've already written most of the styles, min-width probably makes more sense. If you have multiple breakpoints you can combine min-width and max-width into a single query to avoid conflicts with other media queries.
As for the home button, I recommend looking up how to vertically center an element. This guide is pretty handy: https://css-tricks.com/centering-css-complete-guide/
I am trying to make just the pages on my website that have the main body content class of ".interior-health-main" have a footer that is static at the bottom of the page. I want it at the absolute bottom, currently if you view some of my pages on a large screen, you will see a bunch of white space after the footer. I want to get rid of this.
I have been looking into this for hours now and tried many things, at first I was going to make the footer on the entire website static at the bottom of the page, but setting the footer's css to position: absolute conflicted with other elements on my home page, which is why I just want it on the ".interior-health-main." If it is possible to change it just for the footers on these pages please let me know, I do not really want examples of fixing this by setting the entire body to position:relative. It just messes up my homepage.
Here is an example of what it looks like with the white space after the footer http://codepen.io/aahmed2/full/KgWNYL/
<p class="nav">This is a Navigation Bar</p>
<div class="interior-health-main">
<div class="container">
<ol class="breadcrumb">
<li>Home</li>
<li>Health Resources</li>
<li class="active">Sample Short Page</li>
</ol>
<h2>Sample Short Page</h2>
</div>
</div>
<div class="footer">
<div class="container">
<div class="row">
<div class="col-sm-4">
<h4>Contact Us</h4>
<p>414 Hardin Hall<br> 3310 Holdredge St<br> Lincoln, NE 68583<br> (402) 472-7363</p>
<div class="affiliates">
<img class="wordmark" src="../_logos/wordmark.svg" alt="University of Nebraska-Lincoln Wordmark">
<img class="extension" src="../_logos/n-extension-rev.svg" alt="Nebraska Extension Logo">
</div>
</div>
<div class="col-sm-4">
<h4>Quick Links</h4>
<p>Human Health</p>
<div class="line"></div>
<p>Pet Diseases</p>
<div class="line"></div>
<p>Livestock Diseases</p>
<div class="line"></div>
<p>Events</p>
<div class="line"></div>
</div>
<div class="col-sm-4">
<h4>Attention</h4>
<p>All information on this site is intended for informational use only. Contact your doctor or veterinarian for health concerns.</p><br>
<h5><a class="partner" href="#">Partners & Stakeholders</a></h5>
</div>
</div>
<div class="copyright">
<div class="col-xs-9">
<h6>© 2016 Nebraska One Health. Site Map.</h6>
</div>
<div class="col-xs-3">
<img class="social pull-right" src="../_logos/twitter-logo-button.svg" alt="twitter icon">
<img class="social pull-right" src="../_logos/facebook-logo-button.svg" alt="facebook icon">
</div>
</div>
</div>
</div>
Here is my css
.nav {
text-align: center;
padding: 25px 0;
background-color: #c1c0be;
color: #fff;
position: fixed;
width: 100%;
z-index: 2;
}
.interior-health-main {
padding-top: 80px;
padding-bottom: 20px;
}
#media (max-width: 479px) {
.interior-health-main {
padding-top: 50px;
}
}
.footer {
background: #333332;
border-top: 9px solid #ffffff;
color: #fff;
padding-top: 35px;
padding-bottom: 35px;
}
You can position the footer absolute like they did here
https://getbootstrap.com/examples/sticky-footer/
.footer {
position: absolute;
bottom: 0;
width: 100%;
/* Set the fixed height of the footer here */
height: 60px;
/* background-color: #f5f5f5; */
}
<footer class="footer">
<div class="container">
<p class="text-muted">Place sticky footer content here.</p>
</div>
</footer>
How did it conflict when you tried your way? update your post with what you did?
Please reference this question to find your solution.
I applied one of the solutions from the above link to your code.
Wrap your code in a #holder div.
Add the following CSS:
html,body{
height: 100%
}
#holder{
min-height: 100%;
position:relative;
}
.footer {
background: #333332;
border-top: 9px solid #ffffff;
color: #fff;
padding-top: 35px;
padding-bottom: 35px;
height: 300px;
width:100%;
position: absolute;
left: 0;
bottom: 0;
}
.interior-health-main {
padding-top: 80px;
padding-bottom: 300px; /* height of footer */
}
Here is the working fiddle:
https://jsfiddle.net/DTcHh/25475/
I wrapped your page (not containing footer) into .page-wrap div, and edit you codePen code and just add this piece of code to your css
html, body {
height: 100%;
}
.page-wrap {
min-height: 100%;
/* equal to footer height (with margin and border) */
margin-bottom: -299px ;
}
.page-wrap:after {
content: "";
display: block;
}
.footer, .page-wrap:after {
/* page-wrap after content must be the same height as footer */
height: 299px;
}
Demo
I have a problem with a template. On a large screen, it's look fine, like this:
But when I resize my browser, the content won't push the footer down. Here is a picture:
Here is my code, which is too long so forgive me.
index.php
<!-- Navigation -->
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header page-scroll">
<!-- simple code -->
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<!-- simple code -->
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
<!-- Begin page content -->
<header>
<div class="container">
<div class="row">
<div class="col-lg-12">
<img class="img-responsive" src="<?php echo base_url(); ?>assets/img/simple_img.png" alt="" style="height: 200px;">
<div class="intro-text">
<!-- simple intro -->
</div>
</div>
</div>
</div>
</header>
<footer class="text-center">
<div class="footer-above">
<div class="container">
<div class="row">
<div class="footer-col col-md-4">
<h3>Location</h3>
<p>3481 Melrose Place<br>Beverly Hills, CA 90210</p>
</div>
<div class="footer-col col-md-4">
<h3>Around the Web</h3>
<ul class="list-inline">
<!-- some social networks -->
</ul>
</div>
<div class="footer-col col-md-4">
<h3>About Freelancer</h3>
<p>Freelance is a free to use, open source Bootstrap theme created by Start Bootstrap.</p>
</div>
</div>
</div>
</div>
<div class="footer-below">
<div class="container">
<div class="row">
<div class="col-lg-12">
Copyright © Author <?php echo date("Y"); ?>
</div>
</div>
</div>
</div>
</footer>
Here is my Css, which is also too long so forgive me( I deleted some irrelevant code ).
/* Sticky footer styles
-------------------------------------------------- */
html {
position: relative;
min-height: 100%;
}
body {
/* Margin bottom by footer height */
margin-bottom: 60px;
}
footer {
position: absolute;
bottom: 0;
width: 100%;
/* Set the fixed height of the footer here */
height: 340px;
background-color: #f5f5f5;
}
/* Custom page CSS
-------------------------------------------------- */
/* Not required for template or sticky footer method. */
body > .container {
padding: 60px 15px 0;
}
.container .text-muted {
margin: 20px 0;
}
footer > .container {
padding-right: 15px;
padding-left: 15px;
}
code {
font-size: 80%;
}
/*!
* Start Bootstrap - Freelancer Bootstrap Theme (http://startbootstrap.com)
* Code licensed under the Apache License v2.0.
* For details, see http://www.apache.org/licenses/LICENSE-2.0.
*/
body {
overflow-x: hidden;
}
header {
text-align: center;
color: #fff;
background: #18bc9c;
}
header .container {
padding-top: 100px;
padding-bottom: 50px;
}
#media(min-width:768px) {
header .container {
padding-top: 200px;
padding-bottom: 69px;
}
header .intro-text .name {
font-size: 4.75em;
}
header .intro-text .skills {
font-size: 1.75em;
}
}
#media(min-width:768px) {
.navbar-fixed-top {
padding: 25px 0;
-webkit-transition: padding .3s;
-moz-transition: padding .3s;
transition: padding .3s;
}
.navbar-fixed-top .navbar-brand {
font-size: 2em;
-webkit-transition: all .3s;
-moz-transition: all .3s;
transition: all .3s;
}
.navbar-fixed-top.navbar-shrink {
padding: 10px 0;
}
.navbar-fixed-top.navbar-shrink .navbar-brand {
font-size: 1.5em;
}
}
.navbar {
text-transform: uppercase;
font-family: Montserrat,"Helvetica Neue",Helvetica,Arial,sans-serif;
font-weight: 700;
}
.navbar a:focus {
outline: 0;
}
.navbar .navbar-nav {
letter-spacing: 1px;
}
.navbar .navbar-nav li a:focus {
outline: 0;
}
.navbar-default,
.navbar-inverse {
border: 0;
background-color:#233140;
}
footer {
color: #fff;
}
footer h3 {
margin-bottom: 30px;
}
footer .footer-above {
padding-top: 50px;
background-color: #2c3e50;
}
footer .footer-col {
margin-bottom: 50px;
}
footer .footer-below {
padding: 25px 0;
background-color: #233140;
}
How can I solve this, so the page content will push the footer down...at any size of browser.
Any help is appreciated.
Removing position:absolute; from the footer in the css appears to work. Perhaps consider having it set to absolute at wider screen sizes using media queries if having position:absolute is absolutely (pardon the pun) necessary.
I provided a snippet with the absolute positioning removed, as well as the potential addition to a media query, which is commented out, but there to demonstrate.
/* Sticky footer styles
-------------------------------------------------- */
html {
position: relative;
min-height: 100%;
}
body {
/* Margin bottom by footer height */
margin-bottom: 60px;
}
footer {
width: 100%;
/* Set the fixed height of the footer here */
height: 340px;
background-color: #f5f5f5;
}
/* Custom page CSS
-------------------------------------------------- */
/* Not required for template or sticky footer method. */
body > .container {
padding: 60px 15px 0;
}
.container .text-muted {
margin: 20px 0;
}
footer > .container {
padding-right: 15px;
padding-left: 15px;
}
code {
font-size: 80%;
}
/*!
* Start Bootstrap - Freelancer Bootstrap Theme (http://startbootstrap.com)
* Code licensed under the Apache License v2.0.
* For details, see http://www.apache.org/licenses/LICENSE-2.0.
*/
body {
overflow-x: hidden;
}
header {
text-align: center;
color: #fff;
background: #18bc9c;
}
header .container {
padding-top: 100px;
padding-bottom: 50px;
}
#media(min-width:768px) {
header .container {
padding-top: 200px;
padding-bottom: 69px;
}
header .intro-text .name {
font-size: 4.75em;
}
header .intro-text .skills {
font-size: 1.75em;
}
/*
****Optional****
footer{
position:absolute;
bottom:0px;
}*/
}
#media(min-width:768px) {
.navbar-fixed-top {
padding: 25px 0;
-webkit-transition: padding .3s;
-moz-transition: padding .3s;
transition: padding .3s;
}
.navbar-fixed-top .navbar-brand {
font-size: 2em;
-webkit-transition: all .3s;
-moz-transition: all .3s;
transition: all .3s;
}
.navbar-fixed-top.navbar-shrink {
padding: 10px 0;
}
.navbar-fixed-top.navbar-shrink .navbar-brand {
font-size: 1.5em;
}
}
.navbar {
text-transform: uppercase;
font-family: Montserrat, "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight: 700;
}
.navbar a:focus {
outline: 0;
}
.navbar .navbar-nav {
letter-spacing: 1px;
}
.navbar .navbar-nav li a:focus {
outline: 0;
}
.navbar-default,
.navbar-inverse {
border: 0;
background-color: #233140;
}
footer {
color: #fff;
}
footer h3 {
margin-bottom: 30px;
}
footer .footer-above {
padding-top: 50px;
background-color: #2c3e50;
}
footer .footer-col {
margin-bottom: 50px;
}
footer .footer-below {
padding: 25px 0;
background-color: #233140;
}
<!-- Navigation -->
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header page-scroll">
<!-- simple code -->
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<!-- simple code -->
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
<!-- Begin page content -->
<header>
<div class="container">
<div class="row">
<div class="col-lg-12">
<img class="img-responsive" src="<?php echo base_url(); ?>assets/img/simple_img.png" alt="" style="height: 200px;">
<div class="intro-text">
<!-- simple intro -->
</div>
</div>
</div>
</div>
</header>
<footer class="text-center">
<div class="footer-above">
<div class="container">
<div class="row">
<div class="footer-col col-md-4">
<h3>Location</h3>
<p>3481 Melrose Place
<br>Beverly Hills, CA 90210</p>
</div>
<div class="footer-col col-md-4">
<h3>Around the Web</h3>
<ul class="list-inline">
<!-- some social networks -->
</ul>
</div>
<div class="footer-col col-md-4">
<h3>About Freelancer</h3>
<p>Freelance is a free to use, open source Bootstrap theme created by Start Bootstrap.</p>
</div>
</div>
</div>
</div>
<div class="footer-below">
<div class="container">
<div class="row">
<div class="col-lg-12">
Copyright © Author
<?php echo date( "Y"); ?>
</div>
</div>
</div>
</div>
</footer>
The way Bootstrap sees how you want to change sizes for different screen sizes are in the column size identifiers. And each number is a fraction of 12.
<div class="footer-col col-md-4">
means you want the footer to take 4/12 of the screen on devices medium or higher. To designate that you want it to be different on different sizes, you would put something like
<div class="footer-col col-md-4 col-sm-12">
to mean that you want it to take up 4/12 of the screen on medium devices or larger, and 12/12 of the screen on small devices up to medium.
You have inline styling on your header <img> tag.
<img class="img-responsive" src="<?php echo base_url(); ?>assets/img/simple_img.png" alt="" style="height: 200px;">
I would recommend trying to use a new class on that <img> tag, then apply a new #media query to adjust height for different screen sizes.
Also, having the .img-responsive class on that element may also be conflicting with the inline height styling.
Add the class "position-relative"
<!-- Footer Starts -->
<div class="container-fluid">
<div class="navbar fixed-bottom position-relative">
<p>You Footer Content<p>
</div>
</div>
<!-- Footer ends -->
Works in Bootstrap v4.3