SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Guru ripcurlksm's Avatar
    Join Date
    Aug 2004
    Location
    San Clemente, CA
    Posts
    859
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Logo throws off menu

    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. #2
    SitePoint Enthusiast
    Join Date
    Jan 2011
    Posts
    45
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #3
    SitePoint Guru ripcurlksm's Avatar
    Join Date
    Aug 2004
    Location
    San Clemente, CA
    Posts
    859
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #4
    SitePoint Enthusiast
    Join Date
    Jan 2011
    Posts
    45
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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 -
    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 -
    Code:
    <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. #5
    SitePoint Guru ripcurlksm's Avatar
    Join Date
    Aug 2004
    Location
    San Clemente, CA
    Posts
    859
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Gotcha... its a template I purchased. I will take a look tonight

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,350
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    HI,

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

    The code should be this:

    Code:
    <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. #7
    SitePoint Guru ripcurlksm's Avatar
    Join Date
    Aug 2004
    Location
    San Clemente, CA
    Posts
    859
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    HI,

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

    The code should be this:

    Code:
    <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.)
    Thank you Paul, that was it!

    Thanks again gold!


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •