This question already has answers here:
Add a CSS border on hover without moving the element [duplicate]
(4 answers)
Closed 2 years ago.
I am creating a web page with a navigation bar which has some menu.
i want to show a border on menu items border when i mouse over them. i have created this but when i am hovering on them they appear with a border and making an effect on the text also. How can I remove the effect from the text ?
body{
font-family: 'Montserrat', sans-serif;
}
*{
margin:auto;
padding:0px;
}
.header{
background-color:#0D1422;
color:white;
width:100%;
height:auto;
padding:10px;
overflow:hidden;
}
.header .logo{
width: auto;
margin: 37px 100px;
color:white;
font-size:50px;
font-weight:800;
overflow: hidden;
float: left;
text-transform: uppercase;
}
span {
color: #F5A425;
}
.menu-bar {
float: right;
overflow: hidden;
}
.menu-bar ul {
text-transform: uppercase;
list-style-type: none;
padding: 27px;
font-size: 53px;
font-weight:600;
color: white;
}
li {
list-style-type: none;
float: left;
padding: 40px;
color: white;
}
a {
color: white;
text-decoration: none;
font-size: 57px;
font-weight: 800;
}
.menu-bar {
float: right;
margin: auto 140px;
}
li:hover{
border:1px solid #f5a523;
transition:.5s;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>grad school project</title>
<link href="https://fonts.googleapis.com/css?family=Montserrat:100,200,300,400,500,600,700,800,900" rel="stylesheet">
<link rel="stylesheet" href="main.css">
</head>
<body>
<header>
<div class="header">
<div class="logo">
<h1> <span>Grad</span> school</h1>
</div>
<div class="menu-bar">
<ul>
<li> home</li>
<li> about-us</li>
<li> courses</li>
<li> contact</li>
<li> extarnal</li>
</ul>
</div>
</div>
</header>
</body>
</html>
The way I would solve this is by setting the border color to transparent while keeping the same width as when the element is hovered.
body {
font-family: "Montserrat", sans-serif;
}
* {
margin: auto;
padding: 0px;
}
.header {
background-color: #0d1422;
color: white;
width: 100%;
height: auto;
padding: 10px;
overflow: hidden;
}
.header .logo {
width: auto;
margin: 37px 100px;
color: white;
font-size: 50px;
font-weight: 800;
overflow: hidden;
float: left;
text-transform: uppercase;
}
span {
color: #f5a425;
}
.menu-bar {
float: right;
overflow: hidden;
}
.menu-bar ul {
text-transform: uppercase;
list-style-type: none;
padding: 27px;
font-size: 53px;
font-weight: 600;
color: white;
}
li {
list-style-type: none;
float: left;
padding: 40px;
color: white;
border: 1px solid transparent;
}
a {
color: white;
text-decoration: none;
font-size: 57px;
font-weight: 800;
}
.menu-bar {
float: right;
margin: auto 140px;
}
li:hover {
border: 1px solid #f5a523;
transition: 0.5s;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>grad school project</title>
<link
href="https://fonts.googleapis.com/css?family=Montserrat:100,200,300,400,500,600,700,800,900"
rel="stylesheet"
/>
<link rel="stylesheet" href="main.css" />
</head>
<body>
<header>
<div class="header">
<div class="logo">
<h1><span>Grad</span> school</h1>
</div>
<div class="menu-bar">
<ul>
<li>home</li>
<li>about-us</li>
<li>courses</li>
<li>contact</li>
<li>extarnal</li>
</ul>
</div>
</div>
</header>
</body>
</html>
I've added a transparent border to the original items and gave it the color on hover and I moved your transition to the not hovered selector as that is where it should be.
body {
font-family: 'Montserrat', sans-serif;
}
* {
margin: auto;
padding: 0px;
}
.header {
background-color: #0d1422;
color: white;
width: 100%;
height: auto;
padding: 10px;
overflow: hidden;
}
.header .logo {
width: auto;
margin: 37px 100px;
color: white;
font-size: 50px;
font-weight: 800;
overflow: hidden;
float: left;
text-transform: uppercase;
}
span {
color: #f5a425;
}
.menu-bar {
float: right;
overflow: hidden;
}
.menu-bar ul {
text-transform: uppercase;
list-style-type: none;
padding: 27px;
font-size: 53px;
font-weight: 600;
color: white;
}
li {
list-style-type: none;
float: left;
padding: 40px;
color: white;
transition: 0.5s;
border: 1px solid transparent;
}
a {
color: white;
text-decoration: none;
font-size: 57px;
font-weight: 800;
}
.menu-bar {
float: right;
margin: auto 140px;
}
li:hover {
border: 1px solid #f5a523;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>grad school project</title>
<link
href="https://fonts.googleapis.com/css?family=Montserrat:100,200,300,400,500,600,700,800,900"
rel="stylesheet"
/>
<link rel="stylesheet" href="main.css" />
</head>
<body>
<header>
<div class="header">
<div class="logo">
<h1><span>Grad</span> school</h1>
</div>
<div class="menu-bar">
<ul>
<li>home</li>
<li>about-us</li>
<li>courses</li>
<li>contact</li>
<li>extarnal</li>
</ul>
</div>
</div>
</header>
</body>
</html>
I'm not quite sure what you're trying to do, I assume you do want a border when hovering over but you don't want the items to jump around you could ad a display:flex to your menu-bar items with a flex-direction of column to put them in the same order again
body{
font-family: 'Montserrat', sans-serif;
}
*{
margin:auto;
padding:0px;
}
.header{
background-color:#0D1422;
color:white;
width:100%;
height:auto;
padding:10px;
overflow:hidden;
}
.header .logo{
width: auto;
margin: 37px 100px;
color:white;
font-size:50px;
font-weight:800;
overflow: hidden;
float: left;
text-transform: uppercase;
}
span {
color: #F5A425;
}
.menu-bar {
float: right;
overflow: hidden;
}
.menu-bar ul {
display:flex;
flex-direction:column;
text-transform: uppercase;
list-style-type: none;
padding: 27px;
font-size: 53px;
font-weight:600;
color: white;
}
li {
list-style-type: none;
float: left;
padding: 40px;
color: white;
}
a {
color: white;
text-decoration: none;
font-size: 57px;
font-weight: 800;
}
.menu-bar {
float: right;
margin: auto 140px;
}
li:hover{
border:1px solid #f5a523;
transition:.5s;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>grad school project</title>
<link href="https://fonts.googleapis.com/css?family=Montserrat:100,200,300,400,500,600,700,800,900" rel="stylesheet">
<link rel="stylesheet" href="main.css">
</head>
<body>
<header>
<div class="header">
<div class="logo">
<h1> <span>Grad</span> school</h1>
</div>
<div class="menu-bar">
<ul>
<li> home</li>
<li> about-us</li>
<li> courses</li>
<li> contact</li>
<li> extarnal</li>
</ul>
</div>
</div>
</header>
</body>
</html>
Related
How can I shift my logo to top left side in the header bar?
I tried most of the time but code is not executed. My HTML code and CSS code is below:
#import url('https://fonts.googleapis.com/css2?family=Poppins:wght#400;500;600;700&family=Ubuntu:wght#400;500;700&display=swap');
/* Selector ke bare me aache se padh lo
*/
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
text-decoration: none;
}
.max-width {
max-width: 1300px;
padding: 0 80px;
margin: auto;
}
/* navbar styling */
.navbar {
position: fixed;
width: 100%;
padding: 30px, 0;
background-color: none;
font-family: 'Ubuntu', 'sans-serif';
}
.navbar.sticky {
padding: 30px, 0;
background: crimson;
}
.navbar .max-width {
display: flex;
align-items: center;
justify-content: space-between;
}
.navbar .logo a {
align-items: left;
color: #fff;
font-size: 35px;
font-weight: 600;
}
.navbar .logo {
/* text-align:left; // want this logo to the top left side but this is not happning */
padding-top: 30px;
}
.navbar .logo a span {
color: crimson;
}
.navbar .menu li {
padding-top: 18px;
list-style: none;
display: inline-block;
}
.navbar .menu li a {
color: #fff;
font-size: 18px;
font-weight: 500px;
margin-left: 25px;
transition: color 0.3s ease;
}
.navbar .menu li a:hover {
color: crimson;
}
/* home section styleing */
.home {
display: flex;
background-size: cover;
background-attachment: fixed;
background-image: url(/banner.jpg);
background-repeat: no-repeat;
background-position: center;
height: 100vh;
color: #fff;
min-height: 500px;
font-family: 'Ubuntu', 'sans-serif';
}
.home .max-width {
margin: auto 0. auto 40px;
margin-left: -3px;
}
.text-1 {
font-size: 27px;
}
.text-2 {
font-size: 75px;
font-weight: 600;
}
.text-3 {
font-size: 40px;
margin: 5px 0;
}
.home .text-3 span {
color: crimson;
font-weight: 500;
}
<!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>My Portfolio Website</title>
<link rel="stylesheet" href="website.css">
<script src="https://kit.fontawesome.com/a076d05399.js" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
</head>
<body>
<nav class="navbar">
<div class="max-width">
<div class="logo"> Portfo<span>lio.</span></div>
<ul class="menu">
<li>Home</li>
<li>About</li>
<li>Services</li>
<li>Skills</li>
<li>Teams</li>
<li>Contact me</li>
</ul>
</div>
</nav>
<!-- home section start -->
<section class="home">
<div class="max-width">
<div class="home-content"></div>
<div class="text-1">Hello ji, My name is</div>
<div class="text-2">Baljit Singh</div>
<div class="text-3">And I'm a <span>Engineer</span> </div>
</div>
</section>
<p style="text-align: center; padding: 8px ; font-size: larger; ">This website is in under construction</p>
<!-- <script src="website.js"></script> -->
</body>
</html>
Your logo is already on the left side. Probably you are not seeing it properly because of your background color. I have changed your background to black. Now you see.
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
text-decoration: none;
background : black;
}
.max-width {
max-width: 1300px;
padding: 0 80px;
margin: auto;
}
/* navbar styling */
.navbar {
position: fixed;
width: 100%;
padding: 30px, 0;
background-color: black;
font-family: 'Ubuntu', 'sans-serif';
}
.navbar.sticky {
padding: 30px, 0;
background: crimson;
}
.navbar .max-width {
display: flex;
align-items: center;
justify-content: space-between;
}
.navbar .logo a {
align-items: left;
color: #fff;
font-size: 35px;
font-weight: 600;
}
.navbar .logo {
/* text-align:left; // want this logo to the top left side but this is not happning */
padding-top: 30px;
}
.navbar .logo a span {
color: crimson;
}
.navbar .menu li {
padding-top: 18px;
list-style: none;
display: inline-block;
}
.navbar .menu li a {
color: #fff;
font-size: 18px;
font-weight: 500px;
margin-left: 25px;
transition: color 0.3s ease;
}
.navbar .menu li a:hover {
color: crimson;
}
/* home section styleing */
.home {
display: flex;
background-size: cover;
background-attachment: fixed;
background-image: url(/banner.jpg);
background-repeat: no-repeat;
background-position: center;
height: 100vh;
color: #fff;
min-height: 500px;
font-family: 'Ubuntu', 'sans-serif';
}
.home .max-width {
margin: auto 0. auto 40px;
margin-left: -3px;
}
.text-1 {
font-size: 27px;
}
.text-2 {
font-size: 75px;
font-weight: 600;
}
.text-3 {
font-size: 40px;
margin: 5px 0;
}
.home .text-3 span {
color: crimson;
font-weight: 500;
}
<!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>My Portfolio Website</title>
<link rel="stylesheet" href="website.css">
<script src="https://kit.fontawesome.com/a076d05399.js" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
</head>
<body>
<nav class="navbar">
<div class="max-width">
<div class="logo">
Portfo<span>lio.</span>
</div>
<ul class="menu">
<li>Home</li>
<li>About</li>
<li>Services</li>
<li>Skills</li>
<li>Teams</li>
<li>Contact me</li>
</ul>
</div>
</nav>
<!-- home section start -->
<section class="home">
<div class="max-width">
<div class="home-content"></div>
<div class="text-1">Hello ji, My name is</div>
<div class="text-2">Baljit Singh</div>
<div class="text-3">And I'm a <span>Engineer</span> </div>
</div>
</section>
<p style="text-align: center; padding: 8px ; font-size: larger; ">This website is in under construction</p>
</body>
</html>
I'm new to css/html and I still don't know how to center the text when hovering. So I have a project on my subject to create a simple website. And so far I'm starting with the header. I'm having this one problem where I can't center the text everytime i hover my mouse to the menus. Here is the image and my code.
* {
margin: 0;
padding: 0;
border: none;
outline: none;
font-family: monospace;
text-transform: uppercase;
font-weight: bold;
text-decoration: none;
box-sizing: border-box;
}
#font-face {
font-family: 'crimson';
src: url(fonts/Crimson-Bold.ttf);
font-style: normal;
font-weight: 100%;
}
body{
margin: 0;
padding: 0;
background: white;
}
nav{
width: 100%;
height: 100px;
background: #7B241C;
overflow: auto;
}
ul{
padding: 0;
margin: 0 0 0 150px;
list-style: none;
}
li {
float: left;
}
.logo img{
position: absolute;
top: -40px;
left:-60px;
}
li a{
margin-top: 30px;
margin-left: 100px;
}
nav a{
width: 100px;
display: block;
padding: 10px 70px;
text-decoration: none;
font-family: crimson;
color: white;
text-align: center;
}
nav a:hover {
background: #CD6155;
transition: .5s;
border-radius: 10px;
font-size: 20px;
padding: 0 50;
text-align: center;
align-items: center;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Pinoy Putahe</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="main.css">
</head>
<body>
<header>
<div class="logo"><img src="logofinal.png" width="320" height="180"></div>
<nav>
<ul>
<li>home</li>
<li>about</li>
<li>dishes</li>
</ul>
</nav>
</header>
</body>
</html>
Help please : (
so many issues, and no need for such things, as long as u set one you dun have to set other, anyway I have just set the fix on the same code, you have to use li a or nav a, as long as they both are doing the same in your case, so I removed one of them both and you set padding-left: 70px, which I removed and added to the width of the buttons
check the snippet
* {
margin: 0;
padding: 0;
border: none;
outline: none;
font-family: monospace;
text-transform: uppercase;
font-weight: bold;
text-decoration: none;
box-sizing: border-box;
}
#font-face {
font-family: 'crimson';
src: url(fonts/Crimson-Bold.ttf);
font-style: normal;
font-weight: 100%;
}
body{
margin: 0;
padding: 0;
background: white;
}
nav{
width: 100%;
height: 100px;
background: #7B241C;
overflow: auto;
}
ul{
padding: 0;
margin: 0 0 0 150px;
list-style: none;
}
li {
float: left;
}
.logo img{
position: absolute;
top: -40px;
left:-60px;
}
li a{
margin-top: 30px;
margin-left: 100px;
}
nav a{
width: 170px;
display: block;
padding: 10px 0;
text-decoration: none;
font-family: crimson;
color: white;
text-align: center;
}
nav a:hover {
background: #CD6155;
transition: .5s;
border-radius: 10px;
font-size: 20px;
padding: 0 50;
text-align: center;
align-items: center;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Pinoy Putahe</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="main.css">
</head>
<body>
<header>
<div class="logo"><img src="logofinal.png" width="320" height="180"></div>
<nav>
<ul>
<li>home</li>
<li>about</li>
<li>dishes</li>
</ul>
</nav>
</header>
</body>
</html>
So, I have this problem when I put my mouse cursor over one of the elements of the unordered list, all the other elements to the right of that element move by about 5 pixels to the right.
I'm new in HTML and CSS, so I came across this obstacle...
Is there a way to solve this problem?
Also, I put on "ul li a: hover" that the font is increased by 110%, while in other situations, for example, when I put only "opacity" on "ul li a: hover" none of the above happens, the elements will not move to the right side.
Here Is my HTML:
body {
margin: 0px;
padding: 0px;
background-attachment: fixed;
background-image: linear-gradient(-120deg, #f5eeed, #ccaeab);
}
header {
margin: 0px;
padding: 0px;
}
.hhh {
position: absolute;
font-family: 'Fredoka One', cursive;
font-size: 40px;
left: 8%;
top: 4%;
}
.hhh a {
text-decoration: none;
}
.hhh a:active {
color: black;
}
.hhh a:visited {
color: black;
}
.hhh a:hover {
color: black;
opacity: 0.8;
font-size: 110%;
}
.hhh a:link {
color: black;
}
.gm {
position: absolute;
display: flex;
left: 55%;
top: 7%;
font-family: 'Fredoka One', cursive;
font-size: 20px;
}
.gm li {
margin-left: 35px;
list-style-type: none;
}
.gm li a {
text-decoration: none;
}
.gm li a:active {
color: black;
}
.gm li a:visited {
color: black;
}
.gm li a:hover {
color: black;
font-size: 110%;
box-sizing: border-box;
}
.gm li a:link {
color: black;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="author" content="Domagoj Šutalo">
<meta name="description" content="Hello and welcome to my very first responsive website">
<meta name="keywords" content="Web, Webpage, Portfolio, Responsive">
<link rel="stylesheet" type="text/css" href="style.css">
<link href="https://fonts.googleapis.com/css2?family=Fredoka+One&display=swap" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Responsive webpage | Home</title>
</head>
<body>
<header>
<nav>
<h1 class="hhh"> THIS IS MY WEBPAGE </h1>
<ul class="gm">
<li>Home</li>
<li>Photos</li>
<li>Games</li>
<li>News</li>
<li>Contact</li>
</ul>
</nav>
</header>
<main>
</main>
<footer>
</footer>
</body>
</html>
Thanks in advance for all the answers!
(P.S. Sorry if CSS is not 100% okay, I'm just starting out haha ...)
You can set display: block; on .gm li a and use transform:scale:
body {
margin: 0px;
padding: 0px;
background-attachment: fixed;
background-image: linear-gradient(-120deg, #f5eeed, #ccaeab);
}
header {
margin: 0px;
padding: 0px;
}
.hhh {
position: absolute;
font-family: 'Fredoka One', cursive;
font-size: 40px;
left: 8%;
top: 4%;
}
.hhh a {
text-decoration: none;
}
.hhh a:active {
color: black;
}
.hhh a:visited {
color: black;
}
.hhh a:hover {
color: black;
opacity: 0.8;
font-size: 110%;
}
.hhh a:link {
color: black;
}
.gm {
position: absolute;
display: flex;
left: 55%;
top: 7%;
font-family: 'Fredoka One', cursive;
font-size: 20px;
}
.gm li {
margin-left: 35px;
list-style-type: none;
}
.gm li a {
display: block;
text-decoration: none;
}
.gm li a:active {
color: black;
}
.gm li a:hover{
transform: scale(1.1);
}
<link href="https://fonts.googleapis.com/css2?family=Fredoka+One&display=swap" rel="stylesheet">
<header>
<nav>
<h1 class="hhh"> THIS IS MY WEBPAGE </h1>
<ul class="gm">
<li>Home</li>
<li>Photos</li>
<li>Games</li>
<li>News</li>
<li>Contact</li>
</ul>
</nav>
</header>
<main>
</main>
<footer>
</footer>
I'm trying to create a hover state for my a element in the navigation bar, the problem is the hover color want cover the whole height of the nav.
I tried solving this using padding on the a element, but it doesn't look like a correct way, because I keep changing values until I got the right one.
body,
html {
margin: 0;
padding: 0;
}
nav {
background: black;
}
.container {
padding: 0px;
margin: 0px;
list-style: none;
color: white;
font-weight: bold;
font-size: 1.8rem;
text-transform: capitalize;
display: flex;
}
.search {
flex: 1;
}
.search .search-input {
width: 100%;
font-size: 1.8rem;
text-transform: capitalize;
}
.container a {
text-decoration: none;
color: white;
padding: 0 10px 6px 10px; /*this what I use to fix it */
}
.container a:hover {
text-decoration: none;
color: white;
background: red;
}
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="./css/style.css">
<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>Document</title>
</head>
<body>
<nav>
<ul class="container">
<li>home</li>
<li>profile</li>
<li class="search">
<input type="text" class="search-input" placeholder="search">
</li>
<li>logout</li>
</ul>
</nav>
</body>
</html>
a tags by default are an inline element, give then the styles display: block; and height: 100% to take up the full space of their parents. Snippet:
body,
html {
margin: 0;
padding: 0;
}
nav {
background: black;
}
.container {
padding: 0px;
margin: 0px;
list-style: none;
color: white;
font-weight: bold;
font-size: 1.8rem;
text-transform: capitalize;
display: flex;
}
.search {
flex: 1;
}
.search .search-input {
width: 100%;
font-size: 1.8rem;
text-transform: capitalize;
}
.container a {
text-decoration: none;
color: white;
display: block;
height: 100%;
}
.container a:hover {
text-decoration: none;
color: white;
background: red;
}
<nav>
<ul class="container">
<li>home</li>
<li>profile</li>
<li class="search">
<input type="text" class="search-input" placeholder="search">
</li>
<li>logout</li>
</ul>
</nav>
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.