The navigation bar I have for the top of the site is not showng when I view the top of the site, it only shows when start to scroll down, and when I do scroll down images keeps hovering over it. How can I fix this? any help would be greatly appricated!
here is the link to the github: https://github.com/laurenseel/Lauren-Phoebe
here is my code:
CSS
body {
margin: 0;
padding: 0;
background-color: #6e568d;
/* overflow-x: hidden; */
scrollbar-gutter: stable;
font-family: 'agrandir';
}
@font-face {
font-family:'agrandir';
src: url(Agrandir.OTF) format("opentype");
font-weight: normal;
font-style: normal;
}
p {
font-family: 'agrandir';
}
.navbar {
overflow: hidden;
background-color: #a18eff;
text-align: center; /* text is centered*/
position: fixed;
top: 0; /* there is no space at the top*/
width: 100%; /* makes it maxed out to the sides */
font-weight: bold;
}
.navbar a {
display: inline-block;
color: #000000; /* text color in the bar */
padding: 20px 130px; /* determines the padding for the top and down, and the left and right. */
text-decoration: none; /* makes sure there is no underline on the text */
}
.navbar a:hover { /* when you hover over text the color changes */
background-color: #2b00ff;
color: rgb(255, 255, 255);
}
.brandname {
padding-top: -100px;
padding-left: 1px;
margin-top: -1100px;
margin-bottom: -300px;
text-align: center;
}
.logo {
text-align: center;
padding-bottom: 30px;
}
.underlogosocials {
display: flex;
margin-top: -50px;
text-align: center;
padding: 20px;
height: 50px;
width: 50px;
margin-left: 730px;
}
.color1block { /* block where the music is playing */
background-color: #6e568d;
padding-top: 15px;
padding-bottom: 150px;
padding-left: 50px;
padding-right: 50px;
overflow-x: auto; /* scrolling */
margin-top: 2px;
margin-bottom: -160px; /* fix that small space that hides in the side scroll */
display: flex;
}
.color1block p {
/* margin-top: 10px; */
font-size: 25px;
text-align: center;
color: black;
font-family: 'agrandir';
}
/*.audio-container { no need for an audio player class
width: 100%;
max-width: 600px;
margin: 0 auto;
} */
.popout img {
/* Set maximum width for images */
/* Maintain aspect ratio */
/* Add margin around each image */
transition: transform 0.3s ease, box-shadow 0.3s ease; /* Add smooth transition */
}
.popout img:hover {
transform: scale(1.1); /* Scale up the image */
box-shadow: 0 0 1px rgba(0, 0, 0, 0); /* Add a shadow */
}
.aboutcontainer{
background-image: url(images/background2.png);
background-size: cover;
background-position: center;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
overflow-x: hidden;
display: flex;
align-items: center;
margin-bottom: -16px;
margin-top: 160px;
align-items: center;
}
/* no longer needed, we do not use the bigger picture
.image-container {
overflow-x: auto; Enable horizontal scrolling
white-space: nowrap; Prevent line breaks
background: #2b00ff;
margin-right: 10px;
}
*/
/* no longer needed, we do not use the bigger picture
.image-container img {
display: inline-block; Display images horizontally
}
*/
.aboutimage {
width: 200px; /* Set maximum width for the image */
height: 800px; /* Maintain aspect ratio */
margin-right: 20px; /* Add margin to create space between image and text */
}
.abouttext {
flex-grow: 1; /* Allow text to grow to fill remaining space */
}
/* no longer needed
.merchcontainer{
width: 100%;
height: 880px;
}
*/
.aboutimages123 {
margin: 30px;
height: 500px;
width: 350px;
}
/* not wanted
.aboutcontainer p {
background-color: rgb(171, 164, 255);
display: inline-block;
}
*/
.contactcontainer{
background-color: #402e58;
background-size: cover;
background-position: center;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
overflow-x: hidden;
display: flex;
align-items: center;
}
.contactcontainer p {
margin-top: 10px;
font-size: 25px;
text-align: center;
color: rgb(255, 255, 255);
}
.social-media-container {
display: flex;
align-items: center;
justify-content: center;
margin-top: 20px;
}
.social-link {
display: inline-block;
margin-right: 20px;
text-decoration: none;
color: #402e58;
font-size: 18px;
}
.social-logo {
width: 400px;
height: 250px;
margin-right: -130px;
margin-bottom: 50px;
}
.tooltip-container {
position: relative;
cursor: pointer;
}
.tooltip-text {
visibility: hidden;
width: 550px;
background-color: #000000;
color: #fff;
text-align: center;
border-radius: 10px;
padding: 5px ;
position: absolute;
z-index: 1;
font-size: 14px;
transform: translateX(-50%);
opacity: 0;
transition: opacity 0.3s;
}
.tooltip-container:hover .tooltip-text {
visibility: visible;
opacity: 1;
}
HTML
<!DOCTYPE html>
<html lang="eng" dir="ltr">
<head>
<meta charset="utf-8">
<link rel="icon" type="image/x-icon" href="images/logo.png">
<title>Lauren Pheobe Music</title>
<link rel="stylesheet" type="text/css" href="styles.css" />
<style>
</style>
</head>
<body>
<p id="home"> </p>
<div class="navbar">
<a href="#home">HOME</a>
<a href="#listennow">CATALOG</a>
<a href="#about">ABOUT</a>
<a href="#contact">CONTACT</a>
</div>
<img src="images/Video Background (1).gif" style="width: 100%;">
<div class="brandname"><img src="images/brandname.png" alt="Lauren Pheobe name"></div>
<div class="logo"><img src="images/logo.png" alt="Lauren Pheobe logo" height="450px" width="450px"></div>
<div class="underlogosocials">
<a href="https://www.facebook.com" target="_blank"><img src="images/facebook2.png" style="height: 50px;" width="80px"></a></a>
<a href="https://twitter.com/laurenphebs" target="_blank"><img src="images/twitter2.png" style="height: 50px;" width="80px"></a>
<a href="https://www.instagram.com/laurenphoebemusic/" target="_blank"><img src="images/instagram2.png" style="height: 50px;" width="80px"></a>
<a href="https://www.tiktok.com/@laurenphoebemusic?lang=en" target="_blank" ><img src="images/tiktok2.png" style="height: 50px;" width="80px"></a>
</div>
<p id="listennow"> </p>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<p style="text-align:center; font-size: 40px"><b>???? Click Image to Stream Full Song! ????</b></p>
<div class="color1block popout">
<div>
<a href="https://distrokid.com/hyperfollow/laurenphoebe/are-you-ready-feat-the-fragile-corpse" target="_blank" ><img style="padding: 1px 50px 1px 50px;"src="images/Are You Ready.png" alt="Are You Ready" height="300px" width="300px" ></a>
<p>Are You Ready
<span class="tooltip-container">
????
<span class="tooltip-text">
Title: Are You Ready <br>
Artist: Lauren Phoebe (Feat. The Fragile Corpse)<br>
Genre: Alt Rock<br>
Mood: Sad / Contemplative<br>
Composer/Lyricist/Producer: Lauren M Seel - Matthew W Manninen<br>
ISRC: QZHNC2431553<br>
BMI: Artist 1 (50%) Artist 2 (50%) <br>
BPM: 78<br>
Year: 2024<br>
</span>
</span>
</p>
</span></span></p>
<audio controls style="margin: 0 auto; display: block;">
<source src="MP3/Are You Ready.wav" type="audio/ogg" >
</audio>
</div>
<div>
<a href="https://distrokid.com/hyperfollow/laurenphoebe/by-morning" target="_blank"><img style="padding: 1px 50px 1px 50px;"src="images/By_Morning.png" alt="By Morning" height="300px" width="300px" ></a>
<p>By Morning
<span class="tooltip-container">
????
<span class="tooltip-text">
Title: By Morning<br>
Artist: Lauren Phoebe (Feat. The Fragile Corpse)<br>
Genre: Alt Rock<br>
Mood: Somber / Contemplative<br>
Composer/Lyricist/Producer: Lauren M Seel - Matthew W Manninen<br>
ISRC: QZK6P2305069<br>
BMI: Artist 1 (50%) Artist 2 (50%) <br>
BPM: 130<br>
Year: 2023<br>
</span>
</span>
</p>
<audio controls style="margin: 0 auto; display: block;">
<source src="MP3/By Morning.mp3" type="audio/ogg">
</audio>
</div>
<div>
<a href="https://distrokid.com/hyperfollow/laurenphoebe/shaken-feat-the-fragile-corpse" target="_blank"><img style="padding: 1px 50px 1px 50px;"src="images/Shaken.png" alt="Shaken" height="300px" width="300px" ></a>
<p>Shaken
<span class="tooltip-container">
????
<span class="tooltip-text">
Title: Shaken<br>
Artist: Lauren Phoebe (Feat. The Fragile Corpse)<br>
Genre: Alt Rock / Pop<br>
Mood: Encouragement / Empowerment<br>
Composer/Lyricist/Producer: Lauren M Seel - Matthew W Manninen<br>
ISRC: QZHN32457827<br>
BMI: Artist 1 (50%) Artist 2 (50%) <br>
BPM: 162<br>
Year: 2024<br>
</span>
</span>
</p>
<audio controls style="margin: 0 auto; display: block;">
<source src="MP3/Shaken.mp3" type="audio/ogg">
</audio>
</div>
<div>
<a href="https://distrokid.com/hyperfollow/laurenphoebe/deep-deep-down" target="_blank" ><img style="padding: 1px 50px 1px 50px;"src="images/Deep_down.png" alt="Deep down" height="300px" width="300px" ></a>
<p>Deep down
<span class="tooltip-container">
????
<span class="tooltip-text">
Title: Deep Deep Down<br>
Artist: Lauren Phoebe (Feat. The Fragile Corpse)<br>
Genre: Alt Rock / Pop<br>
Mood: Focused / Angst<br>
Composer/Lyricist/Producer: Lauren M Seel - Matthew W Manninen<br>
ISRC: QZES72493058<br>
BMI: Artist 1 (50%) Artist 2 (50%) <br>
BPM: 175<br>
Year: 2024<br>
</span>
</span>
</p>
<audio controls style="margin: 0 auto; display: block; ">
<source src="MP3/Deep Deep Down.mp3" type="audio/ogg">
</audio>
</div>
<div>
<a href="https://distrokid.com/hyperfollow/laurenphoebe/shaken-feat-the-fragile-corpse" target="_blank"><img style="padding: 1px 50px 1px 50px;"src="images/Tell Me Your Secrets.png" alt="Tell Me Your Secrets" height="300px" width="300px" ></a>
<p>Tell Me Your Secrets
<span class="tooltip-container">
????
<span class="tooltip-text">
Title: Tell Me Your Secrets<br>
Artist: Lauren Phoebe (Feat. The Fragile Corpse)<br>
Genre: Alt Rock / Pop / Indie<br>
Moody: Happy / Empowerment<br>
Composer/Lyricist/Producer: Lauren M Seel - Matthew W Manninen<br>
ISRC: QZK6P2471424<br>
BMI: Artist 1 (50%) Artist 2 (50%) <br>
BPM: 125<br>
Year: 2024<br>
</span>
</span>
</p>
<audio controls style="margin: 0 auto; display: block; ">
<source src="MP3/Tell Me All Your Secrets.mp3" type="audio/ogg">
</audio>
</div>
</div>
</div>
<p id="about"> </p>
<div class="aboutcontainer">
<div class="abouttext">
<br>
<br>
<br>
<img class="aboutimage" style="float: left;" height="1px" src="images/vine.png" >
<img class="aboutimages123 " src="images/about img 1.jpg" style="float: right;" >
<p style="font-size:250%;"> <b>Lauren Phoebe is a Midwest Pop & Alt rock artist. </b> </p>
<p style="font-size:250%;"> <b>She ignites hearts with her emotionally charged</b> </p>
<p style="font-size:250%;"> <b> music. Residing in her hometown, she grinds </b> </p>
<p style="font-size:250%;"> <b> towards her growing music career. Laurens music
<p style="font-size:250%;"><b>crafts lyrics exploring the changes of life. </b></p>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<img class="aboutimage" style="float: right;" src="images/vine.png" >
<img class="aboutimages123 " src="images/about img 2.jpg" style="float: left;">
<p style="font-size:250%;"><b>Influenced by 90s-2000s alternative rock and 80s </b></p>
<p style="font-size:250%;"><b>pop, Lauren's sound fuses alternative pop/rock </b></p>
<p style="font-size:250%;"><b> indie pop. Guitar in hand since age 11 and a lifelong </b></p>
<p style="font-size:250%;"><b>passion for singing, her artistic expression was </b></p>
<p style="font-size:250%;"><b>fostered by her musically inclined family.</b> </style></p>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<img class="aboutimage" style="float: left;" height="1px" src="images/vine.png">
<img class="aboutimages123 " src="images/about img 3.jpg" style="float: right;">
<p style="font-size:250%;"><b>Witnessing the passion in other artists' eyes at </b></p>
<p style="font-size:250%;"><b>concerts fueled her own musical desires. </b></p>
<p style="font-size:250%;"><b>Welcome to Lauren Phoebe's world, where </b></p>
<p style="font-size:250%;"><b>heartfelt melodies and lyrics merge to create </b></p>
<p style="font-size:250%;"><b>unforgettable journey of self-discovery. Follow </b></p>
<p style="font-size:250%;"><b> her on an all major streaming platforms and </b></p>
<p style="font-size:250%;"><b>experience the electrifying energy of music.</b></p>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
</div>
</div>
<p id="contact"> </p>
<div class="contactcontainer">
<div>
<img style="margin-left: 156px; margin-top: 100px;" src="images/Lauren.png" >
<p style="margin-left: 80px;">Lauren Seel</p>
<p style="margin-left: 80px;">[email protected]</p>
</div>
<div class="social-media-container">
<a href="https://www.facebook.com" class="social-link" target="_blank">
<img src="images/facebook-logo.png" alt="Facebook" class="social-logo">
</a>
<a href="https://twitter.com/laurenphebs" class="social-link" target="_blank">
<img src="images/twitter-logo.png" alt="Twitter" class="social-logo">
</a>
<a href="https://www.instagram.com/laurenphoebemusic/" class="social-link" target="_blank">
<img src="images/insta-logo.png" alt="Instagram" class="social-logo">
</a>
<a href="https://www.tiktok.com/@laurenphoebemusic?lang=en" class="social-link" target="_blank">
<img src="images/tiktok-logo.png" alt="LinkedIn" class="social-logo">
</a>
</div>
</div>
<!-- <p id="merch"> </p>
<p id="shows"> </p>
<div class="merchcontainer">
<p> coming soon </p>
</div> -->
</body>
</html>
New contributor
James is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
0