Navbar

loktoy · May 3, 2023

pano kaya to mafix kasi kapag iniscroll ko yun body lumalampas sa navbar yun body nya..
ito po code
@import url('You do not have permission to view the full content of this post. Log in or register now.
* {
padding: 0%;
margin: 0%;
box-sizing: border-box;
}
body {
font-family: 'Poppins', sans-serif;
height: 100vh;

}
.nav-main {
position: fixed;
top: 0;
left: 0;
width: 100%;
padding: 5px 80px 5px 150px;
background: gray;

}
img {
height: 50px;
}
.nav-main,
.nav-main .main-list {
display: flex;
align-items: center;
}
.nav-main{
justify-content: space-between;
}
.nav-main .logo {
font-size: 30px;
font-weight: 700;
}
.nav-main .main-list {
list-style: none;
column-gap: 20px;
}
a {
text-decoration: none;
color:black;
}
a:hover {
color: red;
}
/* Custom CSS Start Chart*/
header {
background: rgb(62, 62, 212);
margin-top: 20px;
box-shadow: 0 8px 30px rgba(255, 255, 255, 0.50);
}
header h1 {
color: white;
text-align: center;
font-size: 2rem;
}
.logo-container {
max-width: 60%;
height: 95%;
margin: auto;
padding-top: 20px;
animation: zoomIn 1s ease forwards;
animation-delay: 1.1s,;
cursor: pointer;

}
.logo-container .Square-background{
position: relative;
height: 100%;
width: 100%;
display: flex;
justify-content: center;
align-items: center;

}
.logo-container .Square-background::after {
content: '';
position: absolute;
height: 95%;
width: 97%;
background: white;
}
.logo-container .Square-background span{
position: absolute;
width: 100%;
height: 100%;
background: linear-gradient(rgb(108, 241, 108),rgb(255, 5, 5), rgb(3, 3, 196));
}
.logo-container .Square-background .image{
position: relative;
height: 99%;
width: 99%;
z-index: 1;
overflow: hidden;
}
.logo-container .Square-background .image img{
position: absolute;
width: 100%;
height: 100%;
object-fit:fill;
}
.profile-logo {
display: flex;
align-items: center;
padding: 5% 20% ;
justify-content: space-between;
}
.profile-logo .logo{
max-width: 50%;

}
.profile-logo .logo h1 {
font-size: 35px;
font-weight: 600;
opacity: 0;
animation: slideLeft 1s ease forwards, floatImage 2s ease-in-out infinite ;
animation-delay: .7s, 2.1s;
}
.profile-logo .logo h3{
font-size: 25px;
text-align: center;
color: rgb(0, 211, 211);
opacity: 0;
animation: slideLeft 2s ease forwards;
animation-delay: .7s;
}
.profile-logo .logo p{
font-size: 15px;
text-align:justify ;
opacity: 0;
animation: slideLeft 1s ease forwards;
animation-delay: .7s;
}
#more ,#more1 ,#more2, #more3, #more4, #more5, #more6, #more7, #more8, #more9, #more10, #more11 {
display: none;
}
.profile-logo .logo p button {
font-size: 16px;
font-weight: 550;
color: rgb(51, 51, 51);
background: none;
border: none;
}
.img-container {
width: 250px;
height: 250px;
opacity: 0;
animation: zoomIn 1s ease forwards, floatImage 2s ease-in-out infinite;
animation-delay: 1.1s, 2.1s ;

}
.img-container .circle-background{
position: relative;
width: 100%;
height: 100%;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;

}
.img-container .circle-background::after {
content: '';
position: absolute;
width: 92%;
height: 92%;
background: white;
border-radius: 50%;
}
.img-container .circle-background span {
position: absolute;
width: 100%;
height: 100%;
background:linear-gradient(rgb(0, 226, 30),rgb(5, 1, 192));
border-radius: 50%;
}
.img-container .circle-background span:nth-child(1){
filter: blur(8px);
}
.img-container .circle-background .image {
position: relative;
width: 90%;
height: 90%;
z-index: 1;
overflow: hidden;
}
.img-container .circle-background .image img {
position: absolute;
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 50%;
}

@keyframes slideLeft {
0% {
opacity: 0;
transform: translateX(-100px);
}
100%{
opacity: 1;
transform: translateX(0);
}
}
@keyframes floatImage {
0% {
transform: translateY(0);
}
50% {
transform: translateY(-15px);
}
100% {
transform: translateY(0);
}
}
@keyframes zoomIn {
0%{
opacity: 0;
transform: scale(0);
}
100% {
opacity: 1;
transform: scale(1);
}
}
.Header-text {
background: gray;
max-width: 60%;
margin: auto;
margin-top: 20px;

}
.Header-text h1 {
text-align: center;
color: rebeccapurple;
}

🤖 · May 3, 2023

To fix the issue where the body content goes beyond the navbar when scrolling, you can apply a padding-top to the body element that is equal to the height of the navbar. In your case, the navbar has a height of 5px + 80px + 5px = 90px, so you can add the following CSS:

Code:

body {
  padding-top: 90px;
}

This will push the body content down by 90px so that it does not overlap with the navbar when scrolling.

Additionally, you might want to consider changing the background color of the body to match the background color of the navbar, so that there is no visible gap between them when scrolling. You can do this by adding the following CSS:

Code:

body {
  background-color: gray;
}

This will set the background color of the body to the same gray color as the navbar.

Here's the updated CSS with the changes:

Code:

@import url('https://fonts.googleapis.com/css2?family=Arimo&family=Montserrat:wght@500&family=Poppins&display=swap');

* {
  padding: 0%;
  margin: 0%;
  box-sizing: border-box;
}

body {
  font-family: 'Poppins', sans-serif;
  height: 100vh;
  padding-top: 90px; /* Add this */
  background-color: gray; /* Add this */
}

.nav-main {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  padding: 5px 80px 5px 150px;
  background: gray;

}

img {
  height: 50px;
}

.nav-main,
.nav-main .main-list {
  display: flex;
  align-items: center;
}

.nav-main {
  justify-content: space-between;
}

.nav-main .logo {
  font-size: 30px;
  font-weight: 700;
}

.nav-main .main-list {
  list-style: none;
  column-gap: 20px;
}

a {
  text-decoration: none;
  color: black;
}

a:hover {
  color: red;
}

/* Custom CSS Start Chart*/

header {
  background: rgb(62, 62, 212);
  margin-top: 20px;
  box-shadow: 0 8px 30px rgba(255, 255, 255, 0.50);
}

header h1 {
  color: white;
  text-align: center;
  font-size: 2rem;
}

.logo-container {
  max-width: 60%;
  height: 95%;
  margin: auto;
  padding-top: 20px;
  animation: zoomIn 1s ease forwards;
  animation-delay: 1.1s,;
  cursor: pointer;
}

.logo-container .Square-background {
  position: relative;
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.logo-container .Square-background::after {
  content: '';
  position: absolute;
  height: 95%;
  width: 97%;
  background: white;
}

.logo-container .Square-background span {
  position: absolute;
  width: 100%;
  height: 100%;
  background: linear-gradient(rgb(108, 241, 108), rgb(255, 5, 5), rgb(3, 3, 196));
}

.logo-container .Square-background .image {
  position: relative;
  height: 99%;
  width: 99%;
  z-index: 1;
  overflow: hidden;
}

.logo-container .Square-background .image img {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: fill;
}

.profile-logo {
  display: flex;
  align-items: center;
  padding: 5% 20%;
  justify-content: space-between;
}

.profile-logo .logo {
  max-width: 50%;

}

.profile-logo .logo h1 {
  font-size: 35px;
  font-weight: 600;
  opacity: 0;
  animation: slideLeft 1s ease forwards, floatImage 2s ease-in-out infinite;
  animation-delay: .7s, 2.1s;
}

.profile-logo .logo h3 {
  font-size: 25px;
  text-align: center;
  color: rgb(0, 211, 211);
  opacity: 0;
  animation: slideLeft 2s ease forwards;
  animation-delay: .7s;
}

.profile-logo .logo p {
  font-size: 15px;
  text-align: justify;
  opacity: 0;
  animation: slideLeft 1s ease forwards;
  animation-delay: .7s;
}

#more,
#more1,
#more2,
#more3,
#more4,
#more5,
#more6,
#more7,
#more8,
#more9,
#more10,
#more11 {
  display: none;
}

.profile-logo .logo p button {
  font-size: 16px;
  font-weight: 550;
  color: rgb(51, 51, 51);
  background: none;
  border: none;
}

.img-container {
  width: 250px;
  height: 250px;
  opacity: 0;
  animation: zoomIn 1s ease forwards, floatImage 2s ease-in-out infinite;
  animation-delay: 1.1s, 2.1s;


}

.img-container .circle-background {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;

}

.img-container .circle-background::after {
  content: '';
  position: absolute;
  width: 92%;
  height: 92%;
  background: white;
  border-radius: 50%;
}

.img-container .circle-background span {
  position: absolute;
  width: 100%;
  height: 100%;
  background: linear-gradient(rgb(0, 226, 30), rgb(5, 1, 192));
  border-radius: 50%;
}

.img-container .circle-background span:nth-child(1) {
  filter: blur(8px);
}

.img-container .circle-background .image {
  position: relative;
  width: 90%;
  height: 90%;
  z-index: 1;
  overflow: hidden;
}

.img-container .circle-background .image img {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

@keyframes slideLeft {
  0% {
    opacity: 0;
    transform: translateX(-100px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes floatImage {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-15px);
  }
  100% {
    transform: translateY(0);
  }
}

@keyframes zoomIn {
  0% {
    opacity: 0;
    transform: scale(0);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

.Header-text {
  background: gray;
  max-width: 60%;
  margin: auto;
  margin-top: 20px;


}

.Header-text h1 {
  text-align: center;
  color: rebeccapurple;
}

loktoy · May 3, 2023

🤖 said:

To fix the issue where the body content goes beyond the navbar when scrolling, you can apply a padding-top to the body element that is equal to the height of the navbar. In your case, the navbar has a height of 5px + 80px + 5px = 90px, so you can add the following CSS:

Code:

body {
  padding-top: 90px;
}

This will push the body content down by 90px so that it does not overlap with the navbar when scrolling.

Additionally, you might want to consider changing the background color of the body to match the background color of the navbar, so that there is no visible gap between them when scrolling. You can do this by adding the following CSS:

Code:

body {
  background-color: gray;
}

This will set the background color of the body to the same gray color as the navbar.

Here's the updated CSS with the changes:

Code:

@import url('https://fonts.googleapis.com/css2?family=Arimo&family=Montserrat:wght@500&family=Poppins&display=swap');

* {
  padding: 0%;
  margin: 0%;
  box-sizing: border-box;
}

body {
  font-family: 'Poppins', sans-serif;
  height: 100vh;
  padding-top: 90px; /* Add this */
  background-color: gray; /* Add this */
}

.nav-main {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  padding: 5px 80px 5px 150px;
  background: gray;

}

img {
  height: 50px;
}

.nav-main,
.nav-main .main-list {
  display: flex;
  align-items: center;
}

.nav-main {
  justify-content: space-between;
}

.nav-main .logo {
  font-size: 30px;
  font-weight: 700;
}

.nav-main .main-list {
  list-style: none;
  column-gap: 20px;
}

a {
  text-decoration: none;
  color: black;
}

a:hover {
  color: red;
}

/* Custom CSS Start Chart*/

header {
  background: rgb(62, 62, 212);
  margin-top: 20px;
  box-shadow: 0 8px 30px rgba(255, 255, 255, 0.50);
}

header h1 {
  color: white;
  text-align: center;
  font-size: 2rem;
}

.logo-container {
  max-width: 60%;
  height: 95%;
  margin: auto;
  padding-top: 20px;
  animation: zoomIn 1s ease forwards;
  animation-delay: 1.1s,;
  cursor: pointer;
}

.logo-container .Square-background {
  position: relative;
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.logo-container .Square-background::after {
  content: '';
  position: absolute;
  height: 95%;
  width: 97%;
  background: white;
}

.logo-container .Square-background span {
  position: absolute;
  width: 100%;
  height: 100%;
  background: linear-gradient(rgb(108, 241, 108), rgb(255, 5, 5), rgb(3, 3, 196));
}

.logo-container .Square-background .image {
  position: relative;
  height: 99%;
  width: 99%;
  z-index: 1;
  overflow: hidden;
}

.logo-container .Square-background .image img {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: fill;
}

.profile-logo {
  display: flex;
  align-items: center;
  padding: 5% 20%;
  justify-content: space-between;
}

.profile-logo .logo {
  max-width: 50%;

}

.profile-logo .logo h1 {
  font-size: 35px;
  font-weight: 600;
  opacity: 0;
  animation: slideLeft 1s ease forwards, floatImage 2s ease-in-out infinite;
  animation-delay: .7s, 2.1s;
}

.profile-logo .logo h3 {
  font-size: 25px;
  text-align: center;
  color: rgb(0, 211, 211);
  opacity: 0;
  animation: slideLeft 2s ease forwards;
  animation-delay: .7s;
}

.profile-logo .logo p {
  font-size: 15px;
  text-align: justify;
  opacity: 0;
  animation: slideLeft 1s ease forwards;
  animation-delay: .7s;
}

#more,
#more1,
#more2,
#more3,
#more4,
#more5,
#more6,
#more7,
#more8,
#more9,
#more10,
#more11 {
  display: none;
}

.profile-logo .logo p button {
  font-size: 16px;
  font-weight: 550;
  color: rgb(51, 51, 51);
  background: none;
  border: none;
}

.img-container {
  width: 250px;
  height: 250px;
  opacity: 0;
  animation: zoomIn 1s ease forwards, floatImage 2s ease-in-out infinite;
  animation-delay: 1.1s, 2.1s;


}

.img-container .circle-background {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;

}

.img-container .circle-background::after {
  content: '';
  position: absolute;
  width: 92%;
  height: 92%;
  background: white;
  border-radius: 50%;
}

.img-container .circle-background span {
  position: absolute;
  width: 100%;
  height: 100%;
  background: linear-gradient(rgb(0, 226, 30), rgb(5, 1, 192));
  border-radius: 50%;
}

.img-container .circle-background span:nth-child(1) {
  filter: blur(8px);
}

.img-container .circle-background .image {
  position: relative;
  width: 90%;
  height: 90%;
  z-index: 1;
  overflow: hidden;
}

.img-container .circle-background .image img {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

@keyframes slideLeft {
  0% {
    opacity: 0;
    transform: translateX(-100px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes floatImage {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-15px);
  }
  100% {
    transform: translateY(0);
  }
}

@keyframes zoomIn {
  0% {
    opacity: 0;
    transform: scale(0);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

.Header-text {
  background: gray;
  max-width: 60%;
  margin: auto;
  margin-top: 20px;


}

.Header-text h1 {
  text-align: center;
  color: rebeccapurple;
}

di pa rin po sya mafix
pagdating po dito sa ko na to lumalampas na sya

@import url('You do not have permission to view the full content of this post. Log in or register now.

* {
padding: 0%;
margin: 0%;
box-sizing: border-box;
}

body {
font-family: 'Poppins', sans-serif;
height: 100vh;

}
.nav-main {
position: fixed;
top: 0;
left: 0;
width: 100%;
padding: 5px 80px 5px 150px;
background: gray;

}
img {
height: 50px;
}
.nav-main,
.nav-main .main-list {
display: flex;
align-items: center;
}
.nav-main{
justify-content: space-between;
}
.nav-main .logo {
font-size: 30px;
font-weight: 700;
}
.nav-main .main-list {
list-style: none;
column-gap: 20px;
}

a {
text-decoration: none;
color:black;
}
a:hover {
color: red;
}

/* Custom CSS Start Chart*/

header {
background: rgb(62, 62, 212);
margin-top: 20px;
box-shadow: 0 8px 30px rgba(255, 255, 255, 0.50);
}

header h1 {
color: white;
text-align: center;
font-size: 2rem;
}
.logo-container { /* dito po banda lumalagpas na po sya*/
max-width: 60%;
height: 95%;
margin: auto;
padding-top: 90px;
animation: zoomIn 1s ease forwards;
animation-delay: 1.1s,;
cursor: pointer;

}
.logo-container .Square-background{
position: relative;
height: 100%;
width: 100%;
display: flex;
justify-content: center;
align-items: center;

}
.logo-container .Square-background::after {
content: '';
position: absolute;
height: 95%;
width: 97%;
background: white;
}
.logo-container .Square-background span{
position: absolute;
width: 100%;
height: 100%;
background: linear-gradient(rgb(108, 241, 108),rgb(255, 5, 5), rgb(3, 3, 196));
}
.logo-container .Square-background .image{
position: relative;
height: 99%;
width: 99%;
z-index: 1;
overflow: hidden;
}
.logo-container .Square-background .image img{
position: absolute;
width: 100%;
height: 100%;
object-fit:fill;
}

.profile-logo {
display: flex;
align-items: center;
padding: 5% 20% ;
justify-content: space-between;
}

.profile-logo .logo{
max-width: 50%;

}

.profile-logo .logo h1 {
font-size: 35px;
font-weight: 600;
opacity: 0;
animation: slideLeft 1s ease forwards, floatImage 2s ease-in-out infinite ;
animation-delay: .7s, 2.1s;
}

.profile-logo .logo h3{
font-size: 25px;
text-align: center;
color: rgb(0, 211, 211);
opacity: 0;
animation: slideLeft 2s ease forwards;
animation-delay: .7s;
}
.profile-logo .logo p{
font-size: 15px;
text-align:justify ;
opacity: 0;
animation: slideLeft 1s ease forwards;
animation-delay: .7s;
}

#more ,#more1 ,#more2, #more3, #more4, #more5, #more6, #more7, #more8, #more9, #more10, #more11 {
display: none;
}

.profile-logo .logo p button {
font-size: 16px;
font-weight: 550;
color: rgb(51, 51, 51);
background: none;
border: none;

}
.img-container {
width: 250px;
height: 250px;
opacity: 0;
animation: zoomIn 1s ease forwards, floatImage 2s ease-in-out infinite;
animation-delay: 1.1s, 2.1s ;

}
.img-container .circle-background{
position: relative;
width: 100%;
height: 100%;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;

}
.img-container .circle-background::after {
content: '';
position: absolute;
width: 92%;
height: 92%;
background: white;
border-radius: 50%;
}
.img-container .circle-background span {
position: absolute;
width: 100%;
height: 100%;
background:linear-gradient(rgb(0, 226, 30),rgb(5, 1, 192));
border-radius: 50%;
}
.img-container .circle-background span:nth-child(1){
filter: blur(8px);
}
.img-container .circle-background .image {
position: relative;
width: 90%;
height: 90%;
z-index: 1;
overflow: hidden;
}
.img-container .circle-background .image img {
position: absolute;
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 50%;
}

@keyframes slideLeft {
0% {
opacity: 0;
transform: translateX(-100px);
}
100%{
opacity: 1;
transform: translateX(0);
}
}
@keyframes floatImage {
0% {
transform: translateY(0);
}
50% {
transform: translateY(-15px);
}
100% {
transform: translateY(0);
}
}
@keyframes zoomIn {
0%{
opacity: 0;
transform: scale(0);
}
100% {
opacity: 1;
transform: scale(1);
}
}

.Header-text {
background: gray;
max-width: 60%;
margin: auto;
margin-top: 20px;

}
.Header-text h1 {
text-align: center;
color: rebeccapurple;
}

sUFF3R · May 3, 2023

Masyado mataas request mo lods. Kaya di na maprocess bi bot hehe

loktoy · May 3, 2023

sUFF3R said:
Masyado mataas request mo lods. Kaya di na maprocess bi bot hehe

baka matulongan mo po ko sir

fblaze · May 4, 2023

gamit ka ng codepen tapos share mo link dito para mas madaling makita

loktoy · May 4, 2023

fblaze said:
gamit ka ng codepen tapos share mo link dito para mas madaling makita

Cge cge ganun pala kala ko po copy paste lang haha

fblaze said:
gamit ka ng codepen tapos share mo link dito para mas madaling makita

sir ito po pacensyahan nyo nagulo pero makikita nyo po dyan na umiibabaw yun content ko

fblaze · May 4, 2023

naka position fixed ang nav-main mo

kung gusto mo nasa ibabaw yung nav-main lagyan mo ng z-index, tapos add ka ng margin-top sa header > h1 para hindi nakaoverlap yung nav-main sa content.

tapos lagyan mo ng top: 0; yung nav-main para walang gap sa itaas

loktoy · May 4, 2023

fblaze said:
naka position fixed ang nav-main mo

kung gusto mo nasa ibabaw yung nav-main lagyan mo ng z-index, tapos add ka ng margin-top sa header > h1 para hindi nakaoverlap yung nav-main sa content.

tapos lagyan mo ng top: 0; yung nav-main para walang gap sa itaas

ok na sir maraming salamat po sir

fblaze said:
naka position fixed ang nav-main mo

kung gusto mo nasa ibabaw yung nav-main lagyan mo ng z-index, tapos add ka ng margin-top sa header > h1 para hindi nakaoverlap yung nav-main sa content.

tapos lagyan mo ng top: 0; yung nav-main para walang gap sa itaas

nag puyat ako sir kagabi di ko mahanap hhaha z-index pala po... para umibabaw.. pacansya na sir sa YøùTùbé lang po kasi ako nag aaral tapos kulang kulang pa sa YøùTùbé

fblaze · May 4, 2023

theodinproject o kaya freecodecamp kung gusto mo ng free course

loktoy · May 4, 2023

fblaze said:
theodinproject o kaya freecodecamp kung gusto mo ng free course

ay freecodecamp lang po sir isesearch ko po saka theodinproject try ko po sir isearch po.. maraming salamat po sir sa payo nyo po

DeeZee · May 4, 2023

freecodecamp saka odinproject ok tong mga site na to para matuto ng web dev

loktoy · May 4, 2023

fblaze said:
theodinproject o kaya freecodecamp kung gusto mo ng free course

sir tanong ko lang po... maliban sa web development meron po bang software na ginagamitan ng database o Mysql na online po sya parang.. halimbawa yun kabila kwarto ay mag iinput ng inventory tapos yun kabila building ay mag uppdate o mag eedit,,para isahan lang sila kung san nag simula itutuloy na lang ng ibang building depende sa process nila ni recieved na ganito

Navbar

Eternal Poster

PHC Robot

Eternal Poster

Forum Guru

Eternal Poster

Eternal Poster

Eternal Poster

Eternal Poster

Eternal Poster

Eternal Poster

Eternal Poster

Honorary Poster

Eternal Poster

Similar threads

Popular Tags

About this Thread

Online statistics