I implemented a simple footer with css and bootstrap. It is working as expected on most pages except on pages that do not have a lot of content the footer will appear at the end of the content opposed to the bottom of the page
Spent a lot of time trying to figure it out but I just cant get it
.footer {
position: relative;
bottom: 0;
width: 100%;
height: 150px;
background:#dfdfdf;
}
.body-tag {
height: 100%;
background: #F6F6F6;
color: #333333;
margin-top: 5rem;
padding-bottom: 4rem;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<body class="body-tag">
<div class="footer fixed-bottom">
<div class="container">
<footer class="py-3 my-4">
<ul class="nav justify-content-center border-bottom pb-3 mb-3">
<li class="nav-item">Home</li>
<li class="nav-item">Features</li>
<li class="nav-item">Pricing</li>
<li class="nav-item">FAQs</li>
<li class="nav-item">About</li>
</ul>
<p class="text-center footer-text">© name, Inc</p>
</footer>
</div>
</div>
</body>
There is no problem with the footer Just remove unnecessary margin and padding from body and margin-bottom from footer
As per you diagram there shouldn't be any problem of footer placement, If there is any position value in footer remove it, and also this all should be have single parent.
.footer {
width: 100%;
background-color: cyan;
}
.body-tag {
height: 100%;
background: #F6F6F6;
color: #333333;
}
/*Just Demo Purpose*/
nav{
background-color: cyan;
height: 60px;
}
main{
height:200vh;}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<body class="body-tag">
<nav class="">
<h1 class="text-center">Navbar</h1>
</nav>
<main></main>
<footer class="footer py-3 ">
<ul class="nav justify-content-center border-bottom pb-3 mb-3">
<li class="nav-item">Home</li>
<li class="nav-item">Features</li>
<li class="nav-item">Pricing</li>
<li class="nav-item">FAQs</li>
<li class="nav-item">About</li>
</ul>
<p class="text-center footer-text">© name, Inc</p>
</footer>
</body>
Use position: fixed; for your footer:
Here's an example
* {
margin: 0;
padding: 0;
}
footer {
position: fixed;
bottom: 0;
}
<footer>Hey i'm a footer</footer>
Related
I tried to add the footer, but it adds on top of the background-image at the bottom of my page. I tried to remove the "display:fixed" from footer, but the horizontal scroll shows up. How can I fix this?
I want the footer to be always visible on the screen when you scroll the page.
Here is more detail code snipet, I would appreciate if you guys can help with this.
html,
body {
height: 100%;
font-family: 'Google Sans',Roboto,Arial,sans-serif;
font-size: 16px;
margin: 0;
padding: 0;
body {
background-image: url("/img/bg-new-edit.jpg");
background-position: center center;
background-repeat: no-repeat;
width: 100vw;
height: 100vh;
background-size: cover;
position: relative;
}
/* Basic styling */
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
h2 {
font-weight: 350;
margin: 580px 40px;
}
footer {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
color: gray;
text-align: center;
background-color: white;
}
}
<body>
<nav>
<ul class="menu">
<li class="logo"><img class="logo" src="img/TARRAHJEWELRY-LOGO.png"></li>
<li class="item">Home</li>
<li class="item">About</li>
<li class="item has-submenu dropdown">
<a tabindex="0">Bridal Jewelry</a>
<ul class="submenu dropdown-content">
<li class="subitem">Engagement</li>
<li class="subitem">Men Wedding</li>
<li class="subitem">Women Wedding</li>
</ul>
</li>
<li class="item has-submenu dropdown">
<a tabindex="0">Collection</a>
<ul class="submenu dropdown-content">
<li class="subitem">Ring</li>
<li class="subitem">Necklace</li>
<li class="subitem">Earring</li>
<li class="subitem">Bracelet</li>
</ul>
</li>
<li class="item">Contact
</li>
<li class="item button">My Account</li>
<li class="item button">Cart</li>
<li class="toggle"><i class="fas fa-bars"></i></li>
</ul>
</nav>
<h2>We believe people who live life in their special way,<br> deserve unique jewelry.</h2>
<footer><p>Footer</p></footer>
<div class="clearfix"></div>
</body>
select the footer
footer {
bottom: 0;
position: fixed
}
note that this will cause a scroll bar to appear
to remove the scroll bar
body {
overflow: hidden
}
That should solve your problem
I am trying to make a navbar but my text is flowing off of the screen even though I have overflow: hidden on my ul
Here is my snippet
.header {
background-image: url('img/bg.jpg');
background-size: 100%;
background-repeat: no-repeat;
color: white;
width: 100vw;
height: 100vh;
}
.heading {
display: inline-block;
font-size: 3em;
}
.nav-items {
overflow: hidden;
}
<div class="header">
<div class="nav">
<!-- <img src="img/logo.png" alt="logo" class="logo"> -->
<ul class="nav-items">
<li class="nav-item">Home</li>
<li class="nav-item">About</li>
<li class="nav-item">Portfolio</li>
<li class="nav-item">Contact</li>
</ul>
</div>
<h1 class="heading" id="heading"></h1>
</div>
I want to make a sidebar with a fixed width, and use bootstrap grid to the rest of the page. The following code (JSBin) does not work: we see that the bootstrap grid is applied to the entire page.
Does anyone know if it is achievable?
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<style>
.fixed {
width: 202px;
}
.sidebar {
display: none;
}
#media (min-width: 768px) {
.sidebar {
position: fixed;
top: 0;
bottom: 0;
left: 0;
z-index: 1000;
display: block;
background-color: #f5f5f5;
}
}
</style>
</head>
<body>
<div class="fixed sidebar">
<ul class="nav">
<li class="active">Overview <span class="sr-only">(current)</span></li>
<li>Reports</li>
</ul>
</div>
<div class="container">
<div class="row">
<div class="col-sm-6 col-md-6">
abcsfdsqdfdqfdqsdfdqfdsqdfssd
</div>
<div class="col-sm-6 col-md-6">
efg
</div>
</div>
</div>
</body>
</html>
Fixed and absolute positioned elements are no longer part of the document flow, so they don't reserve the space they normally would. In your example, that means the sidebar doesn't push the rest of the content over, which is why you see it overlap the main content.
What I find normally works is to use the fluid container (so the page content spans the whole viewport) and then add padding to the "main" section to clear the horizontal space the sidebar would otherwise overlap.
Here's an example based off of a project I've built recently:
CSS
/* Hide for mobile, show later */
.sidebar
{
display: none;
}
#media (min-width: 768px)
{
.sidebar
{
position: fixed;
top: 55px;
bottom: 0;
left: 0;
z-index: 1000;
display: block;
padding: 0;
overflow-x: hidden;
overflow-y: auto; /* Scrollable contents if viewport is shorter than content. */
width: 175px;
}
.sidebar.student
{
background-color: #71B1D1;
color: #fff;
border-right: 1px solid #eee;
}
}
/*
* Main content
*/
.main
{
padding: 20px;
}
#media (min-width: 768px)
{
.main
{
padding-left: 215px;
padding-right: 40px;
}
}
Markup
<div class="container-fluid">
<div class="col-sm-3 col-md-2 sidebar">
<ul class="nav nav-sidebar">
<li class="active">Overview <span class="sr-only">(current)</span></li>
<li>Reports</li>
<li>Analytics</li>
<li>Export</li>
</ul>
<ul class="nav nav-sidebar">
<li>Nav item</li>
<li>Nav item again</li>
<li>One more nav</li>
<li>Another nav item</li>
<li>More navigation</li>
</ul>
<ul class="nav nav-sidebar">
<li>Nav item again</li>
<li>One more nav</li>
<li>Another nav item</li>
</ul>
</div>
<div class="main">
<h2>Content Header</h2>
<p>Some content here...</p>
<hr />
<footer>
<p>
© 2017
</p>
</footer>
</div>
</div>
Demo: https://jsbin.com/giwozanavi
Code: https://jsbin.com/giwozanavi/edit?html,css,output
Try this :
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<style>
.fixed {
width: 202px;
}
.sidebar {
display: none;
}
#media only screen and (min-width: 481px) and (max-width: 1124px) {
.fixed {
width: 140px;
}
}
#media (min-width: 768px) {
.sidebar {
position: fixed;
top: 0;
bottom: 0;
left: 0;
z-index: 1000;
display: block;
background-color: #f5f5f5;
}
}
</style>
</head>
<body>
<div class="row">
<div class="col-sm-2">
<div class="fixed sidebar">
<ul class="nav">
<li class="active">Overview <span class="sr-only">(current)</span></li>
<li>Reports</li>
</ul>
</div>
</div>
<div class="col-sm-10">
<div class="container">
<div class="row">
<div class="col-sm-6 col-md-6">
abcsfdsqdfdqfdqsdfdqfdsqdfssd
</div>
<div class="col-sm-6 col-md-6">
efg
</div>
</div>
</div>
</div>
</div>
</body>
</html>
I created 3 flexbox containers (container for controlling the other two flexbox containers. In my primary and secondary flex containers i inserted 4 images and a h1 which are all wrapped together, but how can i move my h1's on top of the flex containers(outside of the flex containers) ?
I started experimenting with flexbox today so consider my a rookie.
JsFiddle https://jsfiddle.net/2fw7w8qn/1/ or
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="css/framework.css">
<link href='https://fonts.googleapis.com/css?family=Electrolize' rel='stylesheet' type='text/css'>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="js/custom.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="UTF-8">
<title>NK Electrical LTD</title>
</head>
<body>
<div class="container">
<div class="primary">
<h1>Menu</h1>
<li class="flex-item1"><img src="img/electrical.png"></li>
<li class="flex-item1"><img src="img/emergency.png"></li>
<li class="flex-item1"><img src="img/homeappliances1.png"></li>
<li class="flex-item1"><img src="img/homeappliances2.png"></li>
</div>
<div class="secondary">
<h1>Our latest products</h1>
<li class="flex-item"><img src="img/1.jpg"></li>
<li class="flex-item"><img src="img/2.jpg"></li>
<li class="flex-item"><img src="img/3.jpg"></li>
<li class="flex-item"><img src="img/4.jpg"></li>
</div>
</div>
</body>
</html>
Framework.css
*{
box-sizing: border-box;
margin:0;
padding: 0;
}
body{font-family: 'Electrolize', sans-serif;}
ul{list-style: none;padding: 0;margin: 0;}
.container{display: flex;flex-direction: column;}
.primary{display: flex;flex-wrap: wrap;justify-content: center;background-color:#1c1c1c;margin:0% 25%;padding:1%;}
.secondary{display: flex; flex-wrap: wrap;;justify-content: center;background-color:#1c1c1c;margin:0% 25%;padding:1%;}
.flex-item {
background-color: black;
padding: 5px;
width: 200px;
height: 150px;
margin-top: 10px;
line-height: 150px;
color: white;
font-weight: bold;
font-size: 3em;
text-align: center;
}
.flex-item1{
background-color: tomato;
padding: 5px;
width: 200px;
height: 150px;
margin-top: 10px;
line-height: 150px;
color: white;
font-weight: bold;
font-size: 3em;
text-align: center;
}
h1{flex:1;color:white;font-size:1.5em;font-weight: 300;border-bottom: 3px solid white;margin-bottom: 5%;padding:2%;margin-top:0;}
img{width:100px; height:auto;}
div{list-style: none;}
I'm not really clear on the exact nature of what it is you are attempting here but it looks like you should be using rows for each of the menus and headings.
Now there may be additional layout for the container but without a really clear idea of the requirement it's hard to be sure.
For the basic layout of each ROW you don't need flexbox initially.
The valid structure would be something like:
<div class="row">
<h1>Menu Heading</h1>
<ul>
<li class="flex-item"></li>
<li class="flex-item"></li>
<li class="flex-item"></li>
<li class="flex-item"></li>
</ul>
</div>
Now the row will be 100% wide by default (unless in a flex-column but that's another question).
The h1 and ul are block level and so will also be 100% wide but the li need to be horizontal too. This is where we can use flexbox.
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
.flex-item {
background-color: pink;
border: 1px solid grey;
padding: 5px;
width: 200px;
height: 150px;
margin-top: 10px;
line-height: 150px;
color: white;
font-weight: bold;
font-size: 3em;
text-align: center;
}
.row {
background: #c0ffee;
margin-bottom:1em;
}
ul {
display: flex;
list-style: none;
justify-content: space-between;
}
<div class="row">
<h1>Menu Heading</h1>
<ul>
<li class="flex-item"></li>
<li class="flex-item"></li>
<li class="flex-item"></li>
<li class="flex-item"></li>
</ul>
</div>
<div class="row">
<h1>Second Heading</h1>
<ul>
<li class="flex-item"></li>
<li class="flex-item"></li>
<li class="flex-item"></li>
<li class="flex-item"></li>
</ul>
</div>
<div class="row">
<h1>Menu Heading</h1>
<ul>
<li class="flex-item"></li>
<li class="flex-item"></li>
<li class="flex-item"></li>
<li class="flex-item"></li>
</ul>
</div>
I am trying to leverage sticky properties to create a menu that stays fixed while scrolling. Am I missing a property? I have foundation properly configured and set up.
HTML:
<div class="fixed contain-to-grid">
<nav class="top-bar" data-topbar="">
<div class="top-bar-title">
<strong>Title Here</strong>
</div>
<div class="top-bar-left">
<ul class="dropdown menu" data-dropdown-menu>
<li class="menu-text">A</li>
<li class="menu-text">B</li>
<li class="menu-text">C</li>
<li class="menu-text">D</li>
</ul>
</div>
</nav>
</div>
CSS:
.top-bar{
height: 100px;
width: 100%;
color: white;
text-decoration: none;
font-size: 30px;
font-family: mainFont;
}
If you want to make the menu sticky, and don't move with scroll, then use fixed position.
.top-bar-left{
position: fixed;
}
Just add position: fixed; in the end as in the example
.top-bar{
height: 100px;
width: 100%;
color: white;
text-decoration: none;
font-size: 30px;
font-family: mainFont;
position: fixed;
}