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>
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>
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>
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>
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.
I am creating a webpage in which when I hover over the .Soccer section, it will dropdown and show Link1, Link2, Link3.
Without the position: fixed;, the code works perfectly fine.
As I want the heading in top of the webpage, I put position: fixed;
But as soon as I put that on, the dropdown button for "Soccer" does not work.
html {
background-image: url("Images/BackgroundImageI.jpg");
background-repeat: no-repeat;
}
body {
background-color: White;
color: Black;
margin-left: 0%;
margin-right: 0%;
margin-top: 40%;
margin-bottom: 0%;
border: 10px outset Gray;
}
h1 {
font-family: Arial, Verdana, Geneva, sans-serrif;
color: teal;
text-align: center;
}
p {
font-family: Arial, Verdana, Geneva, sans-serrif, serrif;
font-size: 12px;
font-style: normal;
font-weight: normal;
line-height: 24px;
}
ul {
margin-left: 0%;
margin-right: 0%;
margin-top: 0%;
list-style-type: none;
margin: 0;
padding: 0;
top: 0;
width: 100%;
overflow: hidden;
background-color: #333;
position: fixed;
/* Removing this makes the dropdown work */
}
li {
float: left;
}
li a,
.dropbtn {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover,
.Soccer:hover .dropbtn {
background-color: teal;
}
li.Soccer {
display: inline-block;
}
.Soccer-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
.Soccer-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.Soccer-content a:hover {
background-color: teal
}
.Soccer:hover .Soccer-content {
display: block;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Test</title>
<link rel="stylesheet" href="testeditor.css" type="text/css">
</head>
<body>
<ul>
<li>Home</li>
<li>News</li>
<li class="Soccer">
Soccer
<div class="Soccer-content">
Link 1
Link 2
Link 3
</div>
</li>
</ul>
<h3>Soccer Menu inside a Navigation Bar</h3>
<p>Hover over the "Soccer" link to see the Soccer menu.</p>
</body>
</html>
Please ask me if you do not understand the concept of what I am trying to do. And if you do understand, please help me.
This is my first post so it might be a bit off compared to other posts.
You had a overflow: hidden on your ul element. Therefore the dropdown wasn't shown. Removing it makes the dropdown appear again.
html {
background-image: url("Images/BackgroundImageI.jpg");
background-repeat: no-repeat;
}
body {
background-color: White;
color: Black;
margin-left: 0%;
margin-right: 0%;
margin-top: 40%;
margin-bottom: 0%;
border: 10px outset Gray;
}
h1 {
font-family: Arial, Verdana, Geneva, sans-serrif;
color: teal;
text-align: center;
}
p {
font-family: Arial, Verdana, Geneva, sans-serrif, serrif;
font-size: 12px;
font-style: normal;
font-weight: normal;
line-height: 24px;
}
ul {
margin-left: 0%;
margin-right: 0%;
margin-top: 0%;
list-style-type: none;
margin: 0;
padding: 0;
top: 0;
width: 100%;
background-color: #333;
position: fixed;
}
li {
float: left;
}
li a,
.dropbtn {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover,
.Soccer:hover .dropbtn {
background-color: teal;
}
li.Soccer {
display: inline-block;
}
.Soccer-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
.Soccer-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.Soccer-content a:hover {
background-color: teal
}
.Soccer:hover .Soccer-content {
display: block;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Test</title>
<link rel="stylesheet" href="testeditor.css" type="text/css">
</head>
<body>
<ul>
<li>Home</li>
<li>News</li>
<li class="Soccer">
Soccer
<div class="Soccer-content">
Link 1
Link 2
Link 3
</div>
</li>
</ul>
<h3>Soccer Menu inside a Navigation Bar</h3>
<p>Hover over the "Soccer" link to see the Soccer menu.</p>
</body>
</html>
Just change the position of .Soccer-content to fixed, too
html{
background-image: url("Images/BackgroundImageI.jpg");
background-repeat: no-repeat;
}
body {
background-color: White;
color: Black;
margin-left: 0%;
margin-right: 0%;
margin-top: 40%;
margin-bottom: 0%;
border: 10px outset Gray;
}
h1 {
font-family: Arial, Verdana, Geneva, sans-serrif;
color: teal;
text-align: center;
}
p {
font-family: Arial, Verdana, Geneva, sans-serrif, serrif;
font-size: 12px;
font-style: normal;
font-weight: normal;
line-height: 24px;
}
ul {
margin-left: 0%;
margin-right: 0%;
margin-top: 0%;
list-style-type: none;
margin: 0;
padding: 0;
top: 0;
width: 100%;
overflow: hidden;
background-color: #333;
position: fixed;
}
li {
float: left;
}
li a, .dropbtn {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover, .Soccer:hover .dropbtn {
background-color: teal;
}
li.Soccer {
display: inline-block;
}
.Soccer-content {
display: none;
position: fixed;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.Soccer-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.Soccer-content a:hover {background-color: teal}
.Soccer:hover .Soccer-content {
display: block;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Test</title>
<link rel="stylesheet" href="testeditor.css" type="text/css">
</head>
<body>
<ul>
<li>Home</li>
<li>News</li>
<li class="Soccer">
Soccer
<div class="Soccer-content">
Link 1
Link 2
Link 3
</div>
</li>
</ul>
<h3>Soccer Menu inside a Navigation Bar</h3>
<p>Hover over the "Soccer" link to see the Soccer menu.</p>
</body>
</html>