I'd like to create the main page, with a navtop, a nav left side and content in middle. The menu and the navtop should be fixed on the screen. Only the content should be scrollable.
When the menu is expanded, the content is pushed to the right, without element reordering inside, just pushed as it is on the right, so a part of the content on the right will be hidden out-out the screen while a menu is expanded.
Here are images to illustrate:
Collapsed menu
Expanded menu
(Sorry I can't embed images because of my low reputation)
So when I hover the menu, it expands and pushes the content to the right. When a mouse is out the menu, it collapses and only shows icons.
I nearly managed to do this, but I can't give you the code, it's professional.
I'm the beginner in CSS, it's hard for me I tried a lot but no way to managed to build this page.
I put the menu and the content on float: left, but when I load a new page, the content is on the menu, so I can't click on menu icons anymore.
You can try this demo,
function openNav() {
document.getElementById("mySidenav").style.width = "250px";
document.getElementById("main").style.marginLeft = "250px";
}
function closeNav() {
document.getElementById("mySidenav").style.width = "0";
document.getElementById("main").style.marginLeft= "0";
}
.sidenav {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #111;
overflow-x: hidden;
transition: 0.5s;
padding-top: 60px;
}
.sidenav a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: #818181;
display: block;
transition: 0.3s;
}
.sidenav a:hover, .offcanvas a:focus{
color: #f1f1f1;
}
.sidenav .closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 36px;
margin-left: 50px;
}
#main {
transition: margin-left .5s;
padding: 16px;
}
<div id="mySidenav" class="sidenav">
×
About
Services
Clients
Contact
</div>
<div id="main">
<span style="font-size:30px;cursor:pointer" onclick="openNav()">☰ open</span>
</div>
I made this that should work how you want if I understood your post correctly. It uses a few lines of Jquery for the animation when you hover over the side navigation menu. The icons and text are just placeholders
$(document).ready(function(){
$(".sidenav").hover(function(){
$(".hidetext").stop(true).toggle("fast");
});
});
html, body{
height: 100%;
min-height: 100%;
}
.navbar {
margin-bottom: 0 !important;
}
.sidenav-wrapper {
margin-top: 51px;
}
.sidenav {
background-color: aquamarine;
height: 100%;
display: inline-block;
float: left;
z-index: 1;
position: fixed;
}
.sidenav span {
font-size: 45px;
padding: 20px;
}
.sidenav span .hidetext {
font-size: 18px;
margin-left: 30px;
margin-top: 12px;
float: right;
display: none; /* Changes to inline-block on hover */
}
.main-content {
margin-top: 51px;
margin-left: 89px;
z-index: -1;
position: absolute;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="main.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<meta charset=utf-8>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#topnav">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="topnav">
<ul class="nav navbar-nav">
<li>Link</li>
<li>Link</li>
<li>Link</li>
</ul>
</div>
</div>
</nav>
<div class="sidenav">
<div class="sidenav-wrapper">
<span class="glyphicon glyphicon-home home" aria-hidden="true"><p class="hidetext">Home</p></span>
<br>
<span class="glyphicon glyphicon-cog" aria-hidden="true"><p class="hidetext">Options</p></span></div>
</div>
<div class="main-content">
<p>Stuff on the right of side navigation bar</p>
<div class="test"></div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="script.js"></script>
</body>
</html>
Related
Whenever i Resize my website it keeps getting messed up, and I have tried everything to fix it but i cant figure it out. I tried bootstrap, but didn't quit understand the meaning of it. I am new so advice is appreciated and Thanks for helping
Regard Hussein M.
body {
color: white;
font-family: sans-serif;
background-repeat: round;
background-image: url(Gaming.jpg);
background-position: -430px -100px;
}
h1 {
font-family: sans-serif;
width: 100%;
height: 100%;
margin: 10px;
padding: 0px;
}
ul {
}
table {
padding-left: 50px;
}
body {
min-width: 800px;
position: relative;
font-family: sans-serif;
}
img {
margin: 0;
position: absolute;
top: 500%;
left: 50%;
margin-right: -50%;
border-color: red;
border-width: medium;
}
#menu1 {
float: left;
padding-left: 25px;
}
#menu2 {
float: right;
padding-right: 50px;
}
.nav {
font-size: 17px;
font-family: inherit;
position: relative;
top: -9px;
padding: 9px 0px 50px 0px;
margin-bottom: 0px;
}
.nav ul,li,a{
display: inline;
padding-left: 10px;
text-decoration: none;
color: rgb(22, 239, 239);
}
.main {
position: absolute;
top: 150px;
left: 5px;
}
.h1z1 {
border-radius: 5px;
border: 1px solid #fff;
margin: 1 auto;
padding: 0px ;
margin-top: 60px;
width: 20%;
text-align: left;
}
.h1z1-img {
border-radius: 5px;
display: inline-block;
}
.h1z1-description {
display: inline-block;
margin-left: -25px;
top: px;
}
.Buy {
text-decoration: underline;
margin-left: -8px;
}
.H1Z1head {
margin: -10px;
margin-left: 40px;
}
.go {
color:aqua;
position: fixed;
top: 190px;
left: 380px;
}
.go {
text-decoration: underline;
font-size: 25px;
}
<!DOCTYPE HTML>
<html>
<head>
<!--Start of Zendesk Chat Script-->
<script type="text/javascript">
window.$zopim||(function(d,s){var z=$zopim=function(c){z._.push(c)},$=z.s=
d.createElement(s),e=d.getElementsByTagName(s)[0];z.set=function(o){z.set.
_.push(o)};z._=[];z.set._=[];$.async=!0;$.setAttribute("charset","utf-8");
$.src="https://v2.zopim.com/?4aNAebvVIseGLS8uJOO3z9Bsrlfecjl7";z.t=+new Date;$.
type="text/javascript";e.parentNode.insertBefore($,e)})(document,"script");
</script>
<!--End of Zendesk Chat Script-->
<title>Gaming Library</title>
<link rel="stylesheet" type="text/css"
href="Stylesheet.css" />
</head>
<body>
<div class="nav">
<ul id="menu1">
<li>Homes</li>
<li>About</li>
<li>Affliates</li>
<li>Donate</li>
</ul>
<ul id="menu2">
<li>Old web</li>
<li>Sign Up</li>
<li>Login</li>
<li>Contact Support</li>
</ul>
</div>
<div class="go">
<h1>Go to feautered games</h1>
</div>
<!-- Næste side
<div class="h1z1">
<div>
<ul>
<h2 class="H1Z1head">H1Z1</h2>
</ul>
<img class="h1z1-img" src="KOTK.jpg" width="250" height="180">
</div>
<div class="h1z1-description">
<ul>
<li>
<p>H1Z1: King of the Kill is a fast-paced shooter in which players compete in large-scale chaotic PvP spectacles of skill, wit and a little luck, where everyone must fight to the death to stand alone at the top of the podium.</p>
<h3 class="Buy">Buy Now only $20.99 </h3>
</li>
</ul>
</div>
</div>
-->
</body>
</html>
Here is a simple example how to get your content responsive with Bootstrap, that you didn't understand. https://jsfiddle.net/qaxhxcb3/1/ (Here u can resize and such)
body {
font-family: 'Montserrat', sans-serif !important;
}
.navbar {
padding-top: 15px;
padding-bottom: 15px;
border: 0;
border-radius: 0;
margin-bottom: 0;
font-size: 14px;
}
.navbar-nav li a:hover {
color: green !important;
}
section h1 {
color: white;
}
.green {
background-color: green;
}
.red {
background-color: red;
}
.blue {
background-color: blue;
}
.pink {
background-color: pink;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<!-- Navbar -->
<nav class="navbar navbar-default">
<div class="container">
<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="#">Gaming Library</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<li>Homes</li>
<li>About</li>
<li>Donate</li>
<li>Affliates</li>
<li>Support</li>
</ul>
</div>
</div>
</nav>
<!-- First section -->
<section>
<div class="container">
<div class="row">
<div class="col-sm-4 green">
<h1>Lorem ipsum</h1>
</div>
<div class="col-sm-4 red">
<h1>Lorem ipsum</h1>
</div>
<div class="col-sm-4 blue">
<h1>Lorem ipsum</h1>
</div>
</div>
</div>
</section>
<!-- Second section -->
<section>
<div class="container">
<div class="row">
<div class="col-sm-12 pink">
<h1>Lorem ipsum</h1>
</div>
</div>
</div>
</section>
</body>
</html>
As can you see, you put your content inside the class "container", then "row" after than u choose how you will display your content with the grid system. The Bootstrap grid system allows up to 12 columns across the page.
and the grid system has four classes:
xs (for phones)
sm (for tablets)
md (for desktops)
lg (for larger desktops)
and there is also different columns that decide how it will be displayed on the screen. In the example i got three col-sm-4 and it must always add up to 12 for each row class. In the second section i created there is col-sm-12, and that fill up the whole grid. Hope this helps a litte bit.
But, i suggest you read some Bootstrap tutorials from w3school to get a hang of it.
I cannot center my bootstrap thumbnail images no matter what I try on tablet size and smaller. Once thumbnails reach thoses sizes they no longer scroll to stay center of screen. I have tried everything I can think of from adding center block to both my thumbnail class's and my img responsive class's HTML to text-algin center and margin auto 0. Nothing changes.
Here is my html
<div class="portfolio">
<div class="container">
<a name="porty"></a>
<h1 class="text-center" id = "port">My Work</h1>
<div class="row">
<div class="col-md-4">
<div class="thumbnail ">
<div class="caption">
<h4 class="text-center">A Berine Sanders Tribute page made with HTML,CSS, and Bootstrap</h4> <i class="fa fa-codepen fa-5x fa-fw" id="first"></i>
</div>
<img src="http://goodedevelopment.com/images/Bernie.PNG" class="img-responsive center-block" alt="tribute">
</div>
<legend>Tribute page</legend>
</div>
<div class="col-md-4">
<div class="thumbnail">
<div class="caption">
<h4 class="text-center">Google mockup page made with HTML,CSS,and Bootstrap</h4>
<i class="fa fa-codepen fa-5x fa-fw" id ="second"></i>
</div>
<img src="http://goodedevelopment.com/images/google.png" class="img-resposive center-block" alt="google">
</div>
<legend>Google homepage</legend>
</div>
<div class="col-md-4">
<div class="thumbnail">
<div class="caption">
<h4 class="text-center">A cannon game made with HTML,CSS, and Javascript</h4>
<i class="fa fa-codepen fa-5x fa-fw" id ="icon"></i>
</div>
<img src="http://goodedevelopment.com/images/cannon.png" class="img-responsive center-block" alt="cannon">
</div>
<legend>Cannon game</legend>
</div>
</div>
Here is my CSS
/*Portfolio*/
.portfolio {
background-color:#706C61;
padding-top: 50px;
padding-bottom: 100px;
display: inline-block;
width: 100%;
height: 800px;
position:relative;
}
.portfolio h1 {
font-size: 65px;
font-family: "Roboto",serif !important;
color: #0d0d0d !important;
}
.row {
padding-top: 100px;
}
.thumbnail {
height: 250px;
display: flex;
justify-content: center;
align-items: center;
position: relative;
overflow: hidden;
border: 1px solid black !important;
border-radius: 5px !important;
}
.caption img {
flex-shrink: 0;
max-width 100%;
max-height: 100%;
}
.caption {
position: absolute;
top: 0;
right: 0;
background: rgba(128, 128, 128, 0.75);
width: 100%;
height: 100%;
padding: 2%;
display: none;
text-align: center;
color: #fff !important;
z-index: 2;
font-family: "Montserrat",serif !important;
}
.caption a {
text-decoration: none;
color: white;
}
.caption h4 {
position: relative;
left: 5px;
bottom: 10px;
font-size: 25px;
}
.caption i:hover {
color: orange !important;
}
legend {
font-family: "Roboto",serif !important;
border-bottom: none !important;
color: #0d0d0d !important;
font-size:22px; !important;
height:200px;
}
#first {
position: relative !important;
bottom: -35px !important;
}
#second {
position: relative !important;
bottom: -35px !important;
}
#icon {
position: relative;
top: 30px;
}
#media screen and (min-width:767px) and (max-width:1199px) {
#first {
position: relative;
bottom: 20px;
}
#icon {
top: 50px !important;
}
.caption h4 {
font-size: 20px;
}
}
#media screen and (min-width:767px) and (max-width:991px) {
#first {
position: relative;
top: 50px;
}
.caption h4 {
font-size: 30px;
}
.caption {
font-size: 15px;
}
.caption i {
position: relative;
top: 50px;
}
#icon {
position: relative;
top: 65px !important;
}
.caption .fa {
font-size: 50px;
}
}
#media screen and (max-width: 1200px) {
.portfolio h1 {
font-size: 55px;
}
}
#media screen and (max-width: 991px){
.thumbnail {
height: 369px;
width: 440px;
position: relative;
right: -142px;
bottom: 48px;
}
.portfolio{
height: 2650px;
}
#profile li {
position: relative;
left: 60px;
}
.caption h4 {
font-size: px !important;
}
.caption .fa {
font-size: 80px !important;
}
legend {
height: 80px;
position: relative;
left: 139px;
bottom: 53px;
}
}
#media screen and (max-width: 965px) {
.portfolio {
margin-top: -150px !important;
}
}
#media screen and (max-width:767px) {
#first {
position: relative;
top: 25px;
}
.caption h4 {
font-size: 30px;
}
.caption {
font-size: 15px;
}
#port{
width: 50%;
height: 50%;
overflow: auto;
margin: auto;
position: absolute;
top: -1285px;
left: 0;
bottom: 0;
right: 0;
}
.thumbnail {
position: relative;
bottom: 0px;
}
legend
{
position: relative;
bottom: 13px;
}
}
#media screen and (max-width: 454px){
.caption h4{
font-size:25px;
}
#first{
top:15px;
}
#second{
top:15px;
}
}
#media screen and (max-width:400px) {
#icon {
position: relative;
bottom: 20px;
}
}
#media screen and (max-width:397px) {
#icon {
position: relative;
top: 0px;
}
}
#media screen and (max-width:390px) {
#first{
top:5px;
}
}
#media screen and (max-width:325px) {
.caption .fa {
font-size:60px;
}
}
#media screen and (max-width:307px) {
#first{
top:-5px;
}
}
/*End Portfolio*/
Here is the website
And finally here is a screenshot of what I am experiencing any help would be greatly appreciated thanks!
Instead of just using class="col-md-4" you should include "instructions" for Bootstrap at different screen sizes. Using multiple classes like class="col-xs-12 col-sm-6 col-md-4" would adjust the number of columns at the various screen sizes, making it easy to center the contents of each column, and just use the "img-responsive" class on the images so they will always fit in the column they are in. Then when the screen size is smaller, fewer columns will be displayed but the content of the column remains the same and stays centered in the column. If you want to center the column on the screen without filling the width of the screen (like to use col-xs-10 so it doesn't fill the width of 12 col's) then use the col-x-offset-x class to create a "blank" column to the left of where your div will display. You can use combinations of screen sizes and offsets as needed. The grid makes it really easy to get the alignment you want at different sizes without having to use CSS to define exact pixels for margins and whatnot. Once you start overwriting the CSS with "other instructions" as far as height/width go, things can get goofy...
Your fixed-navbar are with a width bigger than lower resolutions, theres alot of blank space on the right when you drop the resolution. I recommend you start developing your website following this basic bootstrap responsible template.
<!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" />
<meta name="description" content="" />
<meta name="author" content="" />
<title>Bare - Start Bootstrap Template</title>
<!-- Custom CSS -->
<link data-require="bootstrap-css#3.2.0" data-semver="3.2.0" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" />
<script data-require="jquery#*" data-semver="3.0.0" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.js"></script>
<style>
body {
padding-top: 70px;
/* Required padding for .navbar-fixed-top. Remove if using .navbar-static-top. Change if height of navigation changes. */
}
</style>
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<!-- Navigation -->
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Start Bootstrap</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li>
About
</li>
<li>
Services
</li>
<li>
Contact
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
<!-- Page Content -->
<div class="container">
<div class="row">
<div class="col-lg-12 text-center">
<h1>A Bootstrap Starter Template</h1>
<p class="lead">Complete with pre-defined file paths that you won't have to change!!</p>
<ul class="list-unstyled">
<li>Bootstrap v3.3.7</li>
<li>jQuery v1.11.1</li>
</ul>
</div>
</div>
<!-- /.row -->
</div>
<!-- /.container -->
</body>
</html>
Rebase your website inside the .container and link your style and keep going.. I hope it helps you to understand better the concepts of bootstrap, i cannot do the whole job for you after all you are a full stack developer.
I am trying to make some text responsive. For some reason, media queries are not working and the font is pushed below the image, whereas it should be above.
Here is my code:
// Bootstrap callback test
if ($('#bootstrapCssTest').is(':visible') === true) {
$('<link href="/bootstrap/js/bootstrap.min.js" rel="stylesheet" type="text/css" />').appendTo('head');
}
// Make .navbarButtonDiv go to its child 'a' tag's href on click
$(".navbarButtonDiv").click(function() {
window.location = $(this).find("a").attr("href");
return false;
});
// Collapse navbar on nav link click
$(document).on('click', '.navbar-collapse.in', function(e) {
if ($(e.target).is('a')) {
$(this).collapse('hide');
}
});
// Collapse navbar on document click
$(document).on('click', function() {
$('.collapse').collapse('hide');
});
/* Font imports */
#import url(https://fonts.googleapis.com/css?family=Bitter:400,400italic,700);
#font-face {
font-family: "FuturaNewLight";
src: url("fonts/FuturaNewLight.otf")
}
/* Navbar padding */
body {
padding-top: 100px;
overflow-x: hidden !important;
}
/* Navbar */
.navbar {
font-family: "Bitter", serif;
}
.navbar.navbar-custom .navbar-brand.navbar-brand-centered {
position: absolute;
left: 50%;
top: 0;
display: block;
width: 100px;
text-align: center;
padding: 0;
}
.navbar.navbar-custom > .wrapper .navbar-brand.navbar-brand-centered {
margin-left: -55px;
margin-top: 10px;
}
.navbar .nav.navbar-nav {
font-size: 150%;
}
.navbar-logo {
height: 145%;
}
/* Media queries */
#media (min-width: 768px) {
.wrapper {
padding-right: 15px;
}
.navbar.navbar-custom .navbar-nav > li > a {
line-height: 60px;
transition: background 200ms linear;
}
.navbar.navbar-custom .navbar-nav > li > a:hover {
background: #96D5FF;
}
}
#media (max-width: 767px) {
.navbar.navbar-custom {
padding: 20px 0;
}
.navbar.navbar-custom .navbar-collapse {
margin: 20px 0 -20px;
border: none;
box-shadow: none;
height: 260px;
}
.navbar.navbar-custom .navbar-nav > li > a {
text-align: center;
}
.navbar-logo {
margin-left: 20px;
height: 110%;
}
.futuraNewLightHeader {
font-size: 20px;
}
}
/* Header styling */
#jumbotronHeader {
position: relative;
font-family: "Bitter", serif;
width: 100%;
bottom: 9px;
}
#homePageImage {
position: relative;
-webkit-filter: blur(5px);
filter: blur(5px);
bottom: 30px;
z-index: -1;
width: 70%;
}
/* Font styling */
.futuraNewLightHeader {
position: absolute;
top: 550px;
font-size: 150px;
width: 100%;
color: White;
text-shadow: 2px 2px Black;
font-family: "FuturaNewLight";
}
.futuraNewLightSubHeader {
position: absolute;
top: 750px;
font-size: 60px;
width: 100%;
color: White;
text-shadow: 2px 2px Black;
font-family: "FuturaNewLight";
}
#dynamicHeaderText {
color: #2099FF;
}
/* General styling */
.centerText {
text-align: center;
}
<!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">
<title>Education for Everyone</title>
<link rel="icon" type="image/png" href="images/edufeLogo.png">
<!-- Bootstrap -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
<div class="container-fluid">
<nav class="navbar navbar-default navbar-fixed-top navbar-custom" role="navigation">
<div class="wrapper">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#js-navbar-collapse"> <span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<a class="navbar-brand navbar-brand-centered" href="#/">
<img class="navbar-logo" src="images/edufeLogo.png">
</a>
<div class="collapse navbar-collapse" id="js-navbar-collapse">
<ul class="nav navbar-nav navbar-left">
<li>Home
</li>
<li>About
</li>
<li>Learn
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>Log In
</li>
<li>Sign Up
</li>
</ul>
</div>
</div>
</nav>
<!-- Jumbotron -->
<div class="jumbotron" id="jumbotronHeader">
<h1 class="display-3 centerText">Education for Everyone</h1>
<p class="lead centerText">Learn. Create. Share.</p>
<hr class="m-y-3">
</div>
<!-- Image header -->
<div class="imageHeader">
<span class="futuraNewLightHeader centerText"><span id="dynamicHeaderText">Learn</span> something new.</span>
<span class="futuraNewLightSubHeader centerText">From the internet to real life.</span>
</div>
<img src="images/homePageImage.png" id="homePageImage" class="center-block img-responsive">
</div>
<!-- Script tags -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
</body>
</html>
Thanks! Any help is appreciated!
Move all text formatting options into the media queries and try then.
First you need set #media queries to #media screen and (max-width: ....).
Some cases browsers need screen parameter.
Second, you need change font size of elements when responsive. I suggest using em unit to make responsive.
Trying to add the typical bootstrap sticky footer - but cannot get it to work. I've been through it loads of times and suspect I am making some kind of stupid mistake - but I can't find it. I've done loads of searching on stackoverflow and been unable to make the numerous solutions work and I don't know why. I think I've got everything in the wrapper, and I've got the 'push' div too - but it's still refusing to work.
Here is my code:
HTML:
<!DOCTYPE html>
<html>
<head>
<meta content="width=device-width, initial-scale=1" name="viewport">
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js">
</script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js">
</script>
<link href="Calums2.css" rel="stylesheet">
<link href='https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300' rel='stylesheet' type='text/css'>
<link href="footerspecs.css" rel="stylesheet">
<link href="navbar.css" rel="stylesheet">
</style>
</head>
<body>
<div class="wrapper">
<div class = "navbarandwideimage"><!-- HERE STARTS IMAGE AND NAVBAR -->
<div style="background-image: url(http://i.imgur.com/3w90pjv.jpg); position:absolute; left: 0%; width:100%; top:7%; bottom: 7%;">
<div class = "turnips2" style="position:absolute; bottom:15%; left:5%; right:70%; color=white;">This summer, five adventurers from Inverness and one Northern Irishman completed the first unsupported hike across Iceland from the south to the north - a distance of 400 miles across <b>Europe's last wilderness.</b>
</div>
</div>
<div class="navbar"
<div class="list" style="Position: absolute; top: 0px; left:0px;">
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav nav-justified navbar-nav">
<li><h2>Home</h2></li>
<li><h2>Team</h2></li>
<li><h2>Kyrgyzstan</h2></li>
<li><h2>Blog</h2></li>
<li><h2>Expeditions</h2></li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
</div>
<style>
text-align:justify;
</style>
</div> <!-- HERE ENDSIMAGE AND NAVBAR -->
<!-- HERE STARTS MAIN BODY - PUT YOUR WORK HERE MAGS (in mainbody div)-->
<div class="mainbody" style="position: absolute; top:100%;" >
<div class="col-sm-12">
<h3> Krygyzstan - the land of horses </h3>
<p> lots <br> of <br> text <br> here </p>
</div>
</div>
<div id="push">
</div>
</div><!-- HERE ENDS MAIN BODY -->
<div class="footer"> <!-- FOOTER GOES HERE -->
<footer class="footer">
<div class="container">
<div class="socialmedia">
<a target="_blank" title="follow me on instagram" href="http://www.instagram.com/PLACEHOLDER">
<img alt="follow me on instagra" src="https://5a5a57ff32a328601212-ee0df397c56b146e91fe14be42fa361d.ssl.cf1.rackcdn.com/icon/logos_glyph/Oxi2BIzyfeN5INYU7lta/Glyph_Logo_thumbnail200.png" style=" width:3%; height:3%; border=50px;">
</div>
</a>
</div>
<p class="text-muted">Place sticky footer content here.</p>
</div>
</footer>
</div> <!-- HERE ENDS FOOTER -->
</body>
</html>
CSS for footer:
html {
position: relative;
min-height: 100%;
}
body {
/* Margin bottom by footer height */
margin-bottom: 60px;
}
.socialmedia {
border-style:solid;
border-spacing: 10px;
}
#wrapper {
/*height:100%;*/ /*you need to comment this height*/
margin:0 auto;
min-height:100%;
padding-bottom:-30px;
width:985px;
position: relative; /*and you need to add this */
}
.footer {
position: absolute;
bottom: 0;
width: 100%;
/* Set the fixed height of the footer here */
height: 60px;
background-color: #f5f5f5;
}
REST OF CSS:
.navbar-nav>li {
float: none;
}
.navbar-default {
background-color: rgba(255, 255, 255, 0);
border-width: 0px;
}
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
background-color: rgba(150, 155, 155, );
}
.navbar {
margin-bottom: 0 !important;
}
ul.nav li a>h2 {
margin-top: 0;
margin-bottom: 0;
}
.navbar-nav > li > a, .navbar-brand {
padding-top:4px !important;
padding-bottom:0 !important;
height: 28px;
}
.navbar {
min-height:28px !important;
}
.navbar button {
position:absolute;
left:50px;
top:0px;
border-style:none;
border-radius:0px;
}
.list {
font-family: 'Open Sans Condensed', sans-serif;
font-weight: bolder;
}
.synopsis {
color:white;
text-align: center;
}
.teampics .row {
margin-top: 17%;
text-align:center;
}
h3 {
text-align:center;
}
.turnips2 {
border-radius: 10px;
font-size: 2.3ex;
text-align:justify;
padding:10px;
color:white;
border-style: solid;
}
Try this:
.footer {
position: fixed;
/*Your other styles go here...*/
}
I have a fixed navbar on a bootstrap project and on the landing page of the website, I have made the background of the navbar transparent. When the website scrolls down, I want the navbar background to change back to black. I am using bootstrap. An example of what I want can be seen in the nabber at :
http://ironsummitmedia.github.io/startbootstrap-agency/
I am a new coder, so I apologize for any mistakes in the code formatting.
HTML:
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>Youth | Society</title>
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="design.css" rel="stylesheet">
<link href='http://fonts.googleapis.com/css?family=Lato:100' rel='stylesheet' type='text/css'>
</head>
<body>
<header>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<img src="1.png">
</div>
<button class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="collapse navbar-collapse navHeaderCollapse">
<ul class="nav navbar-nav navbar-right">
<li>Home</li>
<li>Who are we</li>
<li>Volunteer</li>
<li>Contact</li>
</ul>
</div>
</div>
</div>
</header>
<div class="page1">
<div class="landing">
<div class="container">
<h1>Peel's YES</h1>
<p>Welcome To Peel's Youth Engagement Society</p>
</div>
<div class="topics">
<div>
<div class="row">
<div class="col-md-4">
<h3>Learn</h3>
<p>Get to know more about YES, who we are, and what we do.</p>
</div>
<div class="col-md-4">
<h3>Volunteer</h3>
<p>Find out how you can get involved! YES strives to prove YOUth with unique opportunities and experiences.</p>
</div>
<div class="col-md-4">
<h3>Educate</h3>
<p>Read about the themes that YES has supported in the past</p>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="bootstrap/js/bootstrap.js"></script>
</body>
</DOCTYPE>
CSS:
.navbar-header {
display: inline;
}
.navbar{
background: transparent;
background-color: transparent;
border-color: transparent;
}
#media screen and (max-width: 767px) {
.navbar {
background-color: black;
}
}
.navbar-toggle{
margin-top: -50px;
}
.navbar .nav > li > a {
color: black;
}
#media screen and (max-width: 767px) {
.navbar .nav > li > a {
color:white;
}
}
.navbar {
padding-top:15px;
padding-bottom: 5px;
}
#media screen and (max-width: 767px) {
.navbar {
padding-top:0px;
padding-bottom: 0px;
}
}
.navbar a {
font-size: 13px;
font-weight: bold;
text-transform: uppercase;
}
.navbar li{
font-family: 'Lato', sans-serif;
display: inline;
}
.navbar img {
max-height: 50px;
margin-top: -20px;
}
/* P A G E 1 */
.landing {
padding-top:140px;
background-image:url(mainpage1.JPG);
background-size: cover;
background-repeat: no-repeat;
background-position: center;
height: 760px;
}
.landing h1 {
text-align: center;
color: #000;
font-size: 70px;
font-family: 'Lato', sans-serif;
font-weight: bold;
}
.landing p {
text-align: center;
font-size: 20px;
color: #000;
font-family: 'Lato', sans-serif;
}
.topics{
background: #eeeeee;
padding-right:40px;
margin-top: 340px;
text-align: center;
}
.topics h3{
font-size: 18px;
}
.topics p{
font-size: 18px;
}
/* P A G E 2 */
.page2 {
height:760px;
}
.page2 h3{
text-align: left;
margin-top: 100px;
}
Here is a Fiddle to view.
I made a change the have the shade color of the nav also show in smaller screens if this helps you.
If you come across this post and view the Fiddle, make sure you make the view frame lager.
This navbar effect is for large screens. (768 px Plus) Large view FIDDLE here.
You can change when the effect happens as you scroll from the top here.
var docElem = document.documentElement,
header = document.querySelector( '.navbar-default' ),
didScroll = false,
changeHeaderOn = 200;
The background color is changed by this here
.navbar-default.navbar-shrink {
padding: 10px 0;
background-color: #222567;
background: rgba(70,10,200,0.9);
And the background color is first set by this here.
#media(min-width:768px) {
.navbar-default {
padding: 25px 0;
border: 0;
/* background-color: transparent; */
background: rgba(70,10,200,0.4);
-webkit-transition: padding .3s;
-moz-transition: padding .3s;
transition: padding .3s;
}
There are many scripts out there for animating things on scroll. Honestly, it really depends on that you want to do. Here is a jQuery script that shows the basics. It simply adds a class to navbar (or whatever you want) once the visitor has scroll past a certain point. On the class, in this case shrink, I usually add transition easing to the class which makes things transition nicely when adding/removing the class.
$(window).scroll(function() {
if ($(this).scrollTop() > 200){ // Set position from top to add class
$('.navbar').addClass("shrink");
} else {
$('.navbar').removeClass("shrink");
}
});