Hello, my navbar links don’t take me to the top of my linked sections, but half way up, please could someone tell me what I’ve done wrong? many thanks
Hi @eden_essame80 !
Can we see your code?
1 Like
Welcome to the community @eden_essame80 !
As mentioned by Leader @stephenmutheu, we need to be able to view the complete code for the project in order to find the issue and offer proper guidance for you to resolve the problem.
You can add the complete code using three backticks ``` before and after each complete set of code.
Example with 4 backticks, which will not work, to show how to post the code.
``` `
html code
goes here
with three backticks below it.
``` `
css code
goes here
with three backticks below it.
I hope this helps you post your code.
1 Like
<label for="nav-toggle" class="nav-toggle-label"><i class="fa-solid fa-bars"></i></label>
<nav id="menu">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="#about">About Us</a></li>
<li><a href="#prices">Prices</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>```Sorry, there’s quite a lot of code, I’m not too sure where the problem will be, should I post it all? I’m afraid I’m very new and not sure what I’m doing
Ok, thank you very much
1 Like
<a href="index.html">
<h1 id="logo">Sidmouth Wake Park</h1>
</a>
<!-- Navigation menu -->
<!-- Toggle section to make the menu function -->
<input type="checkbox" id="nav-toggle" name="nav-toggle">
<label for="nav-toggle" class="nav-toggle-label"><i class="fa-solid fa-bars"></i></label>
<nav id="menu">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="#about">About Us</a></li>
<li><a href="#prices">Prices</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
</header>
<!-- Main Section -->
<main>
<section id="hero">
<div id="cover-text">
<h2>The Best Wakeboarding in Devon!</h2>
</div>
</section>
<!-- About Us-->
<section id="about">
<h2>About Us</h2>
<p>We pride ouselves on a warm and welcoming environment.</p>
<p>Everyone is welcome.</p>
<p>Great for beginners and experienced riders alike.</p>
<p>We offer wakeboarding and kneeboarding.</p>
<p>Lessons available, with experienced coaches.</p>
<p>Situated in the beautiful coastal town of Sidmouth.</p>
<p>Sidmouth Wake Park is great fun for everyone!</p>
</section>
<!-- Prices -->
<section id="prices">
<h2>Session Prices</h2>
<h4>U16's - £20.00</h4>
<h4>Adults - £25.00</h4>
<br>
<h4>Wetsuit rental - £5.00</h4>
<h4>Wakeboard rental - £5.00</h4>
<p><i>*Sessions are 30 minutes</i></p>
</section>
<!-- About section -->
<!-- Questions form -->
<section id="contact">
<form id="questions" method="post" action="https://formdump.codeinstitute.net">
<h2>Get in touch</h2>
<p>If you have any questions or queries, don't hesitate to get in touch.</p>
<label for="first-name">First Name</label>
<input type="text" name="first-name" class="text-input" required>
<br>
<label for="last-name">Last Name</label>
<input type="text" name="last-name" id="last-name" class="text-input" required>
<br>
<label for="email-address">Email Address</label>
<input type="email" name="email-address" id="email-address" class="text-input" required>
<br>
<textarea name="message" id="message" cols="30" rows="10" placeholder="How can we help?" class="text-area" required></textarea>
<button type="submit" class="submit-button">Send</button>
</form>
</section>
<!-- Opening times -->
<section id="info">
<div id="opening-times">
<h3>Open times</h3>
<table class="text-center">
<tr>
<th></th>
<th>Open</th>
<th>Close</th>
</tr>
<tr>
<th>Mon - Fri</th>
<th>09:00</th>
<th>18:00</th>
</tr>
<tr>
<th>Weekend</th>
<th>10:00</th>
<th>17:00</th>
</tr>
</table>
</div>
<!-- Location -->
<div id="location">
<h3>Location</h3>
<p>
Sidmouth Wake Park,
<br>Sidmouth Lake,
<br>Sidmouth,
<br>Devon,
<br>EX10 5RU
</p>
</div>
</section>
</main>
1 Like
* {padding: 0;
margin: 0;
box-sizing: border-box;
}
/* General styles */
body {
min-height: 100vh;
/* So elements show underneath each other, adds to all elements unless specified */
display: flex;
flex-direction: column;
/* Generic project styles*/
color: #000000;
font-family: 'Roboto', sans-serif;
}
h1, h2, h3 {
font-family: 'anton', sans-serif;
font-size: 1.4rem;
text-transform: uppercase;
letter-spacing: 2px;
text-align: center;
color: #000000;
}
p {text-align: center;}
/* Header */
header {
background-color: #EBB582;
/* Padding to give space from the edge of the screen */
padding: 1.6rem 1rem;
/* So the header remains visable when the screen is scrolled */
position: fixed;
/* High z-index so its layered on top of other elements */
z-index: 99;
/* Make the header fill the width of the screen */
width: 100%;
/* Make header and drop down menu appear in a row */
display: flex;
/* Add space between heading and toggle */
justify-content: space-between;
/* Make sure items show in a line vertically */
align-items: baseline;
}
/* Remove lines from header links and change colour */
header a {
text-decoration: none;
color: inherit;
}
/* Navigation section */
#menu ul{
font-size: 110%;
letter-spacing: 4px;
/* Remove bullet points */
list-style-type: none;
}
/* Navbar styles with drop down toggle */
nav {
/* Takes nav element out of the header */
position: absolute;
/* Add same colour as the header to make it appear like the same object when open */
background-color: #EBB582;
/* Resize the navbar the same as the header */
width: 100%;
left: 0;
padding: 0 1rem;
/* Hide navbar items until the user clicks to open them */
display: none;
/* Stop the navbar covering the header when checked, tells navigation element that the top of the element should start at the bottom of its parent */
top: 100%;
}
/* Nav toggle */
/* ~ to target the adjoining nav element */
#nav-toggle:checked~nav {
display: block;
}
/* Hides checkbox */
#nav-toggle {
display: none;
}
/* Make label larger so its easier to tap */
.nav-toggle-label {
font-size: 1.5rem;
}
/* Main section */
main {
background-color: #FCEDDA;
/* Make main element take up any surplus space */
flex: 1 0 auto;
/* Push content down so it starts below the header and isn't covered */
margin-top: 84.8px;
}
/* Hero section */
#hero {
height: 550px;
/* Fill the entire screen */
width:100%;
/* Image sourced from: https://www.pexels.com/photo/a-woman-wake-boarding-on-the-lake-9967368/ */
background: url(../images/Wakeboarder.jpg) no-repeat center center/cover;
}
#cover-text {
font-size: 200%;
/* Position it relative to the hero section */
position: absolute;
/* set position relative to the bottom */
bottom: 60%;
text-align: center;
}
/* About section */
#about {
display: flex;
flex-direction: column;
align-items: center;
width: 90%;
margin: 20px auto;
padding-top: 20px;
padding-bottom: 20px;
line-height: 1.8;
}
#about > h2 {
margin-bottom: 20px;
}
/* Price section */
#prices {
display: flex;
flex-direction: column;
align-items: center;
width: 90%;
margin: 20px auto;
padding-top: 20px;
padding-bottom: 20px;
line-height: 1.8;
}
#prices > h2 {
margin-bottom: 20px;
}
/* Contact section */
#questions {
padding: 30px;
}
#questions > h2, p {
margin-bottom: 20px;
}
.text-input{
width: 100%;
color: #EBB582;
height: 25px;
margin: 5px 0 20px 0;
border: 1px solid #EBB582;
border-radius: 2px;
}
.text-area {
width: 100%;
margin: 5px 0 20px 0;
border: 1px solid #EBB582;
border-radius: 2px;
}
.submit-button {
margin-top: 10px;
background-color: #EBB582;
border-radius: 2px;
padding: 15px 40px;
font-size: 120%;
}
#info {
display: flex;
flex-direction: column;
align-items: center;
}
#opening-times {
margin-bottom: 20px;
}
/* Footer */
footer {
background-color: #EBB582;
}
/* Style footer icons */
#social-networks {
/* Center icons */
text-align: center;
/* Add space above and bellow icons */
padding: 20px 0;
/* Space evenly along the footer */
display: flex;
justify-content: space-evenly;
/* Remove bullet points */
list-style-type: none;
}
#social-networks i {
font-size: 150%;
/* create space around icons */
padding: 5%;
color: #FCEDDA;
}
/* Media query for tablets and screens of 768px and up */
@media screen and (min-width:768px) {
#contact{
padding:0 20%;
}
#info{
display: flex;
flex-direction: row;
justify-content: space-around;
align-items: center;
}
.text-input:hover {
border-color: #EBB582;
}
.submit-button:hover {
background-color: #FCEDDA;
}
}
/* Media query for laptops and larger 992px and up */
@media screen and (min-width: 992px){
nav {
/* Make sure navbar is always displayed to see all the links */
display: block;
/* Put navbar back inside the header */
position: relative;
width: fit-content;
/* Stop menu items sticking to the edge of the screen */
padding-right: 1rem;
}
#menu ul {
/* Make list items show side by side */
display: flex;
}
#menu li {
/* Space between the list items so they don't stick together */
padding: 1rem;
}
/* Hide toggle */
.nav-toggle-label {
display: none;
}
/* make logo larger */
#logo {
font-size: 250%;
line-height: 75px;
margin: 0 0.5rem;
}
/* Underline links when moused over */
#menu a:hover {
border-bottom: 3px solid #fcedda
}
/* Main */
main {
/* Push margin down to accomodate larger header */
margin-top:126.4px;
}
}
1 Like
Thank you for your help, I’m sorry its quite a mess!
my problem is when I click the nav link to the sections it doesn’t go to the top of the section and the h1, but a couple lines down.
Thanks very much for looking, I think it was working until I got rid of a link and fiddled about with the layout
The fixed header is covering part of the section, so when the link is clicked, the section is not fully visible. To fix this, you can add some padding to the top of each section to account for the height of the fixed header.
Great! thank you so much that has got it going to the right place! Except I had to add quite a lot of padding and now there’s quite a lot of empty space, is there anything I can do about that?
1 Like
This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.