In my html file I have header and inside it there is ul>li>a menu
/* ****** */
:root {
--primary: #32a852;
--white: #fafafa;
--black: #000000;
--lightgrey: #c7c7c7;
--menu-items: #333333;
--mobile-menu: #4a4a4a;
}
#import url('https://fonts.googleapis.com/css2?family=Open+Sans&family=Roboto&display=swap');
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
.no-select {
}
/* Tags :) */
body {
padding: 0;
margin: 0;
background: var(--primary);
}
/* Header */
.header {
display: flex;
background: var(--white);
width: 100%;
height: 0%;
padding: 5px;
}
.menu-items {
flex: 1;
text-align: right;
display: inline-block;
list-style-type: none;
transform: translateY(30%);
}
.menu-items li {
display: inline-block;
margin-right: 20px;
}
.menu-items li a {
text-decoration: none;
color: var(--menu-items);
font-family: 'Roboto', sans-serif;
font-weight: 500;
font-size: 1.32rem;
}
.company-logo {
width: 50px;
}
.menu-on-off {
display: none;
width: 50px;
}
#media (max-width: 530px) {
.menu-on-off {
display: inline-block;
position: absolute;
right: 3%;
}
.menu-items {
text-align: left;
padding: 10px;
position: fixed;
background: var(--mobile-menu);
width: 100%;
height: 100vh;
}
.menu-items li {
margin-left: 10px;
margin-top: 20px;
display: block;
}
.menu-items li a {
font-size: 1.5rem;
color: var(--white);
}
}
/* Header& */
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Реткинский Мультисад</title>
<link rel="shortcut icon" href="img/favicon.ico" type="image/x-icon" />
<link rel="stylesheet" href="new.css" />
</head>
<body>
<!-- Header -->
<div class="header">
<img src="img/logo.png" class="company-logo" alt="Logo">
<div style="text-align: right;"><img src="img/menu.png" class="menu-on-off" alt="Menu" onclick="menutoggle();"></div>
<ul class="menu-items">
<li>Продукты</li>
<li>Услуги</li>
<li>Галерея</li>
<li>Контакты</li>
</ul>
</div>
<!-- JavaScript -->
<script src="new.js"></script>
</body>
</html>
But here is a thing
Look here
1st there is a little margin-left for the menu and second more serious problem margin-top and in not media query code I dont added margin-top or margin-left.
Happy new year from Armenia ;p. Interesting what details need stackoverflow? Interesting what details need stackoverflow? Interesting what details need stackoverflow? Interesting what details need stackoverflow?
OK—a few minor changes here, but is working. Most have to do with element positioning.
/* ****** */
:root {
--primary: #32a852;
--white: #fafafa;
--black: #000000;
--lightgrey: #c7c7c7;
--menu-items: #333333;
--mobile-menu: #4a4a4a;
}
#import url('https://fonts.googleapis.com/css2?family=Open+Sans&family=Roboto&display=swap');
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
.no-select {
}
/* Tags :) */
body {
padding: 0;
margin: 0;
background: var(--primary);
}
/* Header */
.header {
display: flex;
background: var(--white);
width: 100%;
height: 0%;
padding: 5px;
}
.menu-items {
flex: 1;
text-align: right;
display: inline-block;
list-style-type: none;
}
.menu-items li {
display: inline-block;
margin-right: 20px;
}
.menu-items li a {
text-decoration: none;
color: var(--menu-items);
font-family: 'Roboto', sans-serif;
font-weight: 500;
font-size: 1.32rem;
}
.company-logo {
width: 50px;
}
.menu-on-off {
display: none;
width: 50px;
}
#media (max-width: 530px) {
.menu-on-off {
display: inline-block;
position: absolute;
right: 3%;
}
.menu-items {
text-align: left;
padding: 10px;
position: fixed;
background: var(--mobile-menu);
width: 100%;
top: 28px;
left: 0;
right: 0;
}
.menu-items li {
margin-left: 10px;
margin-top: 20px;
display: block;
}
.menu-items li a {
font-size: 1.5rem;
color: var(--white);
}
}
/* Header& */
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Реткинский Мультисад</title>
<link rel="shortcut icon" href="img/favicon.ico" type="image/x-icon" />
<link rel="stylesheet" href="new.css" />
</head>
<body>
<!-- Header -->
<div class="header">
<img src="img/logo.png" class="company-logo" alt="Logo">
<div style="text-align: right;"><img src="img/menu.png" class="menu-on-off" alt="Menu" onclick="menutoggle();"></div>
<ul class="menu-items">
<li>Продукты</li>
<li>Услуги</li>
<li>Галерея</li>
<li>Контакты</li>
</ul>
</div>
<!-- JavaScript -->
<script src="new.js"></script>
</body>
</html>
Related
After the media query, I can't seem to manage to get the hamburger menu to show up. Navbar links do disappear, but the menu won't show up.
*,
*::after,
*::before {
box-sizing: border-box;
margin: 0;
padding: 0;
}
:root {
--main-color: #ff702a;
--text-color: #fff;
--bg-color: #1e1c2a;
--big-font: 5rem;
--h2-font: 2.25rem;
--p-font: 0.9rem;
--bg-hover: #2f2b41;
}
body {
background-color: var(--bg-color);
font-family: "Poppins", sans-serif;
height: 2000px;
}
body .navbar {
background-color: grey;
display: flex;
justify-content: space-between;
height: 80px;
position: fixed;
width: 100%;
}
body .navbar .logo {
display: flex;
justify-content: center;
align-items: center;
margin-left: 30px;
}
body .navbar .logo a {
color: var(--main-color);
text-decoration: none;
font-weight: 900;
font-size: 2rem;
cursor: pointer;
}
body .navbar .hamburger-menu {
position: absolute;
top: 0.75rem;
right: 1rem;
display: none;
flex-direction: column;
justify-content: space-between;
width: 30px;
height: 21px;
}
body .navbar .hamburger-menu .bar {
height: 3px;
width: 100%;
background-color: white;
border-radius: 10px;
}
body .navbar .navbar-menu {
display: flex;
align-items: center;
gap: 2rem;
margin-right: 25px;
min-width: auto;
}
body .navbar .navbar-menu li {
list-style: none;
opacity: 0.8;
transition: 0.4s ease;
border-radius: 50px;
}
body .navbar .navbar-menu li a {
text-decoration: none;
color: white;
font-size: 1.2rem;
padding: 0.8rem;
}
body .navbar .navbar-menu li:hover {
opacity: 1;
background-color: var(--bg-hover);
}
#media (max-width: 760px) {
.hamburger-menu {
display: flex;
}
.navbar-menu li {
display: none;
}
}
<!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>Document</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<!-- HEADER -->
<header class="navbar">
<div class="logo">
MyWeb
</div>
<a href="#" class="hamburger-menu">
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</a>
<ul class="navbar-menu">
<li>Home</li>
<li>About</li>
<li>Menu</li>
<li>Services</li>
<li>Contact</li>
</ul>
</header>
<!-- SOMETHING -->
<script src="script.js"></script>
</body>
</html>
Your media query styles that make your hamburger visible are lower specificity and thus never applied.
/* Two class selectors */
body .navbar .hamburger-menu {
display: none;
}
#media (max-width: 760px) {
/* One class selector */
.hamburger-menu {
display: flex;
}
}
I compiled your scss into css for the snippet in both your question and this answer, you do NOT need to nest everything like there's no tomorrow - because you run into problems like this and it's just bad practice.
Go and remove all your unnecessary nesting!
*,
*::after,
*::before {
box-sizing: border-box;
margin: 0;
padding: 0;
}
:root {
--main-color: #ff702a;
--text-color: #fff;
--bg-color: #1e1c2a;
--big-font: 5rem;
--h2-font: 2.25rem;
--p-font: 0.9rem;
--bg-hover: #2f2b41;
}
body {
background-color: var(--bg-color);
font-family: "Poppins", sans-serif;
height: 2000px;
}
body .navbar {
background-color: grey;
display: flex;
justify-content: space-between;
height: 80px;
position: fixed;
width: 100%;
}
body .navbar .logo {
display: flex;
justify-content: center;
align-items: center;
margin-left: 30px;
}
body .navbar .logo a {
color: var(--main-color);
text-decoration: none;
font-weight: 900;
font-size: 2rem;
cursor: pointer;
}
body .navbar .hamburger-menu {
position: absolute;
top: 0.75rem;
right: 1rem;
display: none;
flex-direction: column;
justify-content: space-between;
width: 30px;
height: 21px;
}
body .navbar .hamburger-menu .bar {
height: 3px;
width: 100%;
background-color: white;
border-radius: 10px;
}
body .navbar .navbar-menu {
display: flex;
align-items: center;
gap: 2rem;
margin-right: 25px;
min-width: auto;
}
body .navbar .navbar-menu li {
list-style: none;
opacity: 0.8;
transition: 0.4s ease;
border-radius: 50px;
}
body .navbar .navbar-menu li a {
text-decoration: none;
color: white;
font-size: 1.2rem;
padding: 0.8rem;
}
body .navbar .navbar-menu li:hover {
opacity: 1;
background-color: var(--bg-hover);
}
#media (max-width: 760px) {
body .navbar .hamburger-menu {
display: flex;
}
.navbar-menu li {
display: none;
}
}
<!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>Document</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<!-- HEADER -->
<header class="navbar">
<div class="logo">
MyWeb
</div>
<a href="#" class="hamburger-menu">
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</a>
<ul class="navbar-menu">
<li>Home</li>
<li>About</li>
<li>Menu</li>
<li>Services</li>
<li>Contact</li>
</ul>
</header>
<!-- SOMETHING -->
<script src="script.js"></script>
</body>
</html>
I don't have an idea of how am I supposed to make the menu show with an animation. I want it to slide in down and back up on toggle. I'm down for any kind of solution.
const toggleButton = document.getElementById('toggleButton');
const naviList = document.getElementById('navi-lista');
toggleButton.addEventListener('click', () => {
naviList.classList.toggle('active');
})
* {
font-family: 'Lato', sans-serif;
box-sizing: border-box;
margin: 0px;
padding: 0px;
}
body {
background-color: #856547;
}
.rodzicnav {
position: fixed;
top: 0;
left: 0;
margin: auto;
width: 100%;
}
.navbar {
background-color: rgb(31, 31, 31);
align-items: center;
color: white;
display: flex;
justify-content: space-around;
font-size: 18px;
}
.primary-icon {
height: 30px;
}
.lista-nav {
list-style-type: none;
}
.lista-nav .elementlisty {
display: inline-block;
padding: 20px;
}
.navbar a {
color: white;
text-decoration: none;
}
.grow {
transition: all .2s ease-in-out;
}
.grow:hover {
transform: scale(1.1);
}
.menu {
display: none;
}
.menu-line {
width: 25px;
height: 3px;
background-color: white;
margin-bottom: 4px;
}
#media all and (min-width: 480px) {
.navbar {
flex-direction: column;
}
.menu {
display: block;
position: absolute;
right: 15px;
top: 15px;
cursor: pointer;
}
.lista-nav .elementlisty {
display: block;
padding: 10px;
border-top: solid 1px white;
}
.lista-nav {
list-style-type: none;
width: 100%;
text-align: center;
padding-top: 15px;
display: none;
}
.logo-kontener {
width: 100%;
}
.primary-icon {
margin-left: 10px;
margin-top: 10px;
}
.active {
display: block;
}
}
<!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">
<!-- FONT -->
<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=Lato:wght#300&display=swap" rel="stylesheet">
<!-- -->
<link href="https://unpkg.com/aos#2.3.1/dist/aos.css" rel="stylesheet">
<link rel="stylesheet" href="style.css">
<title></title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.3/gsap.min.js" defer></script>
<script src="script.js" defer></script>
</head>
<body>
<div class="rodzicnav">
<nav class="navbar">
<div class="logo-kontener">
<img class="primary-icon" src="obrazy/logo.png" alt="">
</div>
<ul class="lista-nav" id="navi-lista">
<li class="elementlisty grow">
O nas
</li>
<li class="elementlisty grow">
Realizacje
</li>
<li class="elementlisty grow">
Kontakt
</li>
</ul>
<div class="menu" id="toggleButton">
<div class="menu-line"></div>
<div class="menu-line"></div>
<div class="menu-line"></div>
</div>
</nav>
</div>
</body>
</html>
I tried watching youtube tutorials, look for some anwser at freecodecamp and w3s.
I'm also kind of new to responsive website designs, so I appreciate your help.
You can try to use max-height as property to animate:
#media all and (max-width: 480px) {
.navbar {
position: relative;
padding: 10px 15px;
}
.menu {
display: block;
cursor: pointer;
}
.lista-nav .elementlisty {
display: block;
padding: 10px;
border-top: solid 1px white;
}
.lista-nav {
transition: max-height .3s;
list-style-type: none;
width: 100%;
text-align: center;
position: absolute;
top: 100%;
left: 0;
right: 0;
background-color: rgb(31, 31, 31);
max-height: 0;
overflow: hidden;
}
.logo-kontener {
width: 100%;
}
.primary-icon {
margin-left: 10px;
margin-top: 10px;
}
.active {
max-height: 500px;
}
}
Hey i am trying to make a navbar again and I have declared that the anchor tag have display block but white space appear
Here isy HTML code=
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="UTF-8">
<title>Page title</title>
<link rel="stylesheet" href="css.css"></link>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<script src="css.js"></script>
<script src="https://kit.fontawesome.com/e8f9edfb9f.js" crossorigin="anonymous"></script>
</head>
<body>
<nav>
⠀<span class="title">Nav</span>
<span class="menu-btn">
<label for="nav-btn"><i class="fas fa-bars"></i></label>
<input type="checkbox" name="" id="nav-btn">
</span>
<div class="nav-links">
Home
About
Contact Us
Feedback
</div>
</nav>
</body>
</html>
And this is CSS code
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
margin: 0;
padding: 0;
}
nav {
background: black;
width: 100% !important;
color: white;
height: 76px;
line-height: 76px;
padding-right: 10px;
font-size: 20pt !important;
}
.nav-links a {
font-size: 20px;
text-decoration: none;
}
#nav-btn, label{
display: none;
}
#media(min-width: 600px){
.nav-links a {
color: white;
}
.nav-links{
float: right;
justify-content: space-between;
}
.nav-links a:hover{
background-color: white;
color: black;
padding-top: 2.5px;
padding-bottom: 2.5px;
border-radius: 5px;
padding-right: 2.5px;
padding-left: 2.5px;
}
nav {
/*display: flex;*/
}
.title, .nav-links{
display: inline;
}
}
#media(max-width: 599px){
label {
display: inline;
float: right;
}
.extra{
display: none;
}
.nav-links{
text-align: center;
display: block;
}
.nav-links a {
display: block;
}
}
And the white space is only appear in mobile devices so please help me i need it fast⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
You have a padding-right on nav section
nav {
background: black;
width: 100% !important;
color: white;
height: 76px;
line-height: 76px;
padding-right: 10px;
font-size: 20pt !important;
}
make padding-right: 0; for smaller screen.
#media(max-width: 599px){
nav{
padding-right: 0px;
}
}
I want to hide the href link attachment to my browser link when I click on each href. For example, when I click on the href="dummy1" I don't want it to show mydomain.com/#dummy1. I want to hide the #dummy1 part. Hope this question makes sense.
Each hypertext scrolls down to a different part of my page.
Here is my CSS and HTML code
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
body {
background: #000;
min-height: 200vh;
}
header {
position: fixed;
top: 0;
left: 0;
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
transition: 0.6s;
padding: 40px 100px;
z-index: 100000;
}
header .logo {
position: relative;
font-weight: 700;
color: #fff;
text-decoration: none;
font-size: 3em;
text-transform: uppercase;
letter-spacing: 2px;
transition: 0.6s;
}
header.sticky {
padding: 5px 100px;
background: #fff;
}
header ul {
position: relative;
display: flex;
justify-content: center;
align-items: center;
}
header ul li {
position: relative;
list-style: none;
}
header ul li a {
position: relative;
margin: 0 15px;
text-decoration: none;
color: #fff;
letter-spacing: 2px;
font-weight: 500px;
transition: 0.6s;
}
.banner {
position: relative;
width: 100%;
height: 100vh;
background: url(IMG-1022.jpg);
background-size: cover;
}
header.sticky .logo,
header.sticky ul li a {
color: #000;
}
#home {
padding-bottom: 500px;
background-color: aqua;
}
#aboutMe {
padding-bottom: 500px;
background-color: orange;
}
#portfolio {
padding-bottom: 500px;
background-color: yellow;
}
#contact {
padding-bottom: 1000px;
background-color: purple;
}
#wrapper {
padding-bottom: 50px;
}
#dummy1,
#dummy2,
#dummy3 {
margin-top: -65px;
}
#aboutMe,
#portfolio,
#contact {
margin-top: 65px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=chrome">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="indexStyle.css">
<link rel="shortcut icon" type="image/jpg" href="favicon.img"/>
<title>Document</title>
</head>
<body>
<header>
My Name
<ul>
<li class="page-scroll">About Me</li>
<li class="page-scroll">Portfolio</li>
<li class="page-scroll">Contact</li>
</ul>
</header>
<section class="banner"></section>
<script type="text/javascript">
window.addEventListener("scroll", function(){
var header = document.querySelector("header");
header.classList.toggle("sticky", window.scrollY > 100);
})
</script>
<div id="dummy1"></div>
<div id="aboutMe">This is the about me section</div>
<div id="dummy2"></div>
<div id="portfolio">This is the portfolio section</div>
<div id="dummy3"></div>
<div id="contact">This is the contact me section</div>
</body>
</html>
This can be achived by setting the href property to href="" and by attaching a onClick event to the <a> tag to redirect the link after clicking.
In the end, it should look like this:
Your text.
For this case you can use JavaScript. Bind your link to a clickevent and set the link target via JS and jump there. This way you can manipulate the link as you like.
function jump (target) {
window.location = '#' + target;
return false;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
body {
background: #000;
min-height: 200vh;
}
header {
position: fixed;
top: 0;
left: 0;
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
transition: 0.6s;
padding: 40px 100px;
z-index: 100000;
}
header .logo {
position: relative;
font-weight: 700;
color: #fff;
text-decoration: none;
font-size: 3em;
text-transform: uppercase;
letter-spacing: 2px;
transition: 0.6s;
}
header.sticky {
padding: 5px 100px;
background: #fff;
}
header ul {
position: relative;
display: flex;
justify-content: center;
align-items: center;
}
header ul li {
position: relative;
list-style: none;
}
header ul li a {
position: relative;
margin: 0 15px;
text-decoration: none;
color: #fff;
letter-spacing: 2px;
font-weight: 500px;
transition: 0.6s;
}
.banner {
position: relative;
width: 100%;
height: 100vh;
background: url(IMG-1022.jpg);
background-size: cover;
}
header.sticky .logo,
header.sticky ul li a {
color: #000;
}
#home {
padding-bottom: 500px;
background-color: aqua;
}
#aboutMe {
padding-bottom: 500px;
background-color: orange;
}
#portfolio {
padding-bottom: 500px;
background-color: yellow;
}
#contact {
padding-bottom: 1000px;
background-color: purple;
}
#wrapper {
padding-bottom: 50px;
}
#dummy1,
#dummy2,
#dummy3 {
margin-top: -65px;
}
#aboutMe,
#portfolio,
#contact {
margin-top: 65px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=chrome">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="indexStyle.css">
<link rel="shortcut icon" type="image/jpg" href="favicon.img"/>
<title>Document</title>
</head>
<body>
<header>
My Name
<ul>
<li class="page-scroll"><a onclick="return jump( 'dummy1')" href="dummy1">About Me</a></li>
<li class="page-scroll"><a onclick="return jump( 'dummy2')" href="dummy2">Portfolio</a></li>
<li class="page-scroll"><a onclick="return jump( 'dummy1')" href="dummy3">Contact</a></li>
</ul>
</header>
<section class="banner"></section>
<script type="text/javascript">
window.addEventListener("scroll", function(){
var header = document.querySelector("header");
header.classList.toggle("sticky", window.scrollY > 100);
})
</script>
<div id="dummy1"></div>
<div id="aboutMe">This is the about me section</div>
<div id="dummy2"></div>
<div id="portfolio">This is the portfolio section</div>
<div id="dummy3"></div>
<div id="contact">This is the contact me section</div>
</body>
</html>
Nothing I try to find online works. When I hover over the link it goes to the link and the url changes but it doesn't move the page. I'm using chrome up to date.
Here is the code:
Edit: Apparently it has something to do with the CSS because when I took the CSS out it started to work, but I don't know why
$('.scroll').localScroll();
body {
margin:0;
color: #222;
background-color: #222;
font-family: 'Work Sans', sans-serif;
font-weight: 400;
overflow-y: scroll;
overflow-x: hidden;
}
html, body {
width: 100%;
height: 100%;
}
.container{
width: 80%;
margin: 0 auto;
}
header::after{
content: '';
display: table;
clear: both;
}
#down{
filter: brightness(0) invert(1);
width: 3%;
height: auto;
position: absolute;
top: 50; bottom:0; left: 0; right:0;
padding-bottom: 20px;
margin: auto;
}
.movetobot{
height: 200vh;
}
section h1{
color: #fff;
position: absolute;
text-align: center;
top: 110%;
width: 100%;
line-height: 0.4em;
font-family: 'Roboto', sans-serif;
font-weight: 300;
}
.center{
text-align: center;
}
header {
width: 100%;
height: 100vh;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.logo {
color: white;
float: left;
font-family: 'Roboto', sans-serif;
}
.btext{
font-family: 'Roboto', sans-serif;
color: #f9f3f4;
position: absolute;
text-align: center;
top: 40%;
width: 100%;
line-height: 0.4em;
}
h1{
font-size: 50px;
}
.btn{
color: #fff;
font-family: 'Roboto' sans-serif;
font-weight: 300;
text-decoration: none;
border: #ccc 1px solid;
padding: 10px 15px;
border-radius: 8px;
line-height: 4em;
}
nav {
float: right;
}
nav ul {
margin: 0;
padding: 0;
list-style: none;
}
nav li{
display: inline-block;
margin-left: 85px;
padding-top: 25px;
position: relative;
}
nav a {
color: white;
text-decoration: none;
text-transform: uppercase;
}
nav a:hover {
color: #ecf0f1;
}
nav a::after{
margin-top:5px;
content: '';
display: block;
height: 5px;
width: 0%;
background-color: black;
position: absolute;
transition: all ease-in-out 350ms;
}
nav a:hover::after {
width: 100%;
}
.btn:hover{
color: #b19295;
border: #fff 1px solid;
}
::-webkit-scrollbar {
width: 10px;
}
/* Track */
::-webkit-scrollbar-track {
background: #f1f1f1;
}
/* Handle */
::-webkit-scrollbar-thumb {
background: #888;
}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
background: #555;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300" rel="stylesheet">
<link href="css/hover.css" rel="stylesheet" media="all">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="css/hover.css" rel="stylesheet" media="all">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="icon" href="/icons8-home-24.png">
<title>Royal Services</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="first">
<div class="container">
<h2 class="logo">R O Y A L</h2>
<nav class="scroll">
<ul>
<li>Home</li>
<li>Offering</li>
<li>Contact</li>
</ul>
</nav>
</div>
<!-- <hr width="100%"> -->
<a href="#services">
<img src="https://d30y9cdsu7xlg0.cloudfront.net/png/634848-200.png" alt="down" class="hvr-hang" id="down">
</a>
<div class="btext">
<h1>ROYAL SERVICES</h1>
Discord
</div>
</div>
<div id="services">
<section class="movetobot">
<h1>Services</h1>
</section>
</div>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-scrollTo/2.1.2/jquery.scrollTo.min.js"></script>
<script src=https://cdnjs.cloudflare.com/ajax/libs/jquery-localScroll/2.0.0/jquery.localScroll.min.js></script>
<script src="js.js"></script>
</html>
Set the "id" to page part tag where you want to move.
<div id="someIdName"></div>
It's because your content in <div id="first"> is either floating or position absolute that div have no high so <div id="services"> takes all of the page. When you click the link the page is already there.
What you can do is give min-height to <div id="first">.
What i would do is to structure the HTML in better way and remove all floats and absolute positions.