Having trouble selecting links in the navigation bar

Just getting started with HTML/CSS and designing a website with buttons. Got some buttons up and running perfectly fine. But now, I'm working on a navigation bar with anchors inside. The problem is that while I can see the anchors when I open the website, I just can't click on them. Strangely, all my other buttons are working without any issues. Could it possibly be related to the nav id?

        .menubalk{
    padding:25px;
    
    }
    .menubalk ul{
    list-style:none;
    display:inline;
    margin-left:0;
    padding:375px;
    }
    .menubalk li{
    display:inline;
    }
    
    .menubalk a{
    color:black;
    background-color:#0072BB;
    text-transform:uppercase;
    font-size: 12px;
    font-weight:bold;
    padding: 20px;
    border-radius:5px;
    }
    .content{
    background-color:#0072BB;
    border-radius:25px 25px 25px 25px;
    margin-left:175px;
    padding:25px;
    
    }
    p,h2,img{
    margin:0;
    }
    
    nav{
    background-color:#0072BB;
    float:left;
    width:150px;
    border:10px solid white;
    border-radius:25px 25px 25px 25px;
    }
    #wrapper{
    margin:0px auto 0px auto;
    min-width:500px;
    max-width:1800px;
    
    }
<div id="wrapper">
<header>
<div class="logo">
<img src="../Afbeeldingen/QualitySigns.png" alt="logo Quality Signs" height="300" width="384">
<div class="logotekst">
<p>
Signalisatie van hoge kwaliteit
</p>
</div>
</div><!--einde logo-->
<div class="menubalk"><!-- begin menubalk-->
<ul>
<li><a href="#">Projectpagina</a></li>
<li><a href="#">CV-pagina</a></li>
<li><a href="#">Extra link</a></li>
</ul>
</div><!-- einde menubalk-->
</header>
<nav>
<ul>
<li><a href="index.html">Over ons</a></li>
<li><a href="#">Productie</a></li>
<li><a href="#">Verhuur</a></li>
<li><a href="#">Plaatsing</a></li>
</ul>
</nav>

Would really appreciate if someone could help me figure out this problem. Thank you!

htmlcss

Answer №1

It seems that Nathan Fries' response hit the nail on the head. The issue lied in the padding, although it appears you were attempting to center the top navigation bar using it.

Here is an enhanced version of your styling with functional links and a perfectly centered navbar! By utilizing percentages and auto margins, the navbar remains centered even when adjusting the browser window size.

Best of luck with your project!

    .menubalk {
      text-align: center;
      width: 100%;
      margin: 5% auto auto auto;
    }

    .menubalk ul{
    list-style:none;
    }

    .menubalk li{
    display:inline;
    }
    
    .menubalk a{
        color:black;
    background-color:#0072BB;
    text-transform:uppercase;
    font-size: 12px;
    font-weight:bold;
    padding: 20px;
    border-radius:5px;
    }

    .content{
    background-color:#0072BB;
    border-radius:25px 25px 25px 25px;
    margin-left:175px;
    padding:25px;
    
    }

    p,h2,img{
    margin:0;
    }
    
    nav{
    background-color:#0072BB;
    float:left;
    width:150px;
    border:10px solid white;
    border-radius:25px 25px 25px 25px;
    }
<div id="wrapper">
<header>
<div class="logo">
<img src="../Afbeeldingen/QualitySigns.png" alt="logo Quality Signs" height="300" width="384">
<div class="logotekst">
<p>
Signalisatie van hoge kwaliteit
</p>
</div>
</div><!--einde logo-->
<div class="menubalk"><!-- begin menubalk-->
<ul>
<li><a href="#">Projectpagina</a></li>
<li><a href="#">CV-pagina</a></li>
<li><a href="#">Extra link</a></li>
</ul>
</div><!-- einde menubalk-->
</header>
<nav>
<ul>
<li><a href="index.html">Over ons</a></li>
<li><a href="#">Productie</a></li>
<li><a href="#">Verhuur</a></li>
<li><a href="#">Plaatsing</a></li>
</ul>
</nav>

Answer №2

The issue with the .menubalk ul selector is that the padding value is set to 375px, causing the element to overlap the links below.

.menubalk ul{
    list-style:none;
    display:inline;
    margin-left:0;
    padding:375px;
}

For a correct implementation, refer to the updated code snippet below:

.menubalk{
    padding:25px;

}
.menubalk ul{
    list-style:none;
    display:inline;
    margin-left:0;
    padding:0px;
}
.menubalk li{
    display:inline;
}

.menubalk a{
    color:black;
    background-color:#0072BB;
    text-transform:uppercase;
    font-size: 12px;
    font-weight:bold;
    padding: 20px;
    border-radius:5px;
}
.content{
    background-color:#0072BB;
    border-radius:25px 25px 25px 25px;
    margin-left:175px;
    padding:25px;

}
p,h2,img{
    margin:0;
}

nav{
    background-color:#0072BB;
    float:left;
    width:150px;
    border:10px solid white;
    border-radius:25px 25px 25px 25px;
}
#wrapper{
    margin:0px auto 0px auto;
    min-width:500px;
    max-width:1800px;

}
<div id="wrapper">
    <header>
        <div class="logo">
            <img src="../Afbeeldingen/QualitySigns.png" alt="logo Quality Signs" height="300" width="384">
            <div class="logotekst">
            <p>             
                Signalisatie van hoge kwaliteit
            </p>
            </div>
        </div>  <!--einde logo-->
        <div class="menubalk">  <!-- begin menubalk-->
            <ul>
                <li><a href="#">Projectpagina</a></li>
                <li><a href="#">CV-pagina</a></li>
                <li><a href="#">Extra link</a></li>
            </ul>
        </div><!-- einde menubalk-->
    </header>       
    <nav>
        <ul>
            <li><a href="index.html">Over ons</a></li>
            <li><a href="#">Productie</a></li>
            <li><a href="#">Verhuur</a></li>
            <li><a href="#">Plaatsing</a></li>
        </ul>   
    </nav>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the best approach to retrieve a JSON object from a form exception that has a specific name?

I have a certain form with input fields. My goal is to generate a JSON object from the form, excluding any input whose name is "point". However, my code doesn't seem to be working properly when I use the "not()" function. What am I doing wrong and how ...

javascriptjqueryhtml

Master the Art of Creating Responsive Table Rows

Can someone please help me with making my table of rows and columns mobile responsive? I have inserted data from the database, but it doesn't adapt well for mobile devices. I have used element1 and content1 id for the background of the elements, but h ...

htmlcssresponsive

Retrieve the values and IDs for every span element within the form

I have been attempting to retrieve all span elements within a form and make them editable input text fields. Once you click away, they should revert back to span elements. I will provide a live example in the attached fiddle. I tried my hand at it, but the ...

javascriptjqueryhtml

Issue with the top margin of the body

Recently, I've encountered a peculiar problem with a standard website layout that I use. The issue seems to be centered around the space between the top and the first div: navbar. No matter what I try, I just can't seem to remove it, as the reas ...

htmlcss

Guide on defining keyframes in a CSS animation based on a specific property value

In CSS animations, keyframes are defined using percentages to determine their position: @keyframes foo { 0% { ... } 50% { ... } 100% { ... } } I'm working on a basic animation where an object smoothly moves across the screen. However, I ...

htmlcssanimationcss-animationskeyframe

Get a calendar that displays only the month and year

I am looking to incorporate two unique PrimeFaces calendars on a single page. The first calendar will display the date, while the second one will only show the month and year. To achieve this, I have implemented the following JavaScript and CSS specifica ...

javascriptcssprimefacesdatepickercalendar

Passing arguments inside the source attribute of an image or link tag in Node.js and

As a beginner in NodeJS, I am facing an issue with passing arguments inside links and image sources. In my template.html file, I have included various scripts and elements to create a search form. The issue arises when I try to incorporate values from the ...

javascripthtmlnode.jsvue.js

Is there a way to switch the classList between various buttons using a single JavaScript function?

I'm currently developing a straightforward add to cart container that also has the ability to toggle between different product sizes. However, I am facing difficulties in achieving this functionality without having to create separate functions for ea ...

javascriptjquerycsstoggle

The CSS filter "progid:DXImageTransform.Microsoft.Alpha(style=1,opacity=80)" is not functioning properly in Firefox

Trying to apply a filter effect using CSS but encountering issues in Firefox: progid:DXImageTransform.Microsoft.Alpha(style=1,opacity=80 ) opacity: 0.5; -moz-opacity: 0.5; Any s ...

cssfirefox

Utilizing JQuery AJAX and PHP for Data Encoding

My webpage is encoded in HTML with the charset ISO-8859-2. All content on the page adheres to this charset and appears correctly. However, I am facing an issue when making an Ajax call to a PHP server. When I send the character á and receive the same valu ...

phpjqueryhtmlajaxencoding

What is the best way to create a sign-up box that appears on the same page when you click on the sign-up button

I am interested in implementing a 'sign up' box overlay at the center of my index page for new users who do not have an account. I would like them to be able to easily sign up by clicking on the 'sign up' button. Once they complete the ...

javascripthtmlcsstwitter-bootstrap

Dynamic Rendering of Object Arrays in Table Columns using JavaScript

In the process of developing an appointment slot selection grid, I have successfully grouped all appointments by dates. However, I am facing challenges in displaying this array of Objects as a clickable grid with columns. The current output can be viewed h ...

javascripthtmlgrid-layout

How can I show the HTML text "<ahref>" in a UITextView on iOS?

Is there a way to show HTML tags like <a> in a textview? As an example, here is some code: Hello good morning <a href=\"1\">USER1</a> and <a href=\"13\">USER2</a> ...

htmliosattributestextview

When resizing the browser window, this single horizontal page website does not re-center

I am in the process of creating my very first one-page horizontal website using jQuery and the scrollTo plugin. This site consists of 3 screens and initially starts in the center (displaying the middle screen). To achieve this, I decided to set the width o ...

jqueryhtmlcssresize

Vue's v-model functionality encounters issues when navigating back and forth in the browsing history

Below is a sample of code from the local index.html file: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">< ...

htmlvue.jsinput

What is the best way to display a collection of square Views in a FlatList in a react native application?

How can you create a scrollable square grid with two columns of squares in a FlatList using react-native and ensure it is responsive to different screen sizes? Which CSS properties in react-native are necessary to achieve square shapes for each <Item/& ...

cssreact-native

Should the letter 'p' be inserted into the letter 'a'?

After viewing a video on Bootstrap, I noticed an unusual occurrence where there was a p element nested inside an a element. Is this considered acceptable in terms of HTML semantics? ...

htmlsemantic-markup

What is the best method to transfer an array as a parameter from an Ipython notebook to an HTML file that includes specific javascript functions?

I have a unique HTML file named "file.html" that includes a distinctive JavaScript function described below: The Unique file.html <html> <head> </head> <script> function customFunction() { perform an action using ...

javascripthtmljupyter-notebook

Ensure that the div remains within the viewport

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Tit ...

javascripthtmlcssweb

Stylish CSS menu design

I am struggling to set up a top menu bar using float: left. How can I achieve the desired behavior for a top menu bar? The code snippet below demonstrates what I have tried so far: * { margin:0; padding: 0; } #menu { background-color: yell ...

cssuser-interfacemenu