Don't really know why this is happening my title "Roberto Salas" it's not staying in place when I change the window size, also doesn't stay in place when I open it on my cellphone
title not in right position
Title not in right position when the hmb button drops
I would like that the title stay in the top left heres my code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Roberto Salas</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght#300&display=swap" rel="stylesheet">
</head>
<body>
<div class="wrapper">
<header>
<nav>
<div class="menu-icon">
<i class="fa fa-bars fa-2x"></i>
</div>
<div id="Title" class="name">Roberto Salas</div>
<div class="Monse">
<ul >
<li><a href="#" class="submenu2" >Home</a></li>
<li><a href="#" class="submenu2" >About</a></li>
<li><a href="#" class="submenu2" >Blog</a></li>
<li>Contact</li>
</ul>
</div>
</nav>
</header>
<div class="content">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>
</div>
<script type="text/javascript">
// Menu-toggle button
$(document).ready(function() {
$(".menu-icon").on("click", function() {
$("nav ul").toggleClass("showing");
$('#Title').addClass('name2');
$('a').css('color','white');
});
});
// Scrolling Effect
$(window).on("scroll", function() {
if($(window).scrollTop()) {
$('nav').addClass('black');
$('#Title').addClass('name2');
$('a').css('color','white');
}
else {
$('nav').removeClass('black');
$('#Title').removeClass('name2');
$('a').css('color','black');
}
})
</script>
</body>
</html>
Here is my style sheet
html, body {
margin: 0;
padding: 0;
width: 100%;
}
.Monse{
letter-spacing: 2px;
font-family: 'Montserrat', sans-serif;
}
body {
font-family: "Helvetica Neue",sans-serif;
font-weight: lighter;
}
header {
width: 100%;
height: 100vh;
background: url(img/bosqueaves.jpg) no-repeat center;
background-size: cover;
}
.content {
width: 94%;
margin: 4em auto;
font-size: 20px;
line-height: 30px;
text-align: justify;
}
.name{
line-height: 60px;
position: fixed;
float: left;
margin: 16px 46px;
color: black;
font-size: 20px;
letter-spacing: 2px;
font-family: 'Montserrat', sans-serif;
}
.name2{
line-height: 60px;
position: fixed;
float: left;
margin: 16px 46px;
color: white;
font-size: 20px;
letter-spacing: 2px;
font-family: 'Montserrat', sans-serif;
}
.smenu{
text-decoration: none;
font-size: 16px;
color: white;
}
.submenu2{
text-decoration: none;
font-size: 16px;
color: black;
}
nav {
position: fixed;
width: 100%;
line-height: 60px;
}
nav ul {
line-height: 60px;
list-style: none;
background: rgba(0, 0, 0, 0);
overflow: hidden;
padding: 0;
text-align: right;
margin: 0;
padding-right: 40px;
transition: 1s;
text-decoration: none;
}
nav.black ul {
background: #000;
text-decoration: none;
}
nav ul li {
display: inline-block;
padding: 16px 40px;;
text-decoration: none;
}
.menu-icon {
line-height: 60px;
width: 100%;
background: #000;
text-align: right;
box-sizing: border-box;
padding: 15px 24px;
cursor: pointer;
color: white;
display: none;
}
#media(max-width: 786px) {
.logo {
position: fixed;
top: 0;
margin-top: 16px;
}
nav ul {
max-height: 0px;
background: #000;
text-decoration: none;
}
nav.black ul {
background: #000;
text-decoration: none;
}
.showing {
max-height: 34em;
}
nav ul li {
box-sizing: border-box;
width: 100%;
padding: 24px;
text-align: center;
text-decoration: none;
}
.menu-icon {
display: block;
}
}
you can also check the website at https://gonzaloalcala.github.io/ProyectoR/index.html
You may add top: 0 on class .name. Then, set color: white in the media query.
.name{
line-height: 60px;
position: fixed;
top: 0; /* Add top to align */
float: left;
margin: 16px 46px;
color: black;
font-size: 20px;
letter-spacing: 2px;
font-family: 'Montserrat', sans-serif;
}
#media(max-width: 786px) {
/* Change the color to white */
.name {
color: white;
}
}
Put the div with name:
<div id="Title" class="name">
Roberto Salas
</div>
above the <div class="menu-icon> in code.
Remember to change color of name on breakpoint as it is black as the navbar.
like:
#media(max-width: 786px) {
.name {
color: pink;
}
}
https://jsfiddle.net/e98fxyzg/3/
add to your css nav{display:flex; flex-direction:column;}
`
nav{display:flex;
flex-direction:column;}
Here is my style sheet
html, body {
margin: 0;
padding: 0;
width: 100%;
}
.Monse{
letter-spacing: 2px;
font-family: 'Montserrat', sans-serif;
}
body {
font-family: "Helvetica Neue",sans-serif;
font-weight: lighter;
}
header {
width: 100%;
height: 100vh;
background: url(img/bosqueaves.jpg) no-repeat center;
background-size: cover;
}
.content {
width: 94%;
margin: 4em auto;
font-size: 20px;
line-height: 30px;
text-align: justify;
}
.name{
line-height: 60px;
position: fixed;
float: left;
margin: 16px 46px;
color: black;
font-size: 20px;
letter-spacing: 2px;
font-family: 'Montserrat', sans-serif;
}
.name2{
line-height: 60px;
position: fixed;
float: left;
margin: 16px 46px;
color: white;
font-size: 20px;
letter-spacing: 2px;
font-family: 'Montserrat', sans-serif;
}
.smenu{
text-decoration: none;
font-size: 16px;
color: white;
}
.submenu2{
text-decoration: none;
font-size: 16px;
color: black;
}
nav {
position: fixed;
width: 100%;
line-height: 60px;
}
nav ul {
line-height: 60px;
list-style: none;
background: rgba(0, 0, 0, 0);
overflow: hidden;
padding: 0;
text-align: right;
margin: 0;
padding-right: 40px;
transition: 1s;
text-decoration: none;
}
nav.black ul {
background: #000;
text-decoration: none;
}
nav ul li {
display: inline-block;
padding: 16px 40px;;
text-decoration: none;
}
.menu-icon {
line-height: 60px;
width: 100%;
background: #000;
text-align: right;
box-sizing: border-box;
padding: 15px 24px;
cursor: pointer;
color: white;
display: none;
}
#media(max-width: 786px) {
.logo {
position: fixed;
top: 0;
margin-top: 16px;
}
nav ul {
max-height: 0px;
background: #000;
text-decoration: none;
}
nav.black ul {
background: #000;
text-decoration: none;
}
.showing {
max-height: 34em;
}
nav ul li {
box-sizing: border-box;
width: 100%;
padding: 24px;
text-align: center;
text-decoration: none;
}
.menu-icon {
display: block;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Roberto Salas</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght#300&display=swap" rel="stylesheet">
</head>
<body>
<div class="wrapper">
<header>
<nav>
<div class="menu-icon">
<i class="fa fa-bars fa-2x"></i>
</div>
<div id="Title" class="name color">
Roberto Salas
</div>
<div class="Monse">
<ul >
<li><a href="#" class="submenu2" >Home</a></li>
<li><a href="#" class="submenu2" >About</a></li>
<li><a href="#" class="submenu2" >Blog</a></li>
<li>Contact</li>
</ul>
</div>
</nav>
</header>
<div class="content">
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
</div>
</div>
<script type="text/javascript">
// Menu-toggle button
$(document).ready(function() {
$(".menu-icon").on("click", function() {
$("nav ul").toggleClass("showing");
$('a').css('color','white');
});
});
// Scrolling Effect
$(window).on("scroll", function() {
if($(window).scrollTop()) {
$('nav').addClass('black');
$('#Title').addClass('name2');
$('a').css('color','white');
}
else {
$('nav').removeClass('black');
$('#Title').removeClass('name2');
$('a').css('color','black');
}
})
</script>
</body>
</html>
Related
I made a simple masonry layout using css grid.
My requirement is that I wanted a maximum of 8 columns and make it responsive with the screen size.
Everything works great until I have >=8 bricks in the "masonry". As the number of bricks become <8, I want the 'n' columns to be centered in the 'masonry'.
HTML
<body>
<div class="masonry">
<div class="brick">
<p class="subheading-text">Automobiles</p>
<img class="content-img" src="https://www.otgads.com/site_contents/image_Ad/235/1672659803.jpeg">
</div>
<div class="brick">
<img class="content-img" src="https://www.otgads.com/site_contents/image_Ad/233/download (2).jpeg">
</div>
<div class="brick">
<p class="subheading-text">Badhai</p>
<img class="content-img" src="https://www.otgads.com/site_contents/image_Ad/223/advertisement(2).jpeg">
</div>
<div class="brick">
<p class="content-text"><strong>Lorem</strong> Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop </p>
</div>
<div class="brick">
<p class="subheading-text">Business</p>
<p class="content-text"><strong>WANTED</strong> Investor/Partner Rs.3.5 Cr for our Packaging Material mfg Unit Nr. Mumbai 7021629703 9821009496</p>
</div>
<div class="brick">
<p class="subheading-text">Education</p>
<p class="content-text"><strong>Lorem</strong> Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and</p>
</div>
</div>
</body>
CSS
body {
margin: 0;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.masonry {
--masonry-gap: 15px;
--masonry-brick-width: 200px;
column-gap: var(--masonry-gap);
column-fill: initial;
column-width: var(--masonry-brick-width);
max-width: 1740px;
}
.masonry > * {
break-inside: avoid;
margin-bottom: var(--masonry-gap);
}
#supports (grid-template-rows: masonry) {
.masonry {
display: grid;
gap: var(--masonry-gap);
grid-template-rows: masonry;
grid-template-columns: repeat(
auto-fill,
minmax(var(--masonry-brick-width), 1fr)
);
align-tracks: stretch;
}
.masonry > * {
margin-bottom: initial;
}
}
/* some styling not important */
.masonry {
padding: 8px;
}
.content-text {
padding: 10px;
margin: 0px;
border: 1px solid black;
border-radius: 5px;
transition: 0.15s ease-in-out;
}
.content-text:hover {
background-color: antiquewhite;
box-shadow: rgba(0, 0, 0, 0.22) 0px 19px 43px;
transform: translate3d(0px, -1px, 0px);
}
.heading-text {
margin: 0px;
margin-bottom: 10px;
padding: 10px;
text-align: center;
background-color: #ca4040;
color: white;
border-radius: 5px;
}
.subheading-text {
margin: 0px;
margin-bottom: 10px;
padding: 10px;
text-align: center;
color: #404eca;
border: 3px solid #404eca;
border-radius: 5px;
}
.content-img {
width: 100%;
transition: 0.15s ease-in-out;
}
.content-img:hover {
box-shadow: rgba(0, 0, 0, 0.22) 0px 19px 43px;
transform: translate3d(0px, -1px, 0px);
}
Any help is appreciated.
I tried to center the contents in the 'masonry' div but they were always left aligned if the number of bricks were <8 (max 8 as I have fixed the max-width of 'masonry' div to 1740px)
.masonry {
--masonry-gap: 15px;
--masonry-brick-width: 200px;
column-gap: var(--masonry-gap);
column-fill: initial;
column-width: var(--masonry-brick-width);
max-width: 1740px;
display: grid;
gap: var(--masonry-gap);
grid-template-rows: masonry;
grid-template-columns: repeat(auto-fill, minmax(var(--masonry-brick-width), 1fr));
align-items: center; /* added to center the columns */
align-tracks: stretch;
}
Building my first website and cant open en close the menu using javascript ( first time javascript so be gentle ). This is my code in the following order. HTML/CSS/Java.I know that i have to point to id instead of class in CSS, i thought i did it right but can't get it working`.
So this is my HTML code i use visual studio code.
<!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.0">
<title>Project R-K</title>
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<div class="navbar">
<div class="container">
<a class="logo" herf=#> R&K<span>Productions</span></a>
<img id="mobile-open" class="mobile-menu" src="images/icons8-menu.svg" alt="open navigation">
<nav>
<img id="mobile-close" class="mobile-menu-exit" src="images/icons8-delete.svg" alt="Close navigation">
<ul class="primary-nav">
<li class="current">Home</li>
<li> About us</li>
<li> Sign up</li>
</ul>
<ul class="secundary-nav">
<li> Buy R&K dollars</li>
<li class= "Make-account"> Make account</li>
</ul>
</nav>
</div>
</div>
<section class="hero">
<div class="container">
<div class="left-col">
<p class="subhead">Funny & making you money!</p>
<h1>A gamer website, by gamers for gamers</h1>
<div class="hero-cta">
Try for free
<a href="#" class="video-action">
<img src="images/icons8-binoculars.svg" alt="Watch a gamer">Watch a gamer
</a>
</div>
</section>
<img src="images/PSImage.jpg" class="hero-image" alt="Ps-image">
</div>
<section class="features-section">
<div class="container">
<ul class="feature-list">
<li>Awesome community</li>
<li>Maximale adrenaline</li>
<li>Easy to use</li>
<li>All possible games</li>
<img class="oldskool" src="images/Oldskool.jpg" alt="arcade">
</ul>
</div>
</section>
<section class="explanation-in-short">
<div class="container">
We are Richard and Kick and we are gamers since the early stages of our lifes and very dear friends so we have created something that has been missing in the gamer community.
This is a website where you can subscribe and make money playing your favorite game! Try it and find out just how awesome we are!
</div>
</section>
<section class="contact-section">
<div class="container">
<div class="contact-left">
<h2>Contact</h2>
<form action="">
<label for="name">Name</label>
<input type="text" id="name" name="name">
<label for="message">Message</label>
<textarea name="message" id="message" cols="30" rows="10"></textarea>
<input type="submit" class="send-message-cta" value="send message">
</form>
</div>
</div>
</section>
</div>
</section>
</div>
</script>
</body>
</html>
#import url('https://fonts.googleapis.com/css2?family=Poppins:wght#200;500&display=swap');
:root{
--primary-color: rgb(252, 8, 142);
}
body {
background: rgb(245, 243, 243);
margin: 0;
font-family: 'poppins';
}
.navbar {
background:rgb(245, 243, 243);
padding: 1em;
.logo {
text-decoration: none;
font-weight: bold;
color: var(--primary-color);
font-size: 1.2em;
}
span {
color: black;
}
nav {
display: none;
}
.container {
display: flex;
place-content: space-between;
}
.mobile-menu {
cursor: crosshair;
}
}
a {
color: rgb(83, 83, 83);
}
ul{
list-style-type: none;
margin: 0;
padding: 0;
}
section{
padding: 5em 2em;
}
.hero {
text-align: center;
}
.left-col{
.subhead {
text-transform: uppercase;
font-weight: bold;
color: var(--primary-color);
}
h1 {
font-size: 2.5em;
line-height: 1.5em;
margin-top: .2em;
}
.primairy-action {
background: var(--primary-color);
color: white;
text-decoration: none;
padding: .6em 1.3em;
font-size: 1.4em;
border-radius: 5em;
font-weight: bold;
display: inline-block;
cursor: crosshair;
}
.video-action {
display: block;
margin-top: 1em;
img{
margin-right: .5em;
}
}
}
.hero-image{
width: 50%;
height: 50%;
margin-top: .5em;
margin-left: 7em;
}
.features-section {
background: rgb(83, 83, 83);
color: white;
}
.feature-list {
margin: 0;
padding-left: .1em;
display: grid;
li {
font-size: 1.1em;
margin-bottom: 1em;
margin-left: 2em;
position: relative;
&:before {
content: '';
left: -2em;
position: absolute;
width: 20px;
height: 20px;
background-image: url('../Images/icons8-checked.svg');
background-size: contain;
margin-right: .5em;
}
}
}
.oldskool{
display: none;
}
.explanation-in-short{
background: var(--primary-color);
text-align: center;
color: white;
}
h2{
font-size: 2em;
}
label{
display: block;
font-size: 1.2em;
}
input, textarea{
width: 100%;
padding: .8em;
margin-bottom: 1em;
border: 1px solid gray;
box-sizing: border-box;
}
.send-message-cta {
background-color: var(--primary-color);
color: white;
font-weight: bold;
font-size: 1.3em;
border: none;
margin-bottom: 5em;
border-radius: 5em;
display: inline-block;
padding: .8em 2em;
width: unset;
cursor: crosshair;
}
nav{
position: fixed;
z-index: 999;
width: 50%;
right: 0;
top: 0;
background:rgb(83, 83, 83) ;
height: 100vh;
padding: 1em;
ul.primary-nav{
margin-top: 5em;
}
li {
a {
color: white;
text-decoration: none;
display: block;
padding: .5em;
font-size: 1.3em;
text-align: right;
&:hover {
font-weight: bold;
color: var(--primary-color)
}
}
}
}
.mobile-menu-exit {
float: right;
margin: .5em;
cursor: crosshair;
}
<script>
const mobileBtn = document.getElementById('mobile-open')
nav = document.querySelector('nav')
mobileBtnExit = document.getElementById('mobile-exit');
mobileBtn.addEventListener('click', () =>
{nav.classList.add('mobile-open')
});
</script>
You can do it with CSS :focus-within pseudo class. If you want to do it with JS, first of all you should write the true semantic. In your markup, the menu which you want to open should be written equilavent as your button and you can set this menu's opacity to 0, visibility hidden and display none, then you have to listen for click events coming from your buttons, when the click event fires, you should determine which button was clicked then you can select the menu which you want to open, and make it visible. I still advise to use :focus-within.
I'm creating a web page with a fixed header and sticky sub-navigation with a smooth scroll on it. My problem is when clicking the sub-nav first link towards its target element, the sticky sub-navigation not showing up. Does anyone knows how to fix this?
Here are the images. To clarify my question.
Here is my code.
https://codepen.io/christine-tine27/full/eYzMgjB
// SMOOTH SCROLL
var $ = jQuery.noConflict();
$(function () {
$(".smoothScroll").click(function () {
if (
location.pathname.replace(/^\//, "") ==
this.pathname.replace(/^\//, "") &&
location.hostname == this.hostname
) {
var target = $(this.hash);
target = target.length ? target : $("[name=" + this.hash.slice(1) + "]");
if (target.length) {
$("html,body").animate(
{
scrollTop: target.offset().top - 200
},
1100
);
return false;
}
}
});
});
// STICKY SUB NAV
$(window).scroll(function(){
var height = $('.content-item.odd').outerHeight();
if($(window).width() < "767"){
if ($(window).scrollTop() >= 200) {
$('.content-item.odd').addClass('fixed-header');
$('.content-item.odd').css({"position":"fixed","width":"100%","top":"90px","border-top":"1px solid #fff"});
}
else {
$('.content-item.odd').removeClass('fixed-header');
$('.content-item.odd').removeAttr("style");
}
}else if($(window).width() < "1024") {
if ($(window).scrollTop() >= 550) {
$('.content-item.odd').addClass('fixed-header');
$('.content-item.odd').css({"position":"fixed","width":"100%","top":"90px","border-top":"1px solid #fff"});
}
else {
$('.content-item.odd').removeClass('fixed-header');
$('.content-item.odd').removeAttr("style");
}
}else if($(window).width() > "2000") {
if ($(window).scrollTop() >= 1000) {
$('.content-item.odd').addClass('fixed-header');
$('.content-item.odd').css({"position":"fixed","width":"100%","top":"90px","border-top":"1px solid #fff"});
}
else {
$('.content-item.odd').removeClass('fixed-header');
$('.content-item.odd').removeAttr("style");
}
}else{
if ($(window).scrollTop() >= 700) {
$('.content-item.odd').addClass('fixed-header');
$('.content-item.odd').css({"position":"fixed","width":"100%","top":"90px","border-top":"1px solid #fff"});
}
else {
$('.content-item.odd').removeClass('fixed-header');
$('.content-item.odd').removeAttr("style");
}
}
});
body {
margin: 0;
padding: 0;
}
body > header {
font-family: 'Gill Sans', 'Gill Sans MT', sans-serif;
position: fixed;
*position: absolute;
top: 0;
left: 0;
padding: 0;
color: #FFF;
background-color: #000;
*background-color: rgba(0,0,0,0.75);
width: 100%;
z-index: 20;
}
body > header .wrapper {
padding: 0px 10px;
}
body > header section {
display: block;
position: absolute;
top: 15px;
*left: 50px;
}
body > header nav {
display: block;
font-size: 11px;
font-weight: bold;
line-height: 50px;
text-align: right;
text-transform: uppercase;
letter-spacing: 1px;
border-bottom: 1px solid #000;
}
body > header nav ul li {
display: inline-block;
padding: 0 20px;
transition: padding 0.2s ease;
}
body > header nav ul li a {
display: inline-block;
position: relative;
transition: color 0.3s ease;
padding-top: 40px;
}
body > header a {
color: #FFF;
}
ol, ul {
list-style: none;
margin: 0;
padding: 0;
}
.bgImg {
margin-top: 90px;
}
.bgImg img {
width: 100%;
height: 70vh;
object-fit: cover;
}
.wrapper {
max-width: 1300px;
margin: 0 auto;
padding: 30px 20px 0px 20px;
}
.group {
display: flex;
flex-direction: row;
justify-content: center;
flex-wrap: wrap;
}
.group .half {
width: calc(100% / 4);
outline: none;
text-align: center !important;
}
.half .img img {
width: 100%;
}
.content-item.odd {
background: #000;
z-index: 3;
}
.prsub .content-wrap {
max-width: 1300px;
margin: 0 auto;
border-top: 1px solid #c9ced1;
padding-top: 0px;
}
.prsub .group .half {
width: calc(100% / 3);
}
.half .img {
padding: 0px 2px 0px 2px;
}
.the-content {
padding: 20px 0;
}
h4.entry-title {
position: absolute;
margin: 0;
color: #fff;
font-family: 'Abril Fatface';
font-size: 30px;
text-transform: uppercase;
font-weight: bold;
padding: 0;
top: 10px;
letter-spacing: 1px;
text-align: center;
}
.menu {
text-align: right;
}
.menu li {
display: inline-block;
}
.menu li a {
color: #fff;
border-right: 1px solid #fff;
padding: 6px 10px;
}
.content-item.odd {
background: #000;
z-index: 3;
}
.menu {
text-align: right;
}
.content-item.odd .wrapper {
padding-bottom: 0px !important;
}
main {
background-color: #fff;
padding: 0 0 0px 0;
margin-top: -4px;
overflow: hidden;
position: relative;
z-index: 15;
}
.content-item.odd .wrapper {
padding: 0px !important;
}
.prsub .content-wrap {
max-width: 1300px;
margin: 0 auto;
border-top: 1px solid #c9ced1;
padding-top: 0px;
}
main article h2 {
font-family: 'Abril Fatface';
font-size: 30px;
text-transform: uppercase;
color: #000;
font-weight: bold;
margin: 0;
text-align: center;
line-height: 1;
margin-bottom: 20px;
}
main article ul, main article ol {
color: #404041;
display: block;
font-size: 24px;
font-weight: normal;
list-style-type: disc;
}
main article section ul {
font-size: 18px;
}
main article ul li, p {
font-size: 18px;
margin: 10px 0 0;
list-style: none;
text-align: center;
color: #000;
}
.prsub h3 {
text-transform: uppercase;
text-align: center;
font-weight: 100;
font-family: 'Abril Fatface';
color: #000;
padding: 0px;
font-size: 20px;
margin: 0;
font-weight: 100;
}
.prsub article {
padding: 40px 0;
}
<header>
<div class="wrapper">
<section>
<a href="/" class="logo">
<h1>Lorem</h1>
</a>
</section>
<nav>
<div class="navx"></div>
<ul class="ci-plugin">
<li><span>Home</span></li>
<li><span>Menu</span></li>
<li><span>About </span></li>
<li><span>Cook</span></li>
<li><span>Contact </span></li>
<li><span>Careers </span></li>
</ul>
</nav>
</div>
</header>
<section class="title">
<div class="bgImg">
<img src="https://www.free-css.com/assets/files/free-css-templates/preview/page259/aria/assets/images/header-background.jpg" alt="">
</div>
</section>
<main id="main" class="prsub">
<div class="content-container scroll">
<div class="content">
<div class="content-item odd">
<div class="wrapper">
<div class="the-content">
<h4 class="entry-title"><span> About Us</span></h4>
<div class="menu">
<ul >
<li><a class="smoothScroll" href="#intro">INTRO</a></li>
<li><a class="smoothScroll" href="#services">SERVICES</a></li>
<li><a class="smoothScroll" href="#projects">PROJECTS</a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="con-container">
<div class="content-wrap">
<article>
<section>
<ul>
<li>
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</li>
</ul>
</section>
</article>
</div>
<div class="content-wrap">
<article>
<section id="intro">
<h2>
INTRO
</h2>
<ul>
<li>
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</li>
</ul>
</section>
</article>
</div>
<div class="content-wrap">
<article>
<section id="services">
<h2>
SERVICES
</h2>
<h3>
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</h3>
<p>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</section>
</article>
</div>
<div class="content-wrap">
<article>
<section id="projects">
<h2>
PROJECTS
</h2>
<p>
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
</p>
</section>
</article>
</div>
</div>
<div class="wrapper">
<div class="group">
<div class="half">
<div class="img"><img src="https://www.free-css.com/assets/files/free-css-templates/preview/page259/aria/assets/images/intro-office.jpg"></div>
</div>
<div class="half">
<div class="img"><img src="https://www.free-css.com/assets/files/free-css-templates/preview/page259/aria/assets/images/intro-office.jpg"></div>
</div>
<div class="half">
<div class="img"><img src="https://www.free-css.com/assets/files/free-css-templates/preview/page259/aria/assets/images/intro-office.jpg"></div>
</div>
</div>
</div>
</div>
</div>
</main>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js" integrity="sha512-bLT0Qm9VnAYZDflyKcBaQ2gg0hSYNQrJ8RilYldYQ1FxQYoCLtUjuuRuZo+fjqhx/qtq/1itJ0C2ejDxltZVFg==" crossorigin="anonymous"></script>
Thank you in advance.
How do I make a div stay fixed only with horizontal scroll but not vertical?
As you can see, when I scroll from left to right the top nav bar is fixed like it should.
Though as I scroll down, the top nav bar also follows, not as intended. It should remain at the top when the user scrolls down.
This is my CSS to achieve this, simply using position: fixed; and width: 100%;
/* Nav */
.nav {
height: 60px;
position: fixed;
top: 0;
width: 100%;
}
I don't know whether I need to use JavaScript to achieve this.
Thank you
Further code as requested,
<!-- Nav -->
<div class="nav">
<!-- Logo -->
<img class="logo" src="images/logo.png" alt="">
<!-- Logout button -->
<button class="logout-btn" id="logout_user">Logout</button>
<!-- User's email -->
<span id="users_email"></span>
</div>
/* Logo */
.logo {
max-width: 100%;
max-height: 100%;
margin-left: 50px;
}
/* Logout Button */
.logout-btn {
float: right;
position: relative;
top: 40%;
margin-right: 30px;
border: none;
color: white;
padding: 5px 7px 5px 7px;
text-align: center;
text-decoration: none;
font-size: 100%;
border-radius: 10px;
background-color: lightcoral;
}
/* User's email */
#users_email {
float: right;
position: relative;
top: 45%;
margin-right: 15px;
font-size: 100%;
}
Donald Ducks solutions (both) results in the following. Although the nav bar doesn't follow when vertically scrolling it doesn't stretch across the screen and has a scroll bar inside it.
body{
margin:0px;
padding:10%;
background:#000;
}
.wrapper{
margin:0px auto;
width:50%;
background:#ccc;
border:2px solid #fff;
}
.box{
width:100%;
height:250px;
overflow-x: auto;
overflow-y: none;
}
.box p{
font-size:15px;
fon-weight:normal;
color:#333;
padding:2%;
line-height:25px;
}
<div class="wrapper">
<div class="box">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>
</div>
body{
margin:0px;
padding:5%;
background:#000;
}
.wrapper{
margin:0px auto;
width:60%;
background:#ccc;
border:2px solid #fff;
}
.block{
width:100%;
height:30px;
overflow-x: auto;
overflow-y: none;
}
.box{
font-size:15px;
fon-weight:normal;
color:#333;
padding:0px 10px;
width:12%;
float:left;
line-height:25px;
}
<div class="wrapper">
<div class="block">
<div class="box">Testing</div>
<div class="box">Testing</div>
<div class="box">Testing</div>
<div class="box">Testing</div>
<div class="box">Testing</div>
<div class="box">Testing</div>
<div class="box">Testing</div>
<div class="box">Testing</div><div class="box">Testing</div>
<div class="box">Testing</div>
<div class="box">Testing</div>
<div class="box">Testing</div>
<div class="box">Testing</div>
<div class="box">Testing</div>
</div>
</div>
You don't need to use javascript for this. You will only need css.
What you can use is this:
.nav {
height: 60px;
padding: 4px;
margin: 4px 4px;
overflow: auto;
white-space: nowrap;
width: 100%;
}
This css code should work.
If it doesn't, remove overflow and try this instead:
.nav{
height: 60px;
padding: 4px;
margin: 4px 4px;
overflow-x: auto;
overflow-y: none;
white-space: nowrap;
width: 100%;
}
This should be enough.
I implemented a slider on one of my sites but there is a lot of unwanted space above my slider. As you can see the space between the bike image and the menu bar, I was wondering if there was any way to remove this so that the bike image is below the menu bar. I tried looking if it was the height set for the slider but I don't think it is.
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Croydon Cycles</title>
<link rel="stylesheet" href="shop-style.css">
<link rel="shortcut icon" type="image/png" href="images/favicon.png">
<link href="https://fonts.googleapis.com/css?family=Karla" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="parallax.min.js"></script>
</head>
<!DOCTYPE html>
<html lang="en">
<body>
<div class="wrapper">
<header>
<nav>
<div class="menu-icon">
<i class="fa fa-bars fa-2x"></i>
</div>
<div class="logo">
LOGO
</div>
<div class="menu">
<ul>
<li>Home</li>
<li>About</li>
<li>Shop</li>
<li>Contact</li>
</ul>
</div>
</nav>
</header>
<div class="slideshow-container">
<div class="myslides fade">
<div class="numbers">1 / 4</div>
<div class="slider-1"><img class="Fit" src="images/slider-1.jpg"></div>
<div class="caption">Text 1</div>
</div>
<div class="myslides fade">
<div class="numbers">2 / 4</div>
<div class="slider-2"><img src="images/2.jpg"></div>
<div class="caption">Text 2</div>
</div>
<div class="myslides fade">
<div class="numbers">3 / 4</div>
<div><img src="images/3.jpg"></div>
<div class="caption">Text 3</div>
</div>
<div class="myslides fade">
<div class="numbers">4 / 4</div>
<div><img src="images/4.jpg"></div>
<div class="caption">Text 4</div>
</div>
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
</div>
<br>
<div style="text-align:center">
<span class="dots" onclick="currentSlide(1)"></span>
<span class="dots" onclick="currentSlide(2)"></span>
<span class="dots" onclick="currentSlide(3)"></span>
<span class="dots" onclick="currentSlide(4)"></span>
</div>
<script type="text/javascript">
var slideIndex = 1;
showSlide(slideIndex);
function plusSlides(n){
showSlide(slideIndex += n);
}
function currentSlide(n) {
showSlide(slideIndex = n);
}
function showSlide(n){
var i;
var slides = document.getElementsByClassName("myslides");
var dots = document.getElementsByClassName("dots");
if (n > slides.length) { slideIndex = 1};
if (n < 1) { slideIndex = slides.length};
for (i=0;i<slides.length;i++) {
slides[i].style.display = "none";
};
for (i=0;i<dots.length;i++) {
dots[i].className = dots[i].className.replace(" active","");
};
slides[slideIndex-1].style.display = "block";
dots[slideIndex-1].className += " active";
}
</script>
<div class="content">
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
</div>
</div>
<script type="text/javascript">
// Menu-toggle button
$(document).ready(function() {
$(".menu-icon").on("click", function() {
$("nav ul").toggleClass("showing");
});
});
// Scrolling Effect
$(window).on("scroll", function() {
if($(window).scrollTop()) {
$('nav').addClass('black');
}
else {
$('nav').removeClass('black');
}
})
</script>
</body>
</html>
CSS:
html, body {
margin: 0;
padding: 0;
width: 100%;
font-family: verdana,sans-serif;
margin: 0;
}
body {
font-family: "Helvetica Neue",sans-serif;
font-weight: lighter;
}
header {
width: 100%;
height: 100vh;
background: url(hero.jpg) no-repeat 50% 50%;
background-size: cover;
}
.content {
width: 94%;
margin: 4em auto;
font-size: 20px;
line-height: 30px;
text-align: justify;
}
.logo {
line-height: 60px;
position: fixed;
float: left;
margin: 16px 46px;
color: #fff;
font-weight: bold;
font-size: 20px;
letter-spacing: 2px;
}
nav {
position: fixed;
width: 100%;
line-height: 60px;
z-index:2;
}
nav ul {
line-height: 60px;
list-style: none;
background: rgba(0, 0, 0, 0);
overflow: hidden;
color: #fff;
padding: 0;
text-align: right;
margin: 0;
padding-right: 40px;
transition: 1s;
}
nav.black ul {
background: #000;
}
nav ul li {
display: inline-block;
padding: 16px 40px;;
}
nav ul li a {
text-decoration: none;
color: #fff;
font-size: 16px;
}
.menu-icon {
line-height: 60px;
width: 100%;
background: #000;
text-align: right;
box-sizing: border-box;
padding: 15px 24px;
cursor: pointer;
color: #fff;
display: none;
}
#media(max-width: 786px) {
.logo {
position: fixed;
top: 0;
margin-top: 16px;
}
nav ul {
max-height: 0px;
background: #000;
}
nav.black ul {
background: #000;
}
.showing {
max-height: 34em;
}
nav ul li {
box-sizing: border-box;
width: 100%;
padding: 24px;
text-align: center;
}
.menu-icon {
display: block;
}
}
body{
font-family: verdana,sans-serif;
margin: 0;
}
.slideshow-container{
width: 800px;
position: relative;
margin: auto;
}
.numbers{
position: absolute;
top: 0;
color: #f2f2f2;
padding: 8px 12px;
font-size: 12px;
}
.myslides{
display: none;
}
.prev , .next{
position: absolute;
top: 50%;
font-size: 18px;
font-weight: bold;
padding: 16px;
margin-top: -22px;
border-radius: 0 3px 3px 0;
color: #fff;
cursor: pointer;
}
.next{
right: 0;
border-radius: 3px 0 0 3px;
}
.prev:hover,.next:hover{
background-color: rgba(0,0,0,0.8);
}
.caption{
text-align: center;
position: absolute;
bottom: 8px;
width: 100%;
color: #f2f2f2;
font-size: 15px;
padding: 8px 22px;
}
.dots{
width: 13px;
height: 13px;
background: gray;
display: inline-block;
border-radius: 50%;
cursor: pointer;
}
.fade{
animation-name:fade;
animation-duration:1.5s;
}
#keyframes fade{
from {opacity: 0.4;}
to {opacity: 1;}
}
.active, .dot:hover {
background-color: #333;
}
.slider-1 {
display: grid;
height: 100%;
z-index:0;
}
.Fit {
max-width: 100%;
max-height: 100vh;
margin: auto;
z-index:0;
}
The problem is, that on you're CSS the header has a height of 100vh...
Just reduce or remove the amount.
header {
width: 100%;
/* height: 100vh; */
background: url(hero.jpg) no-repeat 50% 50%;
background-size: cover;
}
See here: jsfidde