I tried to center the burger icon in the navbar.
it's kinda centered for small mobile devices but when it gets to bigger devices like tablets,
the icon goes upper way. it doesn't stay centered.
how can I do this responsively for different screens?
<!DOCTYPE html>
<html>
<head>
<style>
.centerBurger {
display: flex;
justify-content: center;
}
.centerBurger {
width: 100%;
text-align: center;
}
.centerBurger {
margin: 0;
position: absolute;
top: 50%;
left: 56.5%;
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
height: 100%;
width: 100%;
}
.centerBurger {
display:block;
cursor:pointer;
max-width:100%;
height:auto;
}
.burgerCenter{
margin:0 auto;
left: 50%;
position: relative;
transform: translateX(-50%);
}
</head>
<body>
<!-- Top Navigation Menu -->
<div class="topnav">
<img src="header.png" width="25%">
<!-- Navigation links (hidden by default) -->
<div id="myLinks">
Startseite
Über uns
Leistungen
Referenzen
Kontakt
Datenschutz
</div>
<!-- "Hamburger menu" / "Bar icon" to toggle the navigation links -->
<a href="javascript:void(0);" class="icon centerBurger" onclick="myFunction()">
<i class="fa fa-bars centerBurger"></i>
</a>
</div>
<script>
function myFunction() {
var x = document.getElementById("myLinks");
if (x.style.display === "block") {
x.style.display = "none";
} else {
x.style.display = "block";
}
}
</script>
</body>
</html>
I tried to center it different ways.
I used this css rules one after one. one time directly for the attribute and after that I gave the icon a parent div like this:
<div class="centerBurger">
a href="javascript:void(0);" class="icon" onclick="myFunction()">
<i class="fa fa-bars"></i>
</div>
and tried to set the rules to the parent div.
but sadly it didn't work.
I expected the burger icon would be centered.
i'm pretty new to coding and my English isn't the best as well.
so i wanna apologize for this first.
If anyone could tell me what my fault was or how I could solve this I would appreciate it very much.
Thank you very much!
Add align-items: center; to your very first .centerBurger
Try the following:
<style type="text/css">
.topnav *:not(.centerBurger) { float: left; }
.topnav .centerBurger { display: block; width: fit-content;
margin-left: auto; margin-right: auto; }
.topnav #myLinks { display: none; }
</style>
The first rule lets all navigation bar elements other than the .centerBurger float (to the left) in the navigation bar. Without it, the .centerBurger would appear on a row beneath the <a href="index.html">.
The second rule makes the .centerBurger a centered block within the navigation bar. Instead of width: fit-content, you can also use the width of the burger image in px (which I assume is known).
Alternatively, try
<style type="text/css">
.topnav { text-align: center; }
.topnav *:not(.centerBurger) { float: left; }
.topnav #myLinks { display: none; }
</style>
Thank you for answering my question.
i tried different possibilities now finally i replaced the <i> tag with an <img src="burgericon.svg> and now it works fine.
The code looks like this now:
´´´´
<div class="topnav">
<img src="header.png" width="25%">
<!-- Navigation links (hidden by default) -->
<div id="myLinks">
Startseite
Über uns
Leistungen
Referenzen
Kontakt
Datenschutz
</div>
<!-- "Hamburger menu" / "Bar icon" to toggle the navigation links -->
<a href="javascript:void(0);" class="icon" onclick="myFunction()">
<img src="bars-svgrepo-com.svg" class="svg">
</a>
</div>
Related
I am trying to have a menu that takes up 100vh when the menu button is clicked. However, I also have a header at the top so the menu content is lower than it. How do I make the menu go on top of the header? I'm trying to do this without making the header display: none because I want it to be shown on the side - in the left over space from making the menu have a view width of 80vw.
header {
height: 3.4rem;
display: grid;
align-items: center;
z-index: 1;
}
.menu {
z-index: 2;
position: relative;
background-color: #000;
margin-left: 4rem;
}
.menu-container {
width: 80vw;
height: 100vh;
margin-left: 2.5rem;
margin-top: 2rem;
}
<header>
<div class="header-container">
<div class="left">
<img src="img/logo.jpg" alt="">
</div>
<div class="right">
<img src="img/user.png" alt="">
<i class="fa-solid fa-bars fa-xl"></i>
</div>
</div>
</header>
<nav class="menu">
<div class="menu-container">
<div class="top-menu">
Premium
Support
Download
<div class="menu-line"></div>
</div>
<div class="bottom-menu">
Account
Log out
</div>
<img src="img/logo.jpg" alt="">
</div>
</nav>
(I did not add all the CSS to do with the menu and header because the rest of it is irrelevant.)
How do I move the menu to go on top?
I think position: relative is not set properly, it should only be on a parent that contains both header and nav. And then set the following css :
.menu {
position: fixed;
top: 0;
left: 0;
height: 100vh;
width: 80vw;
}
Add margin and background if you want.
Now nav should be above header.
I believe the issue lies in the position and z-index of your .menu and header css. Try making the position: absolute for both absolute and change the z-index of menu to 1 and header to 2 so that it shows menu on top of header.
Reference: https://developer.mozilla.org/en-US/docs/Web/CSS/z-index
I have a navbar that contains three elements. Horizontally, from left-to-right, they are: socialMediaIcons, logoArea, and navBarOptionsList.
I wrote javascript and CSS such that, when the user begins to scroll down the page, the socialMediaIcons and navBarOptionsList's visibility change to hidden.
The problem is, the socialMediaIcons element lags by about half a second to become hidden after the user scrolls down. The navBarOptionsList hides immediately after even slightly scrolling down the page (this is the expected behaviour -- and it is what I'd like the socialMediaIcons to do too).
Below is the CSS (which is where I suspect the problem is), as well as the Javascript (detailing the logic for hiding the two elements) and HTML:
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS, and stupid fontawesome shyt -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous"/>
<!-- Required CDNs: jQuery, Popper.js, Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
<!--Favicon-->
<link rel="shortcut icon" type="image/x-icon" href="../resources/codigoinitiativefavi.ico"/>
<!--Custom CSS Stylesheet-->
<link rel="stylesheet" href="../styles.css"/>
<title>Codigo Initiative</title>
</head>
<body>
<nav class="navBar">
<div class="socialMediaNavBarArea">
<ul class="socialMediaIconList">
<li class="socialMediaIcon"><i class="fab fa-facebook-f"></i></li>
<li class="socialMediaIcon"><i class="fab fa-twitter"></i></li>
<li class="socialMediaIcon"><i class="fab fa-youtube"></i></li>
<li class="socialMediaIcon"><i class="fab fa-github"></i></li>
<li class="socialMediaIcon"><i class="fab fa-linkedin-in"></i></li>
</ul>
</div>
<div class="logoArea">
<img id="navBarLogocaster" src="../resources/codigoinitiativewhite.png" alt="Codigo Initiative">
</div>
<!--TODO: Nav bar options list font style should match the Codigo Initiative logo font style-->
<div class="navBarOptionsAreaFullScreen">
<ul class="navbarOptionsList">
<li class="navItem">
<a class="navLink" href="">Home</a>
</li>
<li class="navItem">
<a class="navLink" href="">Resources</a>
</li>
<li class="navItem">
<a class="navLink" href="">Curriculums</a>
</li>
<li class="navItem">
<a class="navLink" href="">Contact</a>
</li>
</ul>
</div>
<div class="hamIconNavOptions">
<ul class="hamIconNavOptionsList">
<li class="hamburgerIconNavOptions">☰
<ul id="hamburgerIconNavOptionsNestedList">
<li class="hamburgerIconNavOptionsNestedListItem"><a class="navOptionAnchorItem" href="">Home</a></li>
<li class="hamburgerIconNavOptionsNestedListItem"><a class="navOptionAnchorItem" href="">Resources</a></li>
<li class="hamburgerIconNavOptionsNestedListItem"><a class="navOptionAnchorItem" href="">Curriculums</a></li>
<li class="hamburgerIconNavOptionsNestedListItem"><a class="navOptionAnchorItem" href="">Contact</a></li>
</ul>
</li>
</ul>
</div>
</nav>
<div class="placeholder"></div>
</body>
<footer>
<script src="../index.js"></script>
</footer>
</html>
CSS:
/*Hamburger Icon styling*/
.hamburgerIconNavOptions{
color: white;
padding-top: 20px;
}
/*Styling for the hamburger icon (which is really a list)*/
.hamIconNavOptionsList{
margin: 0;
padding: 0;
list-style: none; /*removing the bullet point*/
}
/*styling the nested list in the hamburger icon*/
#hamburgerIconNavOptionsNestedList{
margin: 0;
padding: 0;
list-style: none; /*Removiing the bullet points*/
background-color: #13204f;
opacity: .5; /*Making this bad boy transparent. (0 is completely transperent, 9 is solid black)*/
}
/*Removing the default underlining provided by the anchor tag's default styling*/
.navOptionAnchorItem{
text-decoration: none; /*Removing the default styling from the anchor element*/
color: white;
}
/*Removing the underlining of links provided by the anchor tag's default styling*/
.navOptionAnchorItem:link {
text-decoration: none;
}
/*Removing the underlining that occurs by default on anchor tags when hovering over them.*/
.navOptionAnchorItem:hover {
text-decoration: none;
}
/*Styling each list item within the hamburger icon's nested list*/
.hamburgerIconNavOptions{
float: left;
width: 200px;
height: 40px;
}
#media(max-width: 1200px) {
/*This logic will execute when the screen's width becomes too small to display everything*/
.socialMediaIconList{
display: none; /*Will hide the list items when the screen's width is too small to display them*/
}
.socialMediaIconList.toggleCls{
display: none; /*will remove the social media icon list if the screen isn't wide enough to display it*/
}
.hamburgerIconSocialMedia {
display: none; /*TODO: Don't really need a hamburger bar to begin with. Need to come back and remove this.*/
}
/*Same stuff as above, except for the navBar options list*/
.navbarOptionsList{
display: none;
}
#hamburgerIconNavOptionsNestedList.toggleCls{
display: block;
}
/*The screen is too small. But hide the nested list that belons to the hamburger icon. Will be displayed when the hamburger icon is clicked.*/
#hamburgerIconNavOptionsNestedList{
display: none;
}
}
/*Make the hamburger icon disappear when the screen is large enough to display all list view items*/
#media(min-width: 1199px) {
.hamIconNavOptions{
display: none; /*Hides the hamburger icon when the screen is large enough to display everything*/
}
.socialMediaIconList{
display: initial; /*Shows the social media links*/
}
.navbarOptionsList{
display: initial;
}
}
.navBar {
display: flex;
flex-direction: row; /*Aligns items horizontally*/
flex-wrap: nowrap; /*Prevents overflow wrapping. We'd rather everything get packed on a single row.*/
padding: 10px;
background-color: #13204f;
height: 125px;
position: fixed;
width: 100%;
}
.socialMediaNavBarArea {
position: relative;
width: 25%;
padding: 30px 0;
text-align: center;
}
.logoArea {
position: relative;
width: 50%;
text-align: center;
}
.navBarOptionsAreaFullScreen {
position: relative;
width: 30%;
padding: 30px 0;
text-align: center;
font-size: 15px;
padding-right: 30px;
}
/*Social Media area*/
.socialMediaIcon {
list-style: none;
margin: auto;
display: inline-block;
font-size: 10px;
padding: 10px 10px;
color: white;
border: 1px solid white;
border-radius: 50%;
transition: .5s;
}
.socialMediaIconList {
padding-left: 0px;
padding-right: 90px;
}
.socialMediaNavBarIcons {
top: 40%;
left: 50%;
transform: translate(-53%, -50%);
position: absolute;
}
.socialMediaIcon:hover {
color: #565759;
border: 1px solid #565759;
transition: .75s;
}
/*Navigation Bar logo area*/
#navBarLogocaster {
max-width: 100%;
max-height: 75%;
/*Aligns the image center horizontal and vertical*/
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
/*Navigation Bar options area*/
.navItem {
display: inline;
}
.placeholder {
height: 5000px;
}
.navLink {
padding: 5px;
color: white;
}
.navLink:hover {
text-decoration: none;
color: #565759;
transition: .75s;
}
Javascript:
/**
* The following logic controls what will happen when the user scrolls down on the screen.
* The navbar will decrease in heigh slightly.
*/
window.onscroll = function() {configureNavBar()};
function configureNavBar() {
if (document.body.scrollTop > 80 || document.documentElement.scrollTop > 80) {
//The user is scrolling down, so minimize the nav bar, and hide all corollary navbar items to reduce clutter.
document.querySelector(".navBar").style.height = "90px";
hideSocialMediaIcons();
hideNavBarOptions();
} else {
//The user has scrolled back up to the top. Display all corollary navbar options/details.
document.querySelector(".navBar").style.height = "120px";
unhideSocialMediaIcons();
unhideNavBarOptions();
}
}
/**
* Will hide the social media icons (if it is even being displayed at all)
*/
function hideSocialMediaIcons() {
let socialMediaIconList = document.querySelector(".socialMediaIconList");
//If the social media icons are being displayed, hide them.
if(socialMediaIconList.style.visibility != "hidden") {
socialMediaIconList.style.visibility = "hidden";
} else {
//no further action needed, as the social media icons are already hidden.
}
}
/**
* Will hide the navbar's (full-screen) options when scrolling down.
*/
function hideNavBarOptions(){
let navBarOptions = document.querySelector(".navbarOptionsList");
//If the social media icons are being displayed, hide them.
if(navBarOptions.style.visibility != "hidden") {
navBarOptions.style.visibility = "hidden";
} else {
//no further action needed, as the social media icons are already hidden.
}
}
Because there is transition duration set for socialMediaIcon class but for .navBarOptionsList no duration set.
This question already has answers here:
Fixed navbar hides anchor position of local links
(2 answers)
Closed 2 years ago.
So I have this one pager with 4 different sections. And a menu with 4 different buttons (each one for each section). I wanted to smooth scroll on all. The way i tried is to give each a href, which is the id of each title but the problem then is that the menu covers half of the title (see pic) because of its fixed position. See the code snippet to see what I tried next.
function goToPageOne() {
if(window.innerHeight > 728 && window.innerWidth < 500) {
window.scrollTo(0,700);
} else {
window.scrollTo(0,689);
}
}
document.getElementById("me").addEventListener("click", goToPageOne);
<div class="topnav" id="myTopnav">
Home
<a id="me">Me</a>
<a id="timeline">Timeline</a>
<a id="work">My work</a>
<a href="javascript:void(0);" class="icon" onclick="myFunction()">
<i class="fa fa-bars"></i>
</a>
</div>
The problem with this that it's not really a responsive function for all devices.
Instead of linking to your sections, you could link to anchors which you intentionally move above the section.
Demo:
/* For the demo */
html { scroll-behavior: smooth; }
body { font-family: Arial, Helvetica, sans-serif; padding-top: 20px; }
#myTopnav { position: fixed; top: 0; left: 0; width: 100%; background: #f1f1f1; }
#myTopnav a { display: inline-block; padding: .8em; }
section { height: 400px; padding: .5em; }
section:nth-of-type(even) { background: #333; color: #fff; }
.anchor {
position: relative;
top: -45px; /* <-------- */
}
<div id="myTopnav">
Home
Me
Timeline
My work
</div>
<section>
<div class="anchor" id="home"></div>
<h2>Home</h2>
</section>
<section>
<div class="anchor" id="me"></div>
<h2>Me</h2>
</section>
<section>
<div class="anchor" id="timeline"></div>
<h2>Timeline</h2>
</section>
<section>
<div class="anchor" id="work"></div>
<h2>Work</h2>
</section>
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/
This is my first post on Stack Overflow so sorry if I'm not clear in what I'm saying. But basically I'm working on a little school project and it's basically an All About Me site to refresh on what we've learned over the summer. I have tabs on the bottom of the screen for navigation and I have content in the center of the screen. Upon clicking a new tab or scrolling down, I want the corresponding div to slide into where the old content was. I don't have a huge knowledge of JavaScript so I have no idea how to go about doing this. I've been looking at image sliders but those aren't really what I'm looking for. I'm looking for something like this: http://coolcarousels.frebsite.nl/c/8/
This is how it looks right now:
http://i.imgur.com/BqZ78S3.jpg
This is basically all of my HTML so far:
<main class="content-container">
<section class="slider animated fadeInDown">
<div class="intro-content">
<h1>Hi, my name is Brian Hurtado.</h1>
<h3>I enjoy making beautiful and innovative websites.</h3>
</div>
<div class="summer-content">
<h1>This is my text about summer.</h1>
<h3>This is some more text about my summer.</h3>
</div>
<div class="design-content">
<h1>This is some text about web design.</h1>
<h3>This is some more text about web design.</h3>
</div>
<div class="schedule-content">
<h1>This is some text about my schedule.</h1>
<h3>Probably going to put a table in here.</h3>
</div>
<div class="site-content">
<h1>This is some text about what I want to do with the school site.</h1>
<h3>This is some more text about what I want to do with the school site.</h3>
</div>
<div class="goals-content">
<h1>These are my goals that I hope to achieve in the future.</h1>
<h3>I have to think of some goals.</h3>
</div>
</section>
</main>
<nav class="main-nav">
<ul>
<li class="active">
<a href="#">
<span>
<img src="img/home.png">
</span>
<b>Intro</b>
</a>
</li>
<li>
<a href="#">
<span>
<img src="img/summer.png">
</span>
<b>Summer</b>
</a>
</li>
<li>
<a href="#">
<span>
<img src="img/design.png">
</span>
<b>Web Design</b>
</a>
</li>
<li>
<a href="#">
<span>
<img src="img/schedule.png">
</span>
<b>Schedule</b>
</a>
</li>
<li>
<a href="#">
<span>
<img src="img/site.png">
</span>
<b>School Site</b>
</a>
</li>
<li>
<a href="#">
<span>
<img src="img/goals.png">
</span>
<b>Goals</b>
</a>
</li>
</ul>
</nav>
And this is my CSS:
body {
font-family: Lato, sans-serif;
}
.content-container {
width: 100%;
height: 80vh;
text-align: center;
color: black;
font-size: 42px;
}
.slider {
width: 1200px;
height: 300px;
overflow: hidden;
margin: 0 auto;
position: relative;
top:250px;
}
.intro-content h3 {
margin-top: -30px;
}
.main-nav {
position: absolute;
bottom:0;
width: 100%;
background-color: #101518;
}
.main-nav ul {
width: 1200px;
margin: 0 auto;
text-align: center;
}
.main-nav ul li a {
color:white;
text-decoration: none;
}
.main-nav ul li {
display: inline-block;
padding: 15px 35px;
font-size: 20px;
color: white;
-o-transition:.3s ;
-ms-transition:.3s;
-moz-transition:.3s;
-webkit-transition:.3s;
transition:.3s;
}
.main-nav ul li:not(.active) {
opacity: 0.5;
}
.main-nav ul li:hover {
opacity: 1;
}
.main-nav span {
width: 40px;
height: 40px;
display: block;
margin:0 auto 5px;
}
html {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url("../img/landscape.jpg") no-repeat center center;
background-size: cover;
}
What exactly do I need to do from here? I was thinking maybe doing an onclick function that switches the active class so that the non-active class is display:none, but I want it to have a sliding effect. I would really appreciate any help. If you need me to clarify anything please let me know.
You can use a variety of plugins as mentioned by Fabio above, or you might use this code as your starting point - FIDDLE.
Your link to coolcarousels showed it going horizontally, so that's how the fiddle works.
JS
$("#selector a").on("click",function(event){
event.preventDefault();
var target = $(this).attr("href");
$("html, body").stop().animate({
scrollLeft: $(target).offset().left,
scrollTop: $(target).offset().top
},
1200);
});
Attribution is noted in the JS section of the fiddle.
I used a very simple script from this website;
http://jquery.malsup.com/cycle2/
Simply download and include Cycle2 plugin on your page (Make sure you also have the latest version of Jquery) and then declare your slideshow markup. There are loads of demo's on the site which are extremely easy to follow.
Goodluck with your project!