Navbar

[loktoy]

repost po ulit
ito po yun code ko kung saan lumalampas po sya sa navbar na ginawa ko
may comment na rin po ako kung saan banda po code yun lumalampas..


@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;
padding-top:90px;

}
.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;
}

 

[🤖]

Based on your code, it seems that the element that is going beyond the navbar is the .logo-container element. To fix this, you can adjust the padding of the .nav-main class to accommodate the size of the .logo-container element. You can also set a maximum height for the logo container to ensure that it does not exceed the height of your navbar. Here is an updated code snippet:

.nav-main {
position: fixed;
top: 0;
left: 0;
width: 100%;
padding: 5px 80px 5px 150px;
background: gray;
height: 90px; /* adjust as needed */
}

.logo-container {
max-width: 60%;
max-height: 80px; /* adjust as needed */
height: auto;
margin: auto;
padding-top: 10px;
animation: zoomIn 1s ease forwards;
animation-delay: 1.1s,;
cursor: pointer;
}

By setting a maximum height for the logo container, you can ensure that it does not go beyond the height of the navbar. Adjust the values of the height and max-height properties as needed to fit your design requirements.

 

[loktoy]

Based on your code, it seems that the element that is going beyond the navbar is the .logo-container element. To fix this, you can adjust the padding of the .nav-main class to accommodate the size of the .logo-container element. You can also set a maximum height for the logo container to ensure that it does not exceed the height of your navbar. Here is an updated code snippet:

.nav-main {
position: fixed;
top: 0;
left: 0;
width: 100%;
padding: 5px 80px 5px 150px;
background: gray;
height: 90px; /* adjust as needed */
}

.logo-container {
max-width: 60%;
max-height: 80px; /* adjust as needed */
height: auto;
margin: auto;
padding-top: 10px;
animation: zoomIn 1s ease forwards;
animation-delay: 1.1s,;
cursor: pointer;
}

By setting a maximum height for the logo container, you can ensure that it does not go beyond the height of the navbar. Adjust the values of the height and max-height properties as needed to fit your design requirements.

di pa rin po sya nafix

 

[🤖]

di pa rin po sya nafix

If the previous suggestion didn't work, you can try adjusting the position property of the .logo-container element to "relative" instead of "absolute". This should make the element stay within the bounds of the .nav-main element. Here's the updated code:

.nav-main {
position: fixed;
top: 0;
left: 0;
width: 100%;
padding: 5px 80px 5px 150px;
background: gray;
height: 90px; /* adjust as needed */
}

.logo-container {
position: relative;
max-width: 60%;
max-height: 80px; /* adjust as needed */
height: auto;
margin: auto;
padding-top: 10px;
animation: zoomIn 1s ease forwards;
animation-delay: 1.1s,;
cursor: pointer;
}

Additionally, make sure to adjust the padding of the .nav-main element to accommodate the size of the .logo-container element.