I have a little problem where my web page is displaying fine on my pc screen but when i go live on my laptop or mobile phone the layout is all messed up. Does anyone know how i can fix this? Its is completely ruined in other screens and is not user friendly, but on my main computer where i was using to preview and create my website, it is basically ready.
/*PLAYER PAGE*/
.container {
padding: 40px 20px 0;
max-width: 2000px;
margin: 0 auto;
border-bottom: 2px solid rgb(105, 105, 105);
border-width: 100%;
padding-bottom: 20px;
}
h1 {
margin: 0;
text-align: center;
font-size: 50px;
overflow: hidden;
line-height: 1;
color: white;
}
h1 span {
display: block;
animation: reveal 1.5s cubic-bezier(0.77, 0, 0.175, 1) 0.5s;
}
.meet-the-owner h3 {
text-align: center;
color: rgb(255, 215, 0);
font-size: 25px;
font-family: "BatmanForeverAlternate";
}
.meet-the-owner-top h3 {
text-align: center;
color: rgb(255, 215, 0);
font-size: 25px;
font-family: "BatmanForeverAlternate";
padding: 40px;
}
.luxxreno {
text-align: left;
position: relative;
left: 400px;
padding-top: 80px;
bottom: 150px;
}
.luxxreno img {
border-radius: 50%;
width: 600px;
padding-bottom: 10px;
position: relative;
top: 80px;
}
.meet-the-owner {
padding: 50px;
border-top: 2px solid rgb(105, 105, 105);
}
.q-l {
color: white;
display: inline-block;
flex: right;
text-align: left;
position: relative;
left: 300px;
bottom: 10px;
font-size: 21px;
}
.questions p {
padding: 10px;
position: relative;
top: 30px;
}
.luxx-name {
font-family: "BatmanForeverAlternate";
padding-bottom: 35px;
position: relative;
left: 12px;
font-size: 50px;
}
.owner {
font-family: "BatmanForeverAlternate";
position: relative;
left: 12px;
color: red;
}
.luxx-socials {
position: relative;
left: 9px;
top: 50px;
}
.luxx-socials ul li {
padding: 10px 30px;
position: relative;
top: 15px;
list-style-type: none;
display: inline-block;
right: 30px;
font-family: "BatmanForeverAlternate";
font-size: 25px;
color: #ffd700;
transition: 0.5s;
}
.luxx-socials ul li a {
text-decoration: none;
}
.luxx-socials ul a li:hover {
color: red;
}
#keyframes reveal {
0% {
transform: translate(0, 100%);
}
100% {
transform: translate(0, 0);
}
}
<head>
<!--
<script>
ScrollReveal({
reset: true
});
</script>
-->
<script src="https://unpkg.com/scrollreveal"></script>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Players | LuxxMob</title>
<link rel="stylesheet" href="style.css" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Teko:wght#400;500;700&display=swap" rel="stylesheet" />
<script src="https://kit.fontawesome.com/360332bae9.js" crossorigin="anonymous"></script>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Nunito:wght#200;400;700&display=swap" rel="stylesheet" />
</head>
<body>
<div class="menu-header">
<nav>
<img src="images/HD_FILE (2).png" />
<div class="nav-links" id="navLinks">
<i class="fas fa-times" onclick="hideMenu()"></i>
<ul>
<li>
Home
</li>
<li>
News
</li>
<li>
Players
</li>
<li>
Partners
</li>
<li>
About Us
</li>
</ul>
</div>
<i class="fas fa-bars" onclick="showMenu()"></i>
</nav>
</div>
<!--END OF NAV-->
<section class="player-bios">
<div class="container">
<h1>
<span>Players</span>
</h1>
</div>
<div class="meet-the-owner-top">
<h3>Meet the Owner</h3>
</div>
<div class="luxxreno">
<img src="images/luxx.jpg">
<div class="q-l">
<div class="questions">
<h2 class="luxx-name">LUXX RENO</h2>
<h2 class="owner">OWNER</h2>
<p>Real Name: <b>Cory George</b></p>
<p>Online Name: <b>Luxx Reno</b></p>
<p>First Game Played as a Kid: <b>Duck Hunter/Super Nintendo</b></p>
<p>Game I'm Best At: <b>Fortnite</b></p>
<p>If You Were a Superhero, What Would Your Power Be?: <b>Mimicry, so I'd be able to mimic and super power I see.</b></p>
<p>Favourite Artist of All Time: <b>Billy Raffoul</b></p>
<p>Hidden Talents: <b>Won lots of medals for swimming!</b></p>
</div>
<div class="luxx-socials">
<ul>
<a href="https://www.youtube.com/channel/UCPqsHNuWTAbckHg4R3WAJIg" target=”_blank”>
<li>487 # YouTube</li>
</a>
<a href="https://www.instagram.com/luxxreno/?hl=en" target=”_blank”>
<li>2.6k # Instagram</li>
</a>
<a href="https://www.twitch.tv/luxxreno" target=”_blank”>
<li>3k # Twitch</li>
</a><br>
<a href="https://twitter.com/LuxxReno" target=”_blank”>
<li>2.5k # Twitter</li>
</a>
<a href="https://www.tiktok.com/#luxxxreno?lang=en&is_copy_url=1&is_from_webapp=v1" target=”_blank”>
<li>657k # TikTok</li>
</a>
</ul>
</div>
</div>
</div>
<div class="meet-the-owner">
<h3>Content Creator</h3>
</div>
<div class="luxxreno">
<img src="images/abz-c.png">
<div class="q-l">
<div class="questions">
<h2 class="luxx-name">ABZZINO</h2>
<h2 class="owner">Content Creator</h2>
<p>Real Name: <b>Abdullah Khan</b></p>
<p>Online Name: <b>Abzzino</b></p>
<p>First Game Played as a Kid: <b>Call Of Duty</b></p>
<p>Game I'm Best At: <b>Call Of Duty (all of them)</b></p>
<p>If You Were a Superhero, What Would Your Power Be?: <b>Flying</b></p>
<p>Hidden Talents: <b>They're hidden for a reason.</b></p>
</div>
<div class="luxx-socials">
<ul>
<a href="https://www.youtube.com/c/Abzzino/featured" target=”_blank”>
<li>360 # YouTube</li>
</a>
<a href="https://www.instagram.com/_abzzino_/" target=”_blank”>
<li>193 # Instagram</li>
</a>
<a href="https://www.twitch.tv/abzzinok" target=”_blank”>
<li>2.6k # Twitch</li>
</a><br>
<a href="https://twitter.com/_Abzzino_" target=”_blank”>
<li>142 # Twitter</li>
</a>
<a href="https://www.tiktok.com/#abzzinoyt?lang=en" target=”_blank”>
<li>23.6k # TikTok</li>
</a>
</ul>
</div>
</div>
</div>
<div class="meet-the-owner">
<h3>COMPETITIVE PLAYER</h3>
</div>
<div class="luxxreno">
<img src="images/kyran-c.png">
<div class="q-l">
<div class="questions">
<h2 class="luxx-name">KEEZO</h2>
<h2 class="owner">COMPETITIVE PLAYER</h2>
<p>Real Name: <b>Kyran Garden</b></p>
<p>Online Name: <b>KEEZO</b></p>
<p>First Game Played as a Kid: <b>Call Of Duty 3</b></p>
<p>Game I'm Best At: <b>Warzone</b></p>
<p>If You Were a Superhero, What Would Your Power Be?: <b>Flying</b></p>
<p>Favourite Artist of All Time: <b>Drake</b></p>
<p>Hidden Talents: <b>I'm good at football.</b></p>
</div>
<div class="luxx-socials">
<ul>
<a href="https://www.twitch.tv/LKeezo" target=”_blank”>
<li>400 # Twitch</li>
</a>
<a href="https://twitter.com/KEEZZ0" target=”_blank”>
<li>1.2k # Twitter</li>
</a>
<a href="https://www.tiktok.com/#kkeezo?lang=en" target=”_blank”>
<li>1.1k # TikTok</li>
</a>
</ul>
</div>
</div>
</div>
<div class="meet-the-owner">
<h3>Content Manager</h3>
</div>
<div class="luxxreno">
<img src="images/brad-c.png">
<div class="q-l">
<div class="questions">
<h2 class="luxx-name">SPODERBRAD</h2>
<h2 class="owner">Content Manager</h2>
<p>Real Name: <b>Brad</b></p>
<p>Online Name: <b>SpoderBrad</b></p>
<p>First Game Played as a Kid: <b>Metal Gear Solid</b></p>
<p>Game I'm Best At: <b>Splitgate</b></p>
<p>If You Were a Superhero, What Would Your Power Be?: <b>Honestly don’t want a super power just wanna be Iron Man.</b></p>
<p>Favourite Artist of All Time: <b>Drake or Eminem can’t decide</b></p>
<p>Hidden Talents: <b>Best Free Kick Taker on Twitch.</b></p>
</div>
<div class="luxx-socials">
<ul>
<a href="https://www.youtube.com/channel/UCnqgXWWmmg1F3L919lzT6aQ" target=”_blank”>
<li>353 # YouTube</li>
</a>
<a href="https://www.instagram.com/spoderbrad/?hl=en-gb" target=”_blank”>
<li>115 # Instagram</li>
</a>
<a href="https://www.twitch.tv/SpoderBrad" target=”_blank”>
<li>2.1k # Twitch</li>
</a><br>
<a href="https://twitter.com/SpoderBrad" target=”_blank”>
<li>392 # Twitter</li>
</a>
<a href="https://www.tiktok.com/#spoderbrad?lang=en" target=”_blank”>
<li>60k # TikTok</li>
</a>
</ul>
</div>
</div>
</div>
</section>
<!--FOOTER-->
<footer>
<div class="footer-headers">
<ul>
<li>
Home
</li>
<li>
News
</li>
<li>
Players
</li>
<li>
Partners
</li>
<li>
About Us
</li>
</ul>
</div>
<div class="foot-logo">
<img src="images/HD_FILE (2).png" />
</div>
<div class="socials">
<i class="fab fa-tiktok"></i>
<i class="fab fa-twitter"></i>
<i class="fab fa-instagram"></i>
</div>
<div class="copyright">
<h4>© 2021 LuxxMob</h4>
<h4>Made with ❤ by #truechow</h4>
</div>
</footer>
<!--
<script>
ScrollReveal().reveal('footer', {
duration: 2000
});
</script>
<script>
ScrollReveal().reveal('.luxxreno', {
duration: 2000
});
</script>
<script>
ScrollReveal().reveal('.header');
</script>
<script>
ScrollReveal(options);
</script>
-->
</body>
This is likely because your webpage is not responsive. An easy fix is to always use percentages instead of specific pixels to position items.
eg top: 5% instead of top: 15px
I think it's because you have to use media queries to make your website responsive on all devices.
Check it out here:
https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Media_queries
Another tip is not to use only pixels as a unit of measurement, also use 'em', 'rem', vw (for the font) and '%'
Check it out here too:
https://www.w3schools.com/cssref/css_units.asp
There's a couple of random things in your css that I don't know why they're there. max-width: 2000px, why is this 2000 pixels, it would be way too much for most phones and screens (perhaps there's a reason like the player map being large, I dunno). overflow: hidden, why is there an overflow on a h1 tag. border-width: 100%, why are you setting border widths to 100%. margin: 0 auto why is there a margin auto on a 2000px wide container, it'll never be the center of anything. position: relative, why is everything relative. There's a bunch of random CSS that I don't know what it's doing or why it's there (it shouldn't be).
Along with that you shouldn't ever use pixels for fonts, it won't scale on a mobile phone so your text (and containers containing text) will get messed up. Use font-size: 100% on the html container and then use font-size: 1rem // or 1.2 or 1.4 on anything else so you scale everything according to root.
Along with that you've used pixels everywhere to define borders/tops/alignment, which will almost never work out (unless you're just lucky). You should be using flex for page layout and pixels if you want to define specific containers. You've not shown body and the main page CSS but from container I can see you've not used that. You should have:
body {
display: flex;
flex-flow: column nowrap;
min-height: 100vh;
margin: 0;
}
.container {
flex: 1 1 auto;
display: flex;
flex-flow: column nowrap;
}
Or something similar for your page layout. You don't need any #media stuff for that because flex will work correctly across all devices.
Related
enter image description hereenter image description hereI created a webpage by using html css and javascript. In home page, I added a pop up contact button and form, it is working but pop up window is opened at the top of page. Home page is like one page you scroll. I added the button to the footer but form is opened close to header. I want to it to open while user see the end of the page. I hope I can clear the problem.
https://github.com/ipeksaygut/website in this link there are HTML- CSS-JS files of only home page.
I am really beginner, I really do not understand the problem. Thanks for helps!
-If something need let me know to sahre to clear problem!
Window is seen as the picture but ı want to see it at the end of page I added photo of window how it is seen and where ı want to see it.
Hi Ipek Saygut!
I put together this code that will give you an idea of what was going on with your css. I have modified the .popUp class in order to fix this issue. Please be aware that you will need to read more on HTML and CSS best practices. Please have a look at this article to get you started in the amazing world of HTML and CSS, don't worry, it takes practice but you will master it soon. HTML & CSS Best Practices.
I certainly hope this code helps, have a good time coding, fellow!
let btn = document.querySelector("button");
let cont = document.querySelector(".popUp");
btn.addEventListener('click', function(){
cont.id = "show";
});
cont.addEventListener('click', function(e){
if(e.target == this){
this.id = "hidden";}
e.preventDefault;
});
body {
font-family: 'Red Hat Display', sans-serif;
}
.footer {
border-top: 5px solid #00acc8;
height: 200px;
background-color: #000;
padding: 50px;
margin: auto;
}
.container {
justify-items: left;
align-items: bottom;
z-index: 2;
padding-top: 55px;
padding-left: 18px;
}
button {
width: 140px;
height: 60px;
font-size: 16px;
font-weight: bold;
color: #2e9ca5;
border: 2px solid #2e9ca5;
border-radius: 5px;
background: white;
transition: all 0.5s ease;
cursor: pointer;
}
button:hover {
background: #2e9ca5;
color: white;
}
#show {
visibility: visible;
animation: pop 0.5s ease-in;
}
#keyframes pop {
from {
opacity: 0;
visibility: hidden;
}
to {
opacity: 1;
visibility: visible;
}
}
#hidden {
animation: out 0.5s ease-out;
}
#keyframes out {
from {
opacity: 1;
visibility: visible;
}
to {
opacity: 0;
visibility: hidden;
}
}
.popUp::before {
content: "x";
font-size: 30px;
color: #8FC1C1;
position: fixed;
right: -35px;
top: 4px;
}
.popUp {
display: block;
margin-top: 5% !important;
background: rgba(0, 0, 0, 0);
width: 50%;
height: 100%;
position: fixed;
top: 50%;
left: 50%;
z-index: 99999;
transform: translate(-50%, -50%);
justify-items: center;
align-items: center;
visibility: hidden;
}
form {
display: flex;
flex-direction: column;
width:85%;
margin:0 auto;
grid-template-columns: 150px;
grid-template-rows: repeat(10, 30px);
grid-row-gap: 10px;
background: white;
padding: 30px;
border-radius: 5px;
border: 1px solid #2e9ca5;
}
input,
textarea {
border-radius: 3px;
border: 1px solid #f2f2f2;
padding: 0 6px;
}
input[type=text],
input[type=email] {
height: 30px;
}
input[type=textarea] {}
input[type=submit] {
height: 30px;
background: #2e9ca5;
color: white;
font-weight: bold;
transition: background 0.3s ease;
border: 0;
border-radius: 5px;
}
input[type=submit]:hover {
background: white;
color: #2e9ca5;
}
.remove {
justify-content: end;
align-items: end;
}
label {
color: #b3b3b3;
}
<!DOCTYPE html>
<html>
<head>
<title>Discover To Istanbul</title>
<link rel="stylesheet" type="text/css" href="css/main.css">
<link href='https://fonts.googleapis.com/css?family=Roboto&display=swap'>
<link href="https://fonts.googleapis.com/css?family=Parisienne&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Roboto:100,400&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Red+Hat+Display&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Red+Hat+Display:wght#400;900;600&display=swap" rel="stylesheet">
</head>
<body>
<div class="menu-bar">
<div class="menu-banner">istanbul</div>
<div class="menu-button">
<ul>
<li>HOME</li>
<li>DESTINATIONS</li>
<li>GALLERY</li>
</ul>
</div>
</div>
<script src="js/main.js" type="text/javascript" defer></script>
<div class="main-header">
<center>
<div class="header-tab">
<h1>İSTANBUL</h1>
<div class="header-alt">Let's Go On The Adventure with us !</div>
<div class="header-alt2"> EXPLORE ISTANBUL </div>
</div>
<div class="header-tab-video">
<header>
<video autoplay="" style="filter:contrast(1.099) brightness(0.92)" preload="none" muted="" loop="" width="780" height="560">
<source src="image/video.mp4" type="video/mp4">
</video>
<div id="overlay">
<p>Istanbul is <span class="typed-text" ></span></p>
</div>
</header>
</div>
</center>
</div>
<a name="anc2">
<div name="#anc2" class="places" id="sacred">
</a>
<h1>sacred places</h1>
<h5>explore most impressive sacred places with us.</h5>
<h6> discover more</h6>
</div>
<div class="places" id="palaces">
<h1 id="flt-rght"> palaces</h1>
<h5 id="flt-rght">explore most attractive palaces with us.</h5>
<a href="html/palaces/palaces.html">
<h6>discover more</h6>
</a>
</div>
<div class= "places" id="oldbuildings">
<h1>old buildings</h1>
<h5>Explore breathtaking and beautiful buildings with us.</h5>
<a href="html/oldbuildings/oldbuildings.html">
<h6>discover more</h6>
</a>
</div>
<div class="galeri">
<h1><a name="anc3" style="text-decoration:none;">#discoverTurkey</a></h1>
<h2>VIDEO <font color=red>|</font> PHOTO </h2>
<div class="galeri-alt">
<div class="galeri-ic" id="galeri1"></div>
<div class="galeri-ic" id="galeri2"><img src="image/play-button1.png"></div>
<div class="galeri-ic" id="galeri3"></div>
<div class="galeri-ic" id="galeri4"></div>
<div class="galeri-ic" id="galeri5"><img src="image/play-button1.png"></div>
<div class="galeri-ic" id="galeri6"></div>
</div>
</div>
<div class="kayangörseller"
<center><p style="font-size:60px""font-family:Calluna;">Social Media</p></center>
<div class="images">
<marquee direction="right" scrollamount="7">
<a href="https://www.instagram.com/p/CI3iV5yr416/?utm_source=ig_web_copy_link" target="_blank">
<img src="image/galata.jpg" style="width:400px;height:400px;"> </a>
<a href="https://www.instagram.com/p/CI3huz5LGDw/?utm_source=ig_web_copy_link" target="_blank">
<img src="image/c.jpg" style="width:400px;height:400px;">
<a href="https://www.instagram.com/p/CI3h9xCLXPy/?utm_source=ig_web_copy_link" target="_blank">
<img src="image/ayasofya.jpg" style="width:400px;height:400px;">
<a href="https://www.instagram.com/p/CI3iMZXLZy9/?utm_source=ig_web_copy_link" target="_blank">
<img src="image/fenerrum.jpg" style="width:400px;height:400px;">
<a href="https://www.instagram.com/p/CI3iaZlLn-N/?utm_source=ig_web_copy_link" target="_blank">
<img src="image/kapalicarsi.jpg" style="width:400px;height:400px;">
<a href="https://www.instagram.com/p/CI3iikbrmdw/?utm_source=ig_web_copy_link" target="_blank">
<img src="image/sultanahmet.jpg" style="width:400px;height:400px;">
<a href="https://www.instagram.com/p/CI3isMKLXrS/?utm_source=ig_web_copy_link" target="_blank">
<img src="image/taksimanit.jpg" style="width:400px;height:400px;">
<a href="https://www.instagram.com/p/CI3i9RALySO/?utm_source=ig_web_copy_link" target="_blank">
<img src="image/yerebatan.jpg" style="width:400px;height:400px;">
<a href="https://www.instagram.com/p/CI3xiRiryIn/?utm_source=ig_web_copy_link" target="_blank">
<img src="image/a.jpg" style="width:400px;height:400px;">
<a href="https://www.instagram.com/p/CI3i1EWrZQr/?utm_source=ig_web_copy_link" target="_blank">
<img src="image/t.jpg" style="width:400px;height:400px;">
</marquee>
</div>
</div>
<div class="map">
<center>
<iframe src="https://www.google.com/maps/d/u/0/embed?mid=1D66DY_D1-yifqdWfN4_k4mrj_S_JukO6" width="640" height="480" ></iframe>
</center>
</div>
<footer>
<div class="footer">
<div class="social">
<img src="image/instagram.png"><img src="image/youtube.png"><img src="image/twitter.png"><img src="image/facebook.png">
<div class="container">
<button>Contact Us</button>
</div>
<div class="popUp">
<form>
<label for="fn">First Name</label>
<input type="text" name="fn">
<label for="ln">Last Name</label>
<input type="text" name="ln">
<label for="email">Email</label>
<input type="email" name="email">
<label for="notes">Comments</label>
<textarea name="notes" rows="5" cols="5"></textarea>
<input id='submit' type="submit" value="Submit">
<p style="color:#b3b3b3;"> Pop-Up Facts, Recommendations,Interesting Routes... More For Istanbul! </p>
</form>
</div>
</div>
<div class="social" style="width:300px;">
<p>This website prepared for web design course by Kadir Has University students.</p>
<p>Ayça Çiçekdağ</p>
<p>Emre Karağaç</p>
<p>Hilal Pelin Akyüz</p>
<p>İpek Saygut</p>
<p>Sude Arslan</p>
</div>
<div class="social" style="width:180px;" id="logoalt"></div>
</div>
</footer>
<div class="kayanyazi">
<marquee direction=right bgColor="#2e9ca5" text-color="white">FIND ISTANBUL-EXPLORE ISTANBUL WITH US ! | by Ayça Çiçekdağ , Emre Karağaç,Hilal Pelin Akyüz
İpek Saygut,Sude Arslan
</marquee>
</div>
</body>
</html>
I have a side navigation menu for bigger screens in this file. I want to create a navigation bar for mobile phones and smaller screens below 1024px width. I have tried making the mobile navbar hidden for bigger screens and it just acts up. I need some here is a link to my page
I will want it to look like this
I got the inspiration of the page from link and they were able to make it responsive.
var slideIndex = 0;
var slides = document.getElementsByClassName("home-page-slides");
showSlides();
function showSlides() {
var slideLength = slides.length;
// Fade in the slide
setTimeout(function() {
if (slideIndex == slideLength) {
slideIndex = 0;
}
slides[slideIndex].classList.add("fadeIn");
}, 10);
//Fade out the SLide
setTimeout(function() {
if (slideIndex == slideLength) {
slideIndex = 0;
}
slides[slideIndex].classList.remove("fadeIn");
}, 3980);
slideIndex++;
setTimeout(showSlides, 4000);
}
/*----------------------------------------------------
#Navigation menu
-----------------------------------------------------*/
.logo {
padding: 8px;
margin: 20px 0;
}
.navbar {
height: 100%;
width: 300px;
position: fixed;
z-index: 1;
top: 0;
left: 0;
}
.navbar a {
display: block;
text-decoration: none;
font-family: 'Nunito Sans', sans-serif;
font-size: 13px;
padding: 9px;
}
ul {
padding-left: 0px;
margin-left: 0px;
}
ul li {
list-style: none;
padding-left: 0px;
margin-left: 0px;
}
.navbarFooter {
position: relative;
right: 0;
left: 0;
text-align: center;
}
.divider {
width: 16%;
text-align: center;
position: relative;
display: inline-block;
vertical-align: middle;
border-bottom: 1px solid rgba(0, 0, 0, 0.3);
}
.navFContent {
position: relative;
margin-top: 50px;
}
/*----------------------------------------------------
#Home Page
-----------------------------------------------------*/
.slideshow-container,
.main {
width: calc(100%-300px);
height: 100vh;
min-height: 100vh;
}
.desc-container {
position: absolute;
bottom: 40px;
margin-left: 315px;
}
.desc {
margin: auto;
width: 450px;
height: 250px;
position: relative;
}
.home-page-slides {
width: 100%;
height: 100vh;
min-height: 100vh;
-webkit-transition: all 0.5s linear;
-moz-transition: all 0.5s linear;
-o-transition: all 0.5s linear;
transition: all 0.5s linear;
position: absolute;
top: 0;
right: 0;
opacity: 0;
}
.home-page {
height: 100vh;
min-height: 100vh;
width: 100%;
}
.home-page-slides img {
height: 100vh;
min-height: 100vh;
width: 100%;
background-position: top;
}
<base href="https://happy-kepler-414939.netlify.app/" /> <!-- insert by SO editor -->
<link href="https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,wght#0,200;0,300;0,400;1,200&display=swap" rel="stylesheet">
<link rel="icon" type="image/png" sizes="" href="logos/favicon2.png">
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/animations.css">
<link rel="stylesheet" href="css/event.css">
<link rel="stylesheet" href="css/restaurant.css">
<link rel="stylesheet" href="css/memorial.css">
<link rel="stylesheet" href="css/venue.css">
<link rel="stylesheet" href="css/portfolio.css">
<link rel="stylesheet" href="css/responsive.css">
<div class="navbar whitebg" id="navbar">
<div id="banner" class="mobile-banner">
<div class="mobile-logo"></div>
<div id="mobile" class="mobile-menu">
<a onClick="openNav()">
<div class="open">
<div id="burger" class="burger">
<div class="bun01"></div>
<div class="patty"></div>
<div class="bun02"></div>
</div>
</div>
</a>
</div>
</div>
<div class="main-nav">
<nav class="menu centertext fontlight">
<ul>
<img class="logo" src="logos/mainLogo.png" alt="">
<li><a class="blacktxt" href="index.html">HOME</a></li>
<li><a class="blacktxt" href="#services">SERVICES</a></li>
<li><a class="blacktxt" href="html/about.html">ABOUT</a></li>
<li><a class="blacktxt" href="#testimonials">TESTIMONIALS</a></li>
<li><a class="blacktxt" href="html/portfolio.html">OUR PORTFOLIO</a></li>
<li><a class="blacktxt" href="html/venue.html">EXCLUSIVE VENUES</a></li>
<li><a class="blacktxt" href="#contact">CONTACT</a></li>
</ul>
</nav>
<div class="navbarFooter blacktxt fontlight">
<div class="divider"></div>
<div class="navFContent">
<p>
+1 (646) 580-7740
</p>
<p>
info#hillandboyd.com
</p>
<p>
New York, USA.
</p>
</div>
</div>
</div>
</div>
<!-- HOME PAGE CONTENT-->
<section id="home-page">
<div class="main">
<div class="home-page">
<div class="slideshow-container">
<div class="home-page-slides">
<img src="Images/eventbg1.jpg" style="width:100%">
<div class="desc-container">
<div class="desc p30 whitebg">
<h6 class="goldtxt f30">Luxury Events</h6>
<h2 class="blacktxt f18">WE CREATE BEAUTIFUL EVENTS</h2>
<p class="greytxt f15 fontlight">Join us for a “No Question too Small, Large or Outrageous” Chat about All things Bridal! This is your chance to have two industry experts answer your queries on any topic that is keeping you up at night.
</p>
</div>
</div>
</div>
<div class="home-page-slides">
<img src="Images/restaurantbg1.jpg" style="width:100%"/>
<div class="desc-container">
<div class="desc p30 whitebg">
<h6 class="goldtxt f30">Creating Impact</h6>
<h2 class="blacktxt f18"> STRATEGY AND SALES</h2>
<p class="greytxt f15"></p>
</div>
</div>
</div>
<div class="home-page-slides">
<img src="Images/memorialbg1.jpg" style="width:100%"/>
<div class="desc-container">
<div class="desc p30 whitebg">
<h6 class="goldtxt f30">Lasting Memories</h6>
<h2 class="blacktxt f18">SERVING WITH LOVE</h2>
<p class="greytxt f15"></p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
To hide the navigation panel & make the site responsive in mobile view use media query in css
#media only screen and (max-width: 736px) { /* css property for phone */ }
To animate and view side navigation
https://www.w3schools.com/howto/howto_js_sidenav.asp
What I'm trying to do
Alright so I basically want the div with the class js-op to pop up under each of the icons that are clicked on my side bar. Right now all I have is whenever a user clicks on the icons a popup well pops up.
What I'm trying to do
Ok so I ran though all the icons using a for loop, so that its being watched for any clicked actions. Im new to javascript so I think this is a huge accomplishment! Now Im a bit stuck, basically now I just want javascript to add the class .js-display found on the last line (.css) to the class js-op, respectfully. Meaning under each icon there is a div that has that class. (It is set to display:none) When that icon is clicked that div right under it will get the .js-display so that it becomes visible. I am essentially creating dynamic popup menus.
Extra
Im gonna end up asking later
Ok so this icon is clicked right? A panel displays, but the user decides to click on another icon. Is it possible to have the first panel that was displayed first, disappear?
Thank you
Again thank you!
Now if Im not suppose to have the extra thing in here please tell me, before down voting( I heard stack can be a little harsh) Im not sure, I feel like its still relevant to the main question.
js
var pop_action = document.getElementById("js-uX-pop_up").getElementsByClassName("uX-nv-spn ");
var pop_panel = document.getElementsByClassName("js-op");
for(e_op = 0; e_op < pop_action.length; e_op++ ){
pop_action[e_op].addEventListener("click", activate_eop);
}
function activate_eop(){
alert("hello");
}
html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="..\XSystem.css">
<meta charset="utf-8" />
<title>Xlaeo</title>
</head>
<body>
<!-- section that holds mains -->
<div class="xU-wper xU-flex-1-1">
<!-- section holds two sends -->
<section class="xU-flex uX-maon-wper">
<!-- BEGIN LEFT: bar -->
<section class="uX-maon-sc xU-white">
<div class="uX-fluid ">
<span class="uX-bar-modules-wper">
<!-- modules for side bar -->
<!-- BEGIN Image company -->
<div class="uX-company-img">
<span>
<img src="http://icons.iconarchive.com/icons/icons-land/vista-hardware-devices/96/Motherboard-icon.png"/>
</span>
</div>
<!-- end image -->
<!-- BEGIN side bar list-->
<div class="uX-list-modules uX-them-pd">
<span class="uX-side-nav " id="js-uX-pop_up" role="navigation">
<li >
<span class="uX-nv-spn">
<a>
<i class="fab fa-d-and-d"></i>
</a>
</span>
<!-- POPUP -->
<div class="js-op" style="display:none">
<section>
pop up
</section>
</div>
</li>
<li >
<span class="uX-nv-spn">
<i class="fab fa-mandalorian"></i>
</span>
<!-- POPUP -->
<div class="js-op" style="display:none">
<section>
pop up2
</section>
</div>
</li>
<li>
<span class="uX-nv-spn">
<i class="fab fa-snapchat-ghost"></i>
</span>
<!-- POPUP -->
<div class="" style="display:none">
<section>
pop up
</section>
</div>
</li>
<li >
<span class="uX-nv-spn ">
<i class="fas fa-handshake"></i>
</span>
<!-- POPUP -->
<div class="" style="display:none">
<section>
pop up
</section>
</div>
</li>
<li>
<span class="uX-nv-spn">
<i class="fab fa-java"></i>
</span>
<!-- POPUP -->
<div class="uX_popU" style="display:none">
<section>
pop up
</section>
</div>
</li>
</span>
</div>
<!-- end side bar list-->
<!-- profile image -->
<div class="">
<a>
<span class="uX-items-center">
<div class="uX_profile-img-wper">
<img src="https://cdn.imaginetricks.com/wp-content/uploads/2017/08/Wonderful-Cute-Girls-Profile-Picture.jpg"/>
</div>
<span>Emma</span>
</span>
</a>
</div>
<!-- end proifle image -->
</span>
</div>
</section>
<!-- END LEFT: bar -->
<!-- BEGIN RIGHT: bar -->
<section class="uX-maon-sc uX-maon-sc2">
content
</section>
<!-- END RIGHT: bar -->
</section>
</div>
<script type="text/javascript" src="../Js-script/mod-up.js"></script>
</body>
</html>
Css
.xU-flex-1-1, .uX-bar-modules-wper, .uX-fluid, .uX-list-modules, .uX-side-nav li, html,
body, .uX-maon-sc, .uX-items-center, .uX-side-nav {
display: flex;
flex-flow: column; }
.xU-flex, .uX-side-nav {
display: flex; }
.xU-flex-1-1, .uX-bar-modules-wper, .uX-fluid, .uX-list-modules, .uX-side-nav li {
flex: 1 1 auto; }
.uX-side-nav li {
justify-content: center; }
.uX_profile-img-wper {
border-radius: 100%;
overflow: hidden; }
.xU-font, .uX-side-nav .uX-nv-spn {
font-size: 1.4rem;
color: #c62f09; }
.uX-side-nav .uX-nv-spn:hover {
background: lightgray; }
.uX-side-nav .uX-nv-spn:hover {
border-radius: 100%; }
.uX-side-nav .uX-nv-spn {
height: 2.2rem;
width: 2.2rem;
display: flex;
justify-content: center;
align-items: center; }
body {
background: #f4f4f4; }
body li {
list-style-type: none; }
html,
body {
height: 100%;
margin: 0;
padding: 0;
overflow: hidden; }
.xU-white {
background: white; }
img {
width: 100%;
height: 100%; }
.uX-maon-wper, .uX-maon-sc2 {
flex: 1 1 auto; }
.uX_profile-img-wper {
height: 4rem;
width: 4rem; }
.uX-items-center {
align-items: center; }
.uX-bar-modules-wper .uX-company-img {
width: 4.5rem;
border-bottom: 1px solid lightgray; }
.uX-bar-modules-wper .uX-list-modules {
padding: 0.4rem; }
.uX-side-nav {
align-items: center;
flex: 1 1 auto; }
.uX-side-nav li {
height: 100%; }
.uX-side-nav .uX-nv-spn {
padding: 0.4rem;
border-radius: 100%; }
.uX-list-modules {
border-right: 1px solid #c62f09; }
.js-display {
display: block; }
/*# sourceMappingURL=XSystem.css.map */
Your code is missing 'js-op' classes on all of the elements. Also, inline styles always override class/id styles, therefore you need to change
.js-display {display: block;}
to
.js-display {display: block !important;}
or it won't work.
You also didn't provide any JS here, so I had to just make it up, but you get the idea. This should do it:
document.querySelectorAll('.uX-side-nav li').forEach((el)=>{
el.addEventListener('click', (e)=>{
document.querySelectorAll('.js-op').forEach((x)=>{x.classList.remove('js-display');});
e.target.closest('li').querySelector('.js-op').classList.add('js-display');
});
});
.xU-flex-1-1, .uX-bar-modules-wper, .uX-fluid, .uX-list-modules, .uX-side-nav li, html,
body, .uX-maon-sc, .uX-items-center, .uX-side-nav {
display: flex;
flex-flow: column; }
.xU-flex, .uX-side-nav {
display: flex; }
.xU-flex-1-1, .uX-bar-modules-wper, .uX-fluid, .uX-list-modules, .uX-side-nav li {
flex: 1 1 auto; }
.uX-side-nav li {
justify-content: center; }
.uX_profile-img-wper {
border-radius: 100%;
overflow: hidden; }
.xU-font, .uX-side-nav .uX-nv-spn {
font-size: 1.4rem;
color: #c62f09; }
.uX-side-nav .uX-nv-spn:hover {
background: lightgray; }
.uX-side-nav .uX-nv-spn:hover {
border-radius: 100%; }
.uX-side-nav .uX-nv-spn {
height: 2.2rem;
width: 2.2rem;
display: flex;
justify-content: center;
align-items: center; }
body {
background: #f4f4f4; }
body li {
list-style-type: none; }
html,
body {
height: 100%;
margin: 0;
padding: 0;
overflow: hidden; }
.xU-white {
background: white; }
img {
width: 100%;
height: 100%; }
.uX-maon-wper, .uX-maon-sc2 {
flex: 1 1 auto; }
.uX_profile-img-wper {
height: 4rem;
width: 4rem; }
.uX-items-center {
align-items: center; }
.uX-bar-modules-wper .uX-company-img {
width: 4.5rem;
border-bottom: 1px solid lightgray; }
.uX-bar-modules-wper .uX-list-modules {
padding: 0.4rem; }
.uX-side-nav {
align-items: center;
flex: 1 1 auto; }
.uX-side-nav li {
height: 100%; }
.uX-side-nav .uX-nv-spn {
padding: 0.4rem;
border-radius: 100%; }
.uX-list-modules {
border-right: 1px solid #c62f09; }
.js-display {
display: block !important; }
/*# sourceMappingURL=XSystem.css.map */
<html>
<head>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="..\XSystem.css">
<meta charset="utf-8" />
<title>Xlaeo</title>
</head>
<body>
<!-- section that holds mains -->
<div class="xU-wper xU-flex-1-1">
<!-- section holds two sends -->
<section class="xU-flex uX-maon-wper">
<!-- BEGIN LEFT: bar -->
<section class="uX-maon-sc xU-white">
<div class="uX-fluid ">
<span class="uX-bar-modules-wper">
<!-- modules for side bar -->
<!-- BEGIN Image company -->
<div class="uX-company-img">
<span>
<img src="http://icons.iconarchive.com/icons/icons-land/vista-hardware-devices/96/Motherboard-icon.png"/>
</span>
</div>
<!-- end image -->
<!-- BEGIN side bar list-->
<div class="uX-list-modules uX-them-pd">
<span class="uX-side-nav " id="js-uX-pop_up" role="navigation">
<li>
<span class="uX-nv-spn">
<i class="fab fa-d-and-d"></i>
</span>
<div class="js-op" style="display:none">
<section>
pop up1
</section>
</div>
</li>
<li>
<span class="uX-nv-spn">
<i class="fab fa-mandalorian"></i>
</span>
<div class="js-op" style="display:none">
<section>
pop up2
</section>
</div>
</li>
<li>
<span class="uX-nv-spn">
<i class="fab fa-snapchat-ghost"></i>
</span>
<div class="js-op" style="display:none">
<section>
pop up3
</section>
</div>
</li>
<li>
<span class="uX-nv-spn ">
<i class="fas fa-handshake"></i>
</span>
<div class="js-op" style="display:none">
<section>
pop up4
</section>
</div>
</li>
<li>
<span class="uX-nv-spn">
<i class="fab fa-java"></i>
</span>
<div class="js-op" style="display:none">
<section>
pop up5
</section>
</div>
</li>
</span>
</div>
<!-- end side bar list-->
<!-- profile image -->
<div class="">
<a>
<span class="uX-items-center">
<div class="uX_profile-img-wper">
<img src="https://cdn.imaginetricks.com/wp-content/uploads/2017/08/Wonderful-Cute-Girls-Profile-Picture.jpg"/>
</div>
<span>Emma</span>
</span>
</a>
</div>
<!-- end proifle image -->
</span>
</div>
</section>
<!-- END LEFT: bar -->
<!-- BEGIN RIGHT: bar -->
<section class="uX-maon-sc uX-maon-sc2">
content
</section>
<!-- END RIGHT: bar -->
</section>
</div>
<script type="text/javascript" src="../Js-script/mod-up.js"></script>
</body>
</html>
So i'm new to bootstrap.and i was trying out to change my sidebar into a button when screen size is small.
This is a little what i need. I can tweak around a little bit to make it work for my needs except for one. There is a sidebar with links. That sidebar disapears when you make you screen smaller (as would have happened on mobile devices). I want to make sure that the sidebar disapears but have it back with a button.
Here is my code.
HTML and CSS i am using :
#side-bar {
height: 100%;
background-color: #333f4d;
padding: 0 !important;
font-weight: 600;
color: #d7d9db;
position: fixed;
float: left;
}
#top-bar {
background-color: #1f2730;
padding-top: 15px;
padding-bottom: 3px;
}
#top-bar:hover {
background-color: #aaa;
font-weight: 700;
}
.sidebarclr {
background-color: #fafafa !important;
margin-left: -14px;
}
#logo{
margin-left: 35px;
margin-bottom: 8px;
width:32px;
height:32px;
}
li img{
width:16px;
height:16px;
margin-right: 5px;
}
.list{
text-decoration:none!important;
padding-bottom: 15px;
padding: 10px;
}
#sidebl > li a{
color:#d7d9db !important;
}
#sidebl >li a:hover{
background-color:#aaa !important;
text-decoration:none !important;
}
#sidebl >li a:focus{
background-color:#aaa !important;
text-decoration:none !important;
}
#user{
margin-right: 10px;
margin-left: 10px;
float: left;
}
.userc{
border-radius: 3px;
height:32px;
margin-top:170px;
}
.light{
color: #8f98a3 !important;
font-weight: normal;
font-size:11px!important;
}
.username{
display:inline-block !important;
line-height: 16px;
float: left;
margin-left:5px;
}
.userc:hover{
background-color:#aaa;
text-decoration:none;
}
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
<div class="col-sm-2" id="side-bar">
<div id="top-bar">
<a href="#" title="home page" target="_blank">
<img id="logo" src="images/logo.png" alt="">
<h2 class="title"> Maven Up</h2>
</a>
</div>
<div>
<ul class="nav" id="sidebl">
<li class="list">
<img src="images/icons/006-dashboard.png" alt=""> DashBoard
</li>
<li class="list">
<img src="images/icons/005-post-it.png" alt=""> Entries
</li>
<li class="list">
<img src="images/icons/004-worlwide.png" alt=""> Globals
</li>
<li class="list">
<img src="images/icons/003-picture.png" alt="">Assets
</li>
<li class="list">
<img src="images/icons/002-users.png" alt=""> Users
</li>
<li class="list">
<img src="images/icons/001-settings.png" alt=""> Setting
</li>
</ul>
</div>
<div class="userc">
<div id="user"><img src="images/user.png" alt=""></div>
<div class="username"> User
<div class="light">admin</div>
</div>
<!--- Navigation Bar User --->
<ul class="nav navbar-nav">
<li class="dropup">
<span class="gaparowup glyphicon glyphicon-chevron-up"></span>
<ul class="dropdown-menu">
<li>Account Settings</li>
<li>User stats </li>
</ul>
</li>
</ul>
<!--- Navigation Bar End --->
</div>
<!--- userc class div end --->
</div>
<!-- COL SM 2 END -->
bootsnipp has some great examples for that. Take a look at one of those. Most of them you can change to mobile versions so that they are only showing the button on mobile.
Maybe this guide helps as well. I really think there are great tutorials out there.
Welp... I'm stuck... again...
(FYI This is my first ever website that I am coding myself (not a template) so don't assume that I know anything.)
I am in the process of making my homepage more mobile / smaller screen sizes freindly. One of the biggest problems is that my navbar is too large on mobile and makes it so that in order to see the full navbar you have to scroll to the right, and this really breaks the website aesthetically. I have tried my best to implement things like flexnav into my website but I haven't been able to succeed in making it:
A. Be a Slide-Out / Push-Out menu on mobile which is triggered by a hamburger menu (which is preferably animated like style 2 in this tutorial: http://callmenick.com/post/animating-css-only-hamburger-menu-icons)
B. Have a TRANSPARENT background for both the hamburger menu and the navbar.
B1. Keep my navbar's color-scheme
C. Switch from the full nav-bar to the hamburger menu when the screen is less than 1200 px wide.
I know that I am asking a lot, but hopefully someone will be able to help me. As I am submitting my code in JSBin it would be really helpful If you could do the same (or if you prefer Codepen or JSFiddle or whatever). And I am sure that this stylish approach to a navbar which adapts to screen size would be appreciated by many people who find themselves in the same situation I do. Also, sorry for the messy code.
JSFBin: http://jsbin.com/jefosiweci/edit?html,css,js,output
Code:
<meta name="robots" content="noindex">
<head>
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha256-KXn5puMvxCw+dAYznun+drMdG1IFl3agK0p/pqT9KAo= sha512-2e8qq0ETcfWRI4HJBzQiA3UoyFk6tbNyG+qSaIBZLyW9Xf3sWZHN/lxe9fTh1U45DpPf07yj94KsUHHWe4Yk1A==" crossorigin="anonymous"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha256-7s5uDGW3AHqw6xtJmNNtr+OBRJUlgkNJEo78P4b0yRw= sha512-nNo+yCHEyn0smMxSswnf/OnX6/KwJuZTlNZBjauKhTK0c+zT+q5JOCx0UFhXQ6rJR9jg6Es8gPuD2uZcYDLqSw==" crossorigin="anonymous">
<link rel="stylesheet" href="CSS/main.css">
<link rel="stylesheet" href="CSS/animate.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<title>Lor emIp sumDo lorSita</title>
<link rel="stylesheet" href="CSS/lightbox.min.css">
<script src="https://use.typekit.net/pzl7njn.js"></script>
<link href="CSS/flexnav.css" rel="stylesheet" type="text/css" / >
</script>
<script>
try {
Typekit.load({
async: false
});
} catch (e) {}
</script>
<script src="JS/wow.min.js"></script>
<script>
new WOW().init();
</script>
<style id="jsbin-css">
/*----- Responsive Nav Start Credit - http://tinyurl.com/qepfqon -----*/
.clearfix:after {
display: block;
clear: both;
}
/*----- Menu Outline -----*/
.menu-wrap {
width: 100%;
background: #DAE6EB;
margin: 0px auto
}
.menu {
width: 1200px;
margin: 0px;
margin-bottom: -55px;
opacity: 5;
}
.menu li {
margin: 0px;
list-style: none;
font-family: 'industry';
font-size: 18px;
}
.menu a {
transition: all linear 0.15s;
color: #98a1a4;
font-size: 18px;
}
.menu li:hover > a,
.menu li:active > a,
.menu .current-item > a {
text-decoration: none;
color: #414546;
font-size: 18px;
}
.menu .arrow {
font-size: 11px;
line-height: 0%;
}
/*----- Top Level -----*/
.menu > ul > li {
float: left;
display: inline-block;
position: relative;
font-size: 18px;
}
.menu > ul > li > a {
padding: 10px 40px;
display: inline-block;
}
.menu > ul > li:hover > a,
.menu > ul > li:active > a,
.menu > ul > .current-item > a {
background: #98a1a4;
}
/*----- Bottom Level -----*/
.menu li:hover .sub-menu,
.menu li:active {
z-index: 1;
opacity: 1;
}
.sub-menu {
width: 160%;
padding: 5px 0px;
position: absolute;
top: 100%;
left: 0px;
z-index: -1;
opacity: 0;
transition: opacity linear 0.15s;
background: #98a1a4B;
text-align: left;
}
.sub-menu li {
display: block;
font-size: 18px;
}
.sub-menu li a {
padding: 10px 10px;
display: block;
font-size: 18px;
}
.sub-menu li a:hover,
.sub-menu li a:active,
.sub-menu .current-item a {
background: #98a1a4;
}
/*Jumbotron. Ignore*/
.jumbotron {
background-image: url('https://images.unsplash.com/photo-1450849608880-6f787542c88a?crop=entropy&fit=crop&fm=jpg&h=1000&ixjsv=2.1.0&ixlib=rb-0.3.5&q=80&w=1925');
background-repeat: no-repeat;
background-position: center top;
margin-top: 0px;
margin-bottom: -0px;
}
.jumbotron .container {
position: relative;
left: auto;
right: auto;
height: 100vh;
width: 100vw;
padding: 100px 0;
text-align: center;
}
.jumbotron h1 {
color: #fff;
font-size: 84px;
font-family: "industry", sans-serif;
font-style: normal;
font-weight: 900;
text-shadow: 3px 3px #000;
}
.jumbotron p {
font-size: 24px;
font-family: "industry", sans-serif;
font-style: italic;
font-weight: 1000;
color: #f7f7f7;
}
</style>
</head>
<section id="Top">
</section>
</div>
<div class="menu-wrap">
<nav class="menu">
<ul class="clearfix" data-breakpoint="1200">
<li class="current-item wow fadeInDown"><i class="fa fa-home fa"></i> Lore</li>
<li class="wow fadeInDown delay05"><i class="fa fa-user fa"></i> mIpsu mD</li>
<li class="wow fadeInDown delay05"><i class="fa fa-map fa"></i> olorS</li>
<li class="wow fadeInDown delay15"><i class="fa fa-bolt fa"></i> itAmet.L</li>
<li class="wow fadeInDown delay2"><i class="fa fa-paint-brush fa"></i> or emIps</li>
<li class="wow fadeInDown delay25"><i class="fa fa-envelope fa"></i> umDolor</li>
<li class="wow fadeInDown delay3"><i class="fa fa-pencil fa"></i> Sita</li>
</ul>
</nav>
</div>
<div class="jumbotron">
<div class="container">
<h1 class="wow fadeInLeft Big">Lor emIp sumDo lorSitA</h1>
<p class="wow fadeInRight delay1">metLorem Ip sumDo lorSitAm.</p>
<div class="container">
<ul class="actions">
<li class="wow fadeInUp Big delay2"><i class="fa fa-chevron-down fa"></i></li>
</ul>
</div>
</div>
</div>
I see that you are already using Bootstrap. Bootstrap makes this very easy for you to do as they have it built in already you just need to use their structure. Below I have put in their navbar structure into your existing code. I have taken out the menu css that you had and added just a couple of lines of css to get you started. You can mess with the css and change it to your liking but it should look almost identical to the setup that you had. In this code the nav will have a class of navbar-default which I have given a background of none and a position of absolute top to keep it at the top of the page and a width of 100%. Inside of it is a navbar-header and a navbar-collapse. In the navbar-header is your menu-hamburger which bootstrap has already styled and given javascript to open at a max-width of 767px. Then the navbar-collapse is where you have your links which I have given a media query style background of transparent black. So when you get to the 767 px it will be hidden until you click on the hamburger. This is all built into Bootstraps framework making it very easy for developers to get started on their sites. I hope this helps. Here is your revised code you should be able to just copy and paste this as is:
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha256-KXn5puMvxCw+dAYznun+drMdG1IFl3agK0p/pqT9KAo= sha512-2e8qq0ETcfWRI4HJBzQiA3UoyFk6tbNyG+qSaIBZLyW9Xf3sWZHN/lxe9fTh1U45DpPf07yj94KsUHHWe4Yk1A==" crossorigin="anonymous"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha256-7s5uDGW3AHqw6xtJmNNtr+OBRJUlgkNJEo78P4b0yRw= sha512-nNo+yCHEyn0smMxSswnf/OnX6/KwJuZTlNZBjauKhTK0c+zT+q5JOCx0UFhXQ6rJR9jg6Es8gPuD2uZcYDLqSw==" crossorigin="anonymous">
<link rel="stylesheet" href="CSS/main.css">
<link rel="stylesheet" href="CSS/animate.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<title>Lor emIp sumDo lorSita</title>
<link rel="stylesheet" href="CSS/lightbox.min.css">
<script src="https://use.typekit.net/pzl7njn.js"></script>
<link href="CSS/flexnav.css" rel="stylesheet" type="text/css" / >
</script>
<script>
try {
Typekit.load({
async: false
});
} catch (e) {}
</script>
<script src="JS/wow.min.js"></script>
<script>
new WOW().init();
</script>
<style id="jsbin-css">
/*----- Responsive Nav Start Credit - http://tinyurl.com/qepfqon -----*/
.clearfix:after {
display: block;
clear: both;
}
.navbar-default {
background:none;
margin:0;
position:absolute;
top:0;
left:0;
width:100%;
border:none;
z-index:1;
}
.navbar-default .navbar-nav>li>a {
font-size:18px;
}
.navbar-default .navbar-nav>li>a:hover,
.navbar-default .navbar-nav>li>a.active{
background:#98a1a4;
color:#333;
}
#media screen and (max-width: 767px){
.navbar-collapse{background:rgba(0,0,0,0.8);}
}
/*Jumbotron. Ignore*/
.jumbotron {
background-image: url('https://images.unsplash.com/photo-1450849608880-6f787542c88a?crop=entropy&fit=crop&fm=jpg&h=1000&ixjsv=2.1.0&ixlib=rb-0.3.5&q=80&w=1925');
background-repeat: no-repeat;
background-position: center top;
margin-top: 0px;
margin-bottom: -0px;
}
.jumbotron .container {
position: relative;
left: auto;
right: auto;
height: 100vh;
width: 100vw;
padding: 100px 0;
text-align: center;
}
.jumbotron h1 {
color: #fff;
font-size: 84px;
font-family: "industry", sans-serif;
font-style: normal;
font-weight: 900;
text-shadow: 3px 3px #000;
}
.jumbotron p {
font-size: 24px;
font-family: "industry", sans-serif;
font-style: italic;
font-weight: 1000;
color: #f7f7f7;
}
</style>
</head>
<section id="Top">
</section>
<nav role="navigation" class="navbar navbar-default">
<div class="navbar-header">
<button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<!-- Collection of nav links and other content for toggling -->
<div id="navbarCollapse" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="wow fadeInDown"><a class="active" href="#"><i class="fa fa-home fa"></i> Lore</a></li>
<li class="wow fadeInDown delay05"><i class="fa fa-user fa"></i> mIpsu mD</li>
<li class="wow fadeInDown delay05"><i class="fa fa-map fa"></i> olorS</li>
<li class="wow fadeInDown delay15"><i class="fa fa-bolt fa"></i> itAmet.L</li>
<li class="wow fadeInDown delay2"><i class="fa fa-paint-brush fa"></i> or emIps</li>
<li class="wow fadeInDown delay25"><i class="fa fa-envelope fa"></i> umDolor</li>
<li class="wow fadeInDown delay3"><i class="fa fa-pencil fa"></i> Sita</li>
</ul>
</div>
</nav>
<div class="jumbotron">
<div class="container">
<h1 class="wow fadeInLeft Big">Lor emIp sumDo lorSitA</h1>
<p class="wow fadeInRight delay1">metLorem Ip sumDo lorSitAm.</p>
<div class="container">
<ul class="actions">
<li class="wow fadeInUp Big delay2"><i class="fa fa-chevron-down fa"></i></li>
</ul>
</div>
</div>
</div>
</body>
</html>
I'm not sure anyone is going to write the code for you, but we can point you in the right direction. What you are looking for, in terms of specifying different styles at different screen sizes are called media queries. They look like this:
#media screen and (max-width: 1199px) {...}
I have built something very similar to what you are looking for (although mine has probably more than what you are looking for) so if you need a reference on how things work or whatnot, I'll post a link.
http://codepen.io/mhodges44/pen/dGMMOK
You can ignore the angularJS stuff (all of the ng-* in the HTML and the javascript), just focus on the CSS media queries. That should give you a pretty good idea of how it all works and you should be able to apply it to your situation.