I am trying to create a layout using a fixed header and sidebar (when visible/active) that does not disappear when scrolling, hope the http://jsfiddle.net/goltech/tfx1j6uh/ explains it better? Using the KendoUI ReponsivePanel and the demo from Kendo website. Thanking You
#sidebar {
/* panel background should be set to match design */
background: #092646;
}
article {
/* clear the floating sidebar */
overflow: hidden;
}
html, body {
margin: 0;
padding: 0;
}
body {
font-family: Arial, sans-serif;
}
header {
padding: 1em;
color: #fff;
background-image: linear-gradient(to top, #014F80 0%, #092646 100%);
}
h1 {
display: inline;
}
p {
padding: 2em;
}
nav a {
border: 1px solid #ccc;
background: #ddd;
display: block;
text-decoration: none;
padding: .5em;
}
Related
I'm trying to make a horizontal navigation bar that has some menu items in a browser but condenses down to a hamburger menu if used on a mobile or other smaller device. I've been having a lot of trouble with actually removing the menu items and adding them to the hamburger menu. Any help would be greatly appreciated.
sample HTML:
<div class="navbar">
First Name
Projects
Resume
About
</div>
sample CSS:
.navbar {
overflow: hidden;
background-color: #ECECEC;
width:100vw;
position: fixed; /* Set the navbar to fixed position */
top: 0; /* Position the navbar at the top of the page */
width: 100%; /* Full width */
border-bottom: 1px solid black;
}
/* Links inside the navbar */
.navbar a {
float: left;
display: flex;
color: #474243;
text-align: center;
padding: 30px 16px;
text-decoration: none;
font-size: 150%;
font-family: 'Roboto', sans-serif;
}
.navbar a:nth-of-type(1) {
/* padding-right: 680px; */
color: black;
margin-right: 680px;
padding-left: 50px;
/*background: #777; */
font-size: 200%;
font-family: 'Roboto', sans-serif;
}
/* Change background on mouse-over */
.navbar a:hover {
background: #ddd;
color: black;
}
#media (max-width: 952px){
navbar a{
font-size: 16px;
}
}
You can use the #media query. Here's some examples and guidelines
https://www.w3schools.com/cssref/css3_pr_mediaquery.asp
I can't seem to center the navigation bar buttons. Is there a way to do this in the css file? I have tried centring but it hasn't worked.
HTML
<div class="navbar">
Home
News
Contact
</div>
CSS
.navbar {
overflow: hidden;
background-color: #333;
position: fixed; /* Set the navbar to fixed position */
top: 0; /* Position the navbar at the top of the page */
width: 1300px; /* Full width */
z-index: 99999;
text-align: center;
}
/* Links inside the navbar */
.navbar a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
/* Change background on mouse-over */
.navbar a:hover {
background: #ddd;
color: black;
}
/* Links inside the navbar */
.navbar a {
display:inline-block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
I have modified your style for ".navbar a". Hope it will work for you.
You will love flexbox - super simple, and very useful.
Flexbox requires a parent and items.
You turn flexbox on on the parent, and then the various switches are set either on the parent (as in the case of justify-content) or on the items.
Here is a great cheatsheet for Flexbox.
Here is a fantastic YouTube tutorial.
DEMO:
.navbar {
overflow: hidden;
background-color: #333;
position: fixed; /* Set the navbar to fixed position */
top: 0; /* Position the navbar at the top of the page */
z-index: 99999;
text-align: center;
width: 100vw; /* Full width */
display:flex;
justify-content:center;
border:5px solid yellow;
}
/* Links inside the navbar */
.navbar a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
border:1px solid pink;
}
/* Change background on mouse-over */
.navbar a:hover {
background: #ddd;
color: black;
}
<div class="navbar">
Home
News
Contact
</div>
You can use
<div class="navbar">
<div style="display: inline-block;">
Home
News
Contact
</div>
</div>
If I understand you correctly, you need to align the links in the center of the navbar, for this you need to do:
CSS:
/* Links inside the navbar */
.navbar a {
/* float: left; remove this property */
display: inline-block; /* change display: block to inline-block */
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
You can see an example on: https://jsfiddle.net/4gy2japx/
.navbar {
overflow: hidden;
background-color: #333;
position: fixed; /* Set the navbar to fixed position */
top: 0; /* Position the navbar at the top of the page */
width: 100%; /* Full width */
z-index: 99999;
text-align: center;
margin: 0 auto;
}
.navbar ul {
display:inline-block;
list-style-type: none;
}
/* Links inside the navbar */
.navbar a {
display: inline-block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
/* Change background on mouse-over */
.navbar a:hover {
background: #ddd;
color: black;
}
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<div class="navbar">
Home
News
Contact
</div>
</body>
</html>
You have to remove float left and add display: inline-block;
.navbar a {
float: left;
display: block;
There are several mistakes in your elements styling. Trying to align floated elements, assigning display block to linear links and defining empirical lengths when you're aiming for full lengths are some of them.
Try this instead:
html,body {
margin: 0; /* overwrite browser defaults */
}
.navbar{
overflow: hidden;
background-color: #333;
position: fixed; /* Set the navbar to fixed position */
top: 0; /* Position the navbar at the top of the page */
width: 100%; /* Full width */
z-index: 99999;
text-align: center;
}
/* Links inside the navbar */
.navbar a {
display: inline-block;
color: #f2f2f2;
padding: 14px 16px;
text-decoration: none;
}
/* Change background on mouse-over */
.navbar a:hover {
background: #ddd;
color: black;
}
<div class="navbar">
Home
News
Contact
</div>
I have used Ryan's sticky footer in asp.net project. I have used it on master page and on child master page I have a vertical navbar. The problem is the footer goes behind the navbar. I want it to be on the top of the navbar. Also there is is a scrollable horizontal space on right side in child master page which I dont want. Also some of my pages have less content so how can I change thier height according to my wish so that I can set the footer accordingly.
vertical navbar:
#sidebar-nav ul{
background-color:#2ca8d2;
color: white;
height: 100%;
padding: 0;
position: fixed;
left: 0;
top: 50px;
width: 19%;
z-index: 2;
display:block;
}
#sidebar-nav li a {
display: block;
color: white;
padding: 8px 0 8px 16px;
text-decoration:none;
font-size:16px;
border-bottom: 1px solid #fff;
}
#sidebar-nav li a.active {
background-color: #4CAF50;
color: white;
}
#sidebar-nav li a:hover:not(.active) {
background-color: orangered;
color: white;
}
footer:
* {
margin: 0;
}
form, html, body {
height: 100%;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto 200px;
}
.footer, .push
{
height: 200px;
background-color:#333;
z-index:10;
}
.footer, .push {
clear: both;
}
I want it to be on the top of the navbar.
Since you have
z-index: 2;
on your vertical navbar, you would need a higher z-index, such as 3, on the main container of your footer. You have z-index 10 on the footer class, but I dont know whats nested in what with your html file. Could you post the html code for the footer and vertical navbar too?
I am creating a website using Jekyll, and publishing it using Github pages. When I jekyll serve the website in local, everything works fine, and it looks normal both from my computer and smartphone. But when I visit the Github pages one from my smartphone, some divs seem to be shifted a bit, and the font-awesome icons are not rendered. Strangely, it works fine when I visit it (the Github pages one) from my computer.
I am not sure where to look at. Could something happen on github and be overriding only some media queries?
I have no idea yet what is relevant in the code, but I'll try to create some MCV example. Until then, the source code is here and the website is here.
Here's the CSS, mostly taken from a Pure css layout:
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
/*
* -- BASE STYLES --
* Most of these are inherited from Base, but I want to change a few.
*/
body {
line-height: 1.7em;
color: #7f8c8d;
font-size: 13px;
}
h1,
h2,
h3,
h4,
h5,
h6,
label {
color: #34495e;
}
div.tweet-box {
font-size: 20px;
font-weight: bold;
border-left: 3px solid #1f8dd6;
padding: 1em 1.6em;
font-weight: 100;
border-radius: 5px;
line-height: 1em;
}
.fat {
font-weight: bold;
}
a.shy-link {
text-decoration: none;
color: #7f8c8d;
}
a:visited.shy-link{
text-decoration: none;
color: #7f8c8d;
}
a:hover.shy-link{
text-decoration: none;
color: #34495e;
}
.pure-img-responsive {
max-width: 100%;
height: auto;
}
/*
* -- LAYOUT STYLES --
* These are some useful classes which I will need
*/
.l-box {
padding: 0.4em;
}
.l-box-lrg {
padding: 2em;
border-bottom: 1px solid rgba(0,0,0,0.1);
}
.is-center {
text-align: center;
}
/*
* -- PURE FORM STYLES --
* Style the form inputs and labels
*/
.pure-form label {
margin: 1em 0 0;
font-weight: bold;
font-size: 100%;
}
.pure-form input[type] {
border: 2px solid #ddd;
box-shadow: none;
font-size: 100%;
width: 100%;
margin-bottom: 1em;
}
/*
* -- PURE BUTTON STYLES --
* I want my pure-button elements to look a little different
*/
.pure-button {
background-color: #1f8dd6;
color: white;
padding: 0.5em 2em;
border-radius: 5px;
}
a.pure-button-primary {
background: white;
color: #1f8dd6;
border-radius: 5px;
font-size: 120%;
}
/*
* -- MENU STYLES --
* I want to customize how my .pure-menu looks at the top of the page
*/
.home-menu {
padding: 0.5em;
text-align: center;
box-shadow: 0 1px 1px rgba(0,0,0, 0.10);
}
.home-menu {
background: #2d3e50;
}
.pure-menu.pure-menu-fixed {
/* Fixed menus normally have a border at the bottom. */
border-bottom: none;
/* I need a higher z-index here because of the scroll-over effect. */
z-index: 4;
}
.home-menu .pure-menu-heading {
color: white;
font-weight: 400;
font-size: 120%;
}
.home-menu .pure-menu-selected a {
color: white;
}
.home-menu a {
color: #6FBEF3;
}
.home-menu li a:hover,
.home-menu li a:focus {
background: none;
border: none;
color: #AECFE5;
}
/*
* -- SPLASH STYLES --
* This is the blue top section that appears on the page.
*/
.splash-container {
background: #1f8dd6;
z-index: 1;
overflow: hidden;
/* The following styles are required for the "scroll-over" effect */
width: 100%;
height: 100%;
top: 0;
left: 0;
position: fixed !important;
}
.splash {
/* absolute center .splash within .splash-container */
width: 80%;
height: 50%;
margin: auto;
position: absolute;
top: 100px; left: 0; bottom: 0; right: 0;
text-align: center;
text-transform: uppercase;
}
/* This is the main heading that appears on the blue section */
.splash-head {
font-size: 20px;
font-weight: bold;
color: white;
border: 3px solid white;
padding: 1em 1.6em;
font-weight: 100;
border-radius: 5px;
line-height: 1em;
}
/*
* -- CONTENT STYLES --
* This represents the content area (everything below the blue section)
*/
#keyframes blink {
0% {
opacity: 1;
}
50% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.content-caret img {
display: block;
margin-right: auto;
margin-left: auto;
animation: blink 2s;
animation-iteration-count: infinite;
}
.content-caret img.content-caret-bottom {
animation-delay: 0.1s;
transform: translate(0, -80%);
}
.content-caret img.content-caret-top {
animation-delay: 0s;
}
.content-wrapper {
/* These styles are required for the "scroll-over" effect */
position: absolute;
top: 87%;
width: 100%;
min-height: 12%;
z-index: 2;
background: transparent;
}
.content-wrapper-solid {
background: white;
}
/* This is the class used for the main content headers () */
.content-head {
font-weight: 400;
text-transform: uppercase;
letter-spacing: 0.1em;
margin: 2em 0 1em;
/*padding: 10px;*/
}
/* This is a modifier class used when the content-head is inside a ribbon */
.content-head-ribbon {
color: white;
}
/* This is the class used for the content sub-headers () */
.content-subhead {
color: #1f8dd6;
}
.content-subhead i {
margin-right: 7px;
}
/* This is the class used for the dark-background areas. */
.ribbon {
background: #2d3e50;
color: #aaa;
}
/* This is the class used for the footer */
.footer {
background: #111;
font-size: 11px;
}
/*
* -- TABLET (AND UP) MEDIA QUERIES --
* On tablets and other medium-sized devices, we want to customize some
* of the mobile styles.
*/
#media (min-width: 48em) {
/* We increase the body font size */
body {
font-size: 16px;
}
/* We want to give the content area some more padding */
.content {
padding: 1em;
}
/* We can align the menu header to the left, but float the
menu items to the right. */
.home-menu {
text-align: left;
}
.home-menu ul {
float: right;
}
/* We increase the height of the splash-container */
/* .splash-container {
height: 500px;
}*/
/* We decrease the width of the .splash, since we have more width
to work with */
.splash {
width: 50%;
height: 50%;
}
.splash-head {
font-size: 250%;
}
/* We remove the border-separator assigned to .l-box-lrg */
.l-box-lrg {
border: none;
}
}
/*
* -- DESKTOP (AND UP) MEDIA QUERIES --
* On desktops and other large devices, we want to over-ride some
* of the mobile and tablet styles.
*/
#media (min-width: 78em) {
/* We increase the header font size even more */
.splash-head {
font-size: 300%;
}
}
EDIT:
Here are a few pictures to explain what I mean.
From the Android default browser (which doesn't support CSS3 transitions and transforms, it seems): (OK)
From Firefox on Android: (NO HEADER, WEIRD BLUE BAR: NOT OK)
From my desktop's Firefox (resized to match a phone's dimension): (OK)
What's surprising is that it seems to only occur on firefox on Android. I also tried on an iPhone, and the result is as expected. Why that only happens from Github-pages and not from my local server is what startles me the most.
EDIT 2:
I just compared the css produced by Github Pages and the css produced by my server, and besides a few linebreaks and spaces here and there, they are identical. Could the difference reside in the HTML?
I've just reproduced this on Firefox 38 on Ubuntu.
While trying to find a box-model problem I saw this in my Firefox security console :
Blocked loading mixed active content "http://yui.yahooapis.com/pure/0.6.0/pure-min.css"[Learn More] nicowcow.github.io
Blocked loading mixed active content "http://yui.yahooapis.com/pure/0.6.0/grids-responsive-min.css"[Learn More] nicowcow.github.io
Blocked loading mixed active content "http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css"[Learn More]
Then the problem might be here (see MDN documentation about MixedContent).
So, the solution is to request those three ressources over https.
This does work for Font-awesome at https://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css but not for pure files (NET::ERR_CERT_COMMON_NAME_INVALID).
You will have to host them on your server or find another provider which serve over htpps.
So im fully aware of the amount of questions asked about "Sticky Footers", and have also referenced many, MANY different questions on here and websites about sticky footers. I've created a fresh template away from this project that work and have examples of how sticky footers operate, be it inside the wrapper or out...
However, i just cant seem to get it operate correctly within my solution.
Currently the footer appears to be "sticky", however on one of my main pages, the content (images and text) seem to overlap the footer, due to the footer not being pushed to the bottom correctly. It seems to sit just below the screen (Meaning you have to scroll slightly to see the footer) - But on this page it sits in that location, doesnt get pushed down and then the content overlaps.
I've tried everything, Removing 100% on HTML, BODY, WRAPPER, contentDiv, but basically, one thing works, which breaks another.
What im after is, ContentDiv = 100% (pushing down the footer). So i should be able to create a blank page, the footer be glued to the bottom, and if content increases it pushed it down... Simple right? But tearing out my hair with this :/
So, any help would be massively appreciated, as i have a short deadline to get this sorted.
Fiddle Demo
CSS
html
{ margin: 0px; padding: 0px; height:100%; }
body
{ margin: 0px; padding: 0px; height: 100%; font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; font-size: 12px; }
/* { margin: 0px; padding: 0px; height: 100%; font-family: 'Montserrat', sans-serif; font-size: 12px; } */
p { font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; font-size: 12px; }
h1 { font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; font-size:24px; }
h2 { margin:0px; padding:0px; font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; }
/* PAGE FORMATTING - START*/
span:hover { /* text-decoration: underline; */ }
a:link, a:visted { }
ahover, a:active { }
.link_nav_header{
padding:0px;
font-size:20px;
font-weight:bold;
color:#333333;
cursor:pointer;
}
.but_default
{
padding: 2px;
border: 1px solid #009900;
background-color: #33FF00;
/* background-color: #dddbdb; */ /* TWO COLOURS? */
}
.but_events-buybutton
{
padding:3px;
min-width:90%;
margin-bottom:5px;
color:#ffffff;
background-color:#378ec8;
}
.but_all
{
min-width:90%;
cursor: pointer;
margin: 2px;
}
/* HEADER - START */
.hdr_container
{
width:100%;
height:110px;
padding:0px;
margin:0px;
position:relative;
background-color:#0099ff;
color: #ffffff;
overflow: hidden;
}
#hdr_profile-icon {
margin-top: 1%;
margin-right: 1%;
float: right;
background-color: inherit;
}
/* NEW NAVIGATION */
#nav {
width: 100%;
padding: 0;
margin: 0 auto;
background-color: #333333;
position: absolute;
bottom: 0%;
}
#nav ul {
list-style: none;
/* width: 800px;*/ /* REMOVE TO STRETCH NAV TO FULL WIDTH */
width: 100%;
margin: 0 auto;
padding: 0;
}
#nav li {
float: left;
text-align: center;
}
#nav ul li{
width: 11%; /* STRETCHES NAV TO FULL WIDTH */
}
#nav li a {
padding: 8px 15px;
display: block;
text-decoration: none;
font-weight: bold;
color: white;
text-transform:uppercase
}
#nav li:first-child a {
background: red;
width: 10px;
font-weight: normal;
}
#nav li a:hover {
/* color: #c00; */
background-color: #0099ff;
}
#nav a:hover a:focus {
/* color: #c00; */
background-color: red;
}
/* MAIN CONTENT - START */
#wrapper {
clear: both;
/* margin: 0 auto; */
width: 100%;
height:100%;
min-height: 100%;
/* margin-bottom: -75px; */
z-index:10;
}
.contentDiv
{
clear: both;
width:65%;
min-width: 800px;
height:90%;
background-color:#ffffff;
margin-left:auto;
margin-right:auto;
/* z-index: -9999; */
}
/* TABLE - START */
.tbl_container-centered
{
width:100%;
height:100%;
min-height:100%;
/* padding-bottom: 20px; */
margin-left:auto;
margin-right:auto;
display:table;
overflow:auto;
/* margin-bottom: 75px; */
display: inline-table;
vertical-align: middle;
}
.tbl_containerpaneltext-centered
{
width:95%;
min-height:35%;
margin-left:auto;
margin-right:auto;
background-color:red;
}
.tbl_head-genericthread
{
min-height:3%;
max-height:3%;
text-align:center;
color:#ffffff;
background-color:#0099ff;
}
.tbl_events-head {
width: 100%;
height: 100%;
min-height: 100%;
border: 1px solid;
text-align: left;
border-collapse: collapse;
}
.tbl_grid-events
{
background-color: #ffffff;
}
.tbl_pickseats-famtable
{
width:100%;
background-color:#e1e1e1;
}
table#tbl_events{
height:100%;
min-height:100%;
border-collapse: collapse;
border-right: 1px solid #333333;
border-left: 1px solid #333333;
}
.link_moreinfo{
padding:0px;
font-size:14px;
font-weight:bold;
color:#0099ff;
cursor:pointer;
}
#event_row {
height: 140px;
font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
}
#basket2 {
background: red;
}
/* FOOTER CSS - START */
.footer_container
{
clear: both;
width:100%;
height:75px;
bottom:0;
background-color:#0099ff;
/* position:absolute; */
}
.footer_container, .wrapper:after {
/* .push must be the same height as footer */
height: 75px;
}
.wrapper:after {
content: "";
display: block;
}
.footer_global-bottom {
width: 100%;
margin: auto;
padding-top: 20px;
text-align: center;
color: white;
background: #333333;
}
.footer_global-bottom a {
color: white;
text-decoration: none;
}
/* ERROR HANDELING */
.error {
background: #ef7474;
border: 1px solid #f5aca6;
text-align: center;
}
.success
{
background: #74e963;
border: 1px solid #59e836;
text-align: center;
}
.alerts_box {
padding: 10px;
width: 250px;
position: absolute;
visibility: hidden;
font-size: 10px;
color:black;
}
.alerts {
width: 275px;
z-index: 2;
padding-bottom: 40px;
}
have you considered using this piece of code:
.footer_container {
position: fixed;
bottom: 0;
z-index: 100;
}
If you want full content being visible you can add to wrapper something like this:
margin-bottom: (footer-height)px;
Or use padding-bottom instead of margin-bottom.
in your #wrapper rule-set change height:100% to height:auto and remove min-height:100%.
jsFiddle
#wrapper {
clear: both;
width: 100%;
height:auto;
z-index:10;
}
I believe that setting the height to 100% is setting it to 100% of the browser window, not 100% of the content. I could be wrong about that though.
This will place the footer at the end of the content. On pages where the content is less than the height of the window, you can wrap the footer and give the footer wrapper a class like this:
.minContentFooter {
position: absolute;
bottom: 0;
}
If the case is that the content is loaded dynamically and you don't know if it will fill a browser window, then you will need a bit of javascript to have it both ways - either at the bottom of the content or the bottom of the window when there is minimal content.
Problem was solved, not by CSS, but by Javascript.
The problem was due to the page loading dynamic content from a table, it never knew how big the contentDiv was, so didnt know where to but the footer.
The sticky footer is achieved by setting CSS % heights, and also using javascript to help correct for pages with no content or those with dynamically loaded content.
The code below explains the active javascript:
var totalHeight = $('#header').height() + $(id).height();
var contentDivHeight = $('#content').height();
var wrap = $('#wrapper');
if (totalHeight >= contentDivHeight) {
wrap.removeClass('wrapper-height');
wrap.addClass('wrapper-minHeight');
} else {
wrap.addClass('wrapper-height');
wrap.removeClass('wrapper-minHeight');
}
The code checks the height of the header and the content contained within the content and if its over the footer switches to a css class enforcing min-heights rather than heights to allow the footer to flow to the end of the content.
Many Thanks for everyone's help.