Logo throws off menu

HTML & CSS
1

Can anyone help me figure out why the “Home” link in the navigation menu is off at the demo link below? As soon as I added the “it ENDs” logo, it messed up the menu on the right.

http://ksm.fm/misc/itends/

Any suggestions?

2

Looking through your code you have a lot of empty anchor tags floating around. When I view source they’re not there, when I inspect element (chrome) there’s loads of them.

By setting the <a> tag that’s being placed next to the home link to display: none; your issue disappears.

It looks to me like a Javascript bug is adding lots of empty elements to your page, fix that and it’ll fix the CSS issue.

3

See what you mean… but now there is no “Home” link in the nav when display:none is set.

I am seeing you you mean with the empty <a> tags now, thank you. Any idea what javascript is causing it to print all of the empty tags? I’ve gone though and tried to remove any unnecessary javascript calls in the <head> tag, however it seems they are all connected to eachother and it breaks the site.

4

What I meant was, by changing the code in Chrome dev tools I was able to get the nav to align correctly.

Looking at your source it should be working, but something is adding the extra tags.

You source code -


<ul id="nav" class="sf-menu">

  <li><a href="index.php" class="menu_navigation"><span>HOME</span></a></li>

How it’s actually rendering -


<ul id="nav" class="sf-menu sf-js-enabled sf-shadow">
<a href="index.php" style="font-family: 'Open Sans';">
<!--THIS IS THE CSS ISSUE-->
</a>
  <li><a href="index.php" class="menu_navigation"><span>HOME</span></a></li>

So when I added display: none; to the empty <a> element, the home link worked as expected.

2 questions -

  1. Does removing the slider JS fix the issue?
  2. What is adding “sf-js-enabled sf-shadow” to your <ul> class? - Whatever does that could also be to blame
5

Gotcha… its a template I purchased. I will take a look tonight

6

HI,

The problem is that you didn’t close the anchor when you added the logo.

The code should be this:


<div class="logo"><a href="index.php"><img src="images/logo.gif" /></a></div>

You missed the last closing anchor which then corrupts all the html following causing the problem you saw.

(You also seem to be using the suckerfish/supersubs drop down menu js but you don’t actually have a dropdown menu so is a bit of a waste of resources.)

7

Thank you Paul, that was it!

Thanks again gold!