The link in the href is unresponsive to clicking

I'm having trouble with my header links not working. I've tried adjusting the z-index, changing href=. . to href=, and removing APdiv, but none of these solutions have worked. Another issue I noticed is that I can't highlight the text in the header.

Header

<div class='container'>
      <div class='five columns logo'></div>
      <div class='eleven columns'>
        <div id="apDiv2"><img src="images/misc/logo.jpg" width="144" height="38"></div>
        <ul class='mainMenu'>
          <li><a href='index.php' title='Home' style="color: #FFF">Home</a></li>
          <li><a href='about_us.php' title='About us' style="color: #FFF">About us</a></li>
          <li><a href='#' title='Pricing' style="color: #FFF">Pricing</a></li>
          <li><a href='#' title='Blog' style="color: #FFF">Blog</a></li>
          <li><a href='#' title='Portfolio' style="color: #FFF">Portfolio</a></li>
          <li><a href='#' title='Contact' style="color: #FFF">Contact</a></li>
        </ul>
      </div>
    </div>

Css

body {
    margin:0;
    padding: 0;
    font-family: "Open Sans", Arial, sans-serif;
}
body {
    background: #fff;
    color: #585858;
    font-size: 24px;
}

...
htmlcss

Answer №1

While they are indeed functioning, the issue lies in their visibility as they blend into the background due to sharing the same color.

To rectify this, include the following:

body {
 background: #000;
}

This adjustment will render the links visible and operational.

For reference, please visit http://jsfiddle.net/nidzix/hagD8/6/

Answer №2

option:1 change the background color of the body to a color other than white 

body 
{
    margin: 0;
    padding: 0;
    font-family: "Open Sans", Arial, sans-serif;
    background-color: Green;
}

DEMO

OR

option:2 change the style="color: #000"

<li><a href='index.php' title='Home' style="color: #000">Home</a></li>
          <li><a href='about_us.php' title='About us' style="color: #000">About us</a></li>
          <li><a href='#' title='Pricing' style="color: #000">Pricing</a></li>
          <li><a href='#' title='Blog' style="color: #000">Blog</a></li>
          <li><a href='#' title='Portfolio' style="color: #000">Portfolio</a></li>
          <li><a href='#' title='Contact' style="color: #000">Contact</a></li>

DEMO

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

The carousel is having trouble aligning the images div to the center

Struggling to create a carousel slide that automatically resizes image, but can't seem to get the inner div containing the images to center within the outer div. Even after trying various CSS properties like text-align:center and margin-left: auto, th ...

htmlcssdjango-templatescarousel

I am unable to access the Xml data using VBA's `selectsinglenode` function as it is returning nothing

Below is the XML data: <NewZipCdListResponse> <cmmMsgHeader> <requestMsgId/> <responseMsgId/> <responseTime>20220526:085103847</responseTime> <successYN>Y</successYN> <returnCode>0 ...

htmlexcelxmlvbahttp

Here is a guide on how to develop a PHP function that interacts with a textarea to display text in the specified color by using syntax like [color:red]

Is it possible to code a PHP function that can work alongside a textarea to display text in the specified color by using a syntax like [color:red]? This function operates in a similar manner to Facebook's @[profile_id:0] feature. ...

javascriptphpjqueryhtmlajax

Achieving alignment of items within nested Grid components in React Material UI

Currently, I am working on building a web page using the React Material UI Grid component. However, I'm encountering an issue with aligning items across nested grids. The current view looks like this: https://i.sstatic.net/bUreX.png What I want is fo ...

cssreactjsmaterial-uigrid

Ensuring proper alignment between labels and input

How can I align a label and a range input field on the same line? I have tried using display: inline-block, but it does not seem to work. There doesn't appear to be any conflicting styles, and all sources indicate that this approach should be effect ...

htmlcssformsinput

Adding a border around the `<tr>` elements in a table

How can I add a border to the <tr> element (t_border), without the inner table inheriting the style from the outer one? <table> <tr> <td>A</td> </tr> <tr> <td> <ta ...

htmlcss

Utilize pre-defined Bootstrap variables in a custom variables file

When I import the /bootstrap/scss/_variables.scss file AFTER my custom ./variables.scss file, I am unable to access the existing global variables from the original _variables.scss file. Bootstrap often uses cascading variable assignments which becomes a pr ...

cssvariablessassbootstrap-5

javascript - determine whether a hyperlink has been accessed

Is there a method to determine if a link has been visited? In Firefox, the color of a link changes after clicking on it, which leads me to believe it is possible. Edit: This question pertains to a Firefox extension, so I am unable to modify the HTML or CS ...

javascriptcsshyperlink

Receiving an undefined value when trying to access the index of a data list array

I'm currently working on implementing a datalist that gets populated from a JavaScript array and want to identify which part of the array was clicked on. After some debugging, I discovered that my arrays are returning undefined or 0. I've trans ...

javascriptjqueryhtmlarrays

Interactive YouTube Video Player that keeps video playing in original spot upon clicking the button

Currently, I'm working on a project that involves combining navigation and a video player within the same div container. Here is an image link And another image link The concept is that when you click on one of the four boxes, a new video will appe ...

javascriptjqueryhtmlcss

Encountering the error message "Cannot GET /" in a NodeJS Express

I've been experimenting with various approaches to resolve this issue, ranging from app.use(express.static(__dirname + "public")) to res.render. It seems to function correctly in my terminal environment but fails when I try to access it locally. Can a ...

javascripthtmlnode.jsexpress

C# code that generates HTML buttons for redirection

I've been working on developing a C# string builder that will be used to construct an HTML page using data from a database and user input. My current challenge involves adding two buttons to the string - one that redirects to a.asp and the other to b ...

c#htmlasp.netasp.net-mvc

Activate the clicked tab in the Bootstrap navbar when selected

I have gone through similar posts, but I am unable to get mine to work. My goal is to activate the clicked tab. Here is what my bootstrap navbar looks like in HTML: <div class="navbar navbar-default" role="navigation"> <div class="container" ...

jqueryhtmltwitter-bootstraptwitter-bootstrap-3

Navigating through the CSS menu located in the main directory

I am facing an issue with accessing my CSS menu in different directories. In my root directory, I have a CSS menu that I want to use in subdirectories as well. However, when I navigate to a subdirectory, I find it difficult to go back to the main directory ...

phphtmlcss

How do I position an element at the center of a div using CSS?

Here is some HTML code that I need help with: <div id='nav'><a href ='./?page=1'>1</a> 2 <a href ='./?page=3'>3</a> <a href ='./?page=4'>4</a> <a href ='./?page=5&ap ...

css

Inconsistent Animation Issue with jQuery Toggle for Expanding Div and Text

My expanding div functionality is almost perfect, but I've noticed that the transition when opening abruptly on divs with text. However, the closing transition is smooth. Can anyone help me make the opening transition as smooth as the closing one? Bel ...

javascriptjqueryhtmlcss

Choosing the div elements that have a PNG background image assigned to them

Is there a way to use jQuery to target all the div elements with a background-image property set to url(somepath/somename.png) in their style? ...

jqueryhtmlpngjquery-selectors

What is the best method to modify the hover text color in a Bootstrap navbar?

Whenever the cursor hovers over the letters, I attempted to modify their color, but unfortunately, it didn't work as expected. nav a { text-decoration: none; } .logo { height: 3rem; } .navbar-nav .nav-item .nav-link.custom:hover { color: ...

csstwitter-bootstrapbootstrap-5

Arranging the rows and columns of a table in optimal alignment

I am currently facing an issue with two tables. The first table consists of 2 rows and 4 columns, with the first column spanning 2 rows. However, in the visual representation, the last 3 columns are misaligned with the rows. How can this alignment be corre ...

htmlcsshtml-tablealignment

Column overflowing from row in Bootstrap grid on smaller screens

Is there a way to rearrange the display order of my Hello-div-2 and Hello-div-3 on small screens? Currently, the sequence is Hello-div-1, Hello-div-2, Hello-div-3, Hello-div-4. It needs to be Hello-div-1, Hello-div-3, Hello-div-2, Hello-div-4. ...

cssbootstrap-4grid