Nav Bar Linking Issue

HTML & CSS
1

I’m having trouble with the Nav Bar on the top of the homepage (the other pages are Okay). I’ve copied the html from the nav bar on the other pages to the Nav bar on the homepage and I still can’t get it to work.

When I do a mouseover Home, The Practice and 1/2 of Insurance is active. But when I mouseover (or click on) Our Services, Blog (this isn’t supposed to be active), and Contact, they are not active. When I right-click and View Page Source, I see links associated with the text.

I’ve used both Firefox and Chrome browsers and they both show the same issue.

The website is here: wprdev.com

Any help will be greatly appreciated as I have little hair left to pull out.

2

It doesn’t look like you have.
Here is what you have on your homepage…
(with code structured for visual clarity)

<div class="et_pb_text_inner">
  <p style="text-align: center;">
    <span style="color: #99ccff;">
    <a href="https://www.wprdev.com/" style="color: #99ccff;">Home</a>
    <a href="https://www.wprdev.com/the-practice/" style="color: #99ccff;">The Practice</a>
    <a href="https://www.wprdev.com/insurance/" style="color: #99ccff;">Insurance</a>
    <a href="https://www.wprdev.com/our-services/" style="color: #99ccff;">Our Services</a>
    Blog
    </span>
    <a href="https://www.wprdev.com/contact/">
      <span style="color: #99ccff;">Contact</span>
    </a>
  </p>
</div>

Here what I see on “The Practice” page…
(with code structured for visual clarity)
spans nested in anchors, and anchors nested in spans


<div class="et_pb_text_inner">
  <p style="text-align: center;">
    <span style="color: #ccffff;">
      <span style="color: #99ccff;"></span>
    </span>
  </p>
  <p style="text-align: center;">
    <span style="color: #ccffff;">
      <a href="https://www.wprdev.com/" style="color: #ccffff;">
        <span style="color: #99ccff;">Home</span>
      </a>
    </span>
    <span style="color: #99ccff;">
      <a href="https://www.wprdev.com/the-practice/" style="color: #99ccff;">The Practice</a>
    </span>
    <a href="https://www.wprdev.com/insurance/">
      <span style="color: #99ccff;">Insurance</span>
    </a>
    <span style="color: #99ccff;">
      <a href="https://www.wprdev.com/our-services/" style="color: #99ccff;">Our Services</a>
    </span>
    <span style="color: #99ccff;">Blog</span>
    <a href="https://www.wprdev.com/contact/">
      <span style="color: #99ccff;">Contact<br /></span>
    </a>
  </p>
  <p style="text-align: center;">
    <span style="color: #99ccff;"></span>
  </p>
</div>

It would be best to start from a clean slate using a <ul>. Then let CSS do the work of styling the links laid out in a row.

<ul class="nav">
   <li><a href="#">Home</a></li>
   <li><a href="#">The Practice</a></li>
   <li><a href="#">Insurance</a></li>
   <li><a href="#">Our Services</a></li>
   <li><a href="#">Blog</a></li>
   <li><a href="#">Contact</a></li>
</ul>

<!DOCTYPE HTML>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Test Page</title>
<style>
.nav {
  display:flex;
  justify-content:center;
  flex-flow: row wrap;
  margin:0;
  padding:.5em;
  list-style:none;
  background:#003449;
}
.nav li {
  margin: .5em;
}
.nav li a {
  text-decoration:none;
  color:#99ccff;
}
</style>

</head>
<body>

<ul class="nav">
   <li><a href="#">Home</a></li>
   <li><a href="#">The Practice</a></li>
   <li><a href="#">Insurance</a></li>
   <li><a href="#">Our Services</a></li>
   <li><a href="#">Blog</a></li>
   <li><a href="#">Contact</a></li>
</ul>

</body>
</html>
4 Likes
3

Thank you Ray, that was helpful! :smiley:

1 Like
4

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.