SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Enthusiast
    Join Date
    Apr 2012
    Location
    Battle Ground, Washington, United States
    Posts
    37
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Problems with navigation drop down and back to top button.

    Ok I have two separate issues. First off the website is here: http://test.koolcollar4dogs.com/

    The first one is the "To the Top" button I installed isn't working. It's appearing correctly so I know the jquery is working somewhat but it does nothing when I click it. Any advice?

    The second one is that the navigation drop down on the "Support" link doesn't scroll over correctly on different screen sizes. It works perfectly on my 13" laptop but on my secondary monitor it's really hard to click the secondary menu because it disappears very quickly. Any thoughts on why this may be?

    Thanks,

    Andrew

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,598
    Mentioned
    411 Post(s)
    Tagged
    6 Thread(s)
    For the top link to work, you need to have an element near the top of your page with an id of "top".

  3. #3
    SitePoint Enthusiast
    Join Date
    Apr 2012
    Location
    Battle Ground, Washington, United States
    Posts
    37
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Just tried it. No success with that.

  4. #4
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    The link is working anyway (both the one in the footer, and the one that scrolls with you. What browser is this happening on? I'm using Chrome.

    As for the dropdown, you don't set coordinates on the dropdown, so the browser literally guesses where to place it.

    Add in the following code
    Code:
    #navbar li li {
    
    • position: static;
    } #navbar li{position:relative;} #navbar li ul{top:100%;left:0;}


    And the .row element needs a different clearing mechanism. It can't use overflow:hidden. It's chopping off the dropdown menu because you use that.
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  5. #5
    SitePoint Enthusiast
    Join Date
    Apr 2012
    Location
    Battle Ground, Washington, United States
    Posts
    37
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I got the "To the Top" button working, but I'm still having issue with the navigation drop down. Any solutions?

  6. #6
    SitePoint Enthusiast
    Join Date
    Apr 2012
    Location
    Battle Ground, Washington, United States
    Posts
    37
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I can't really change the Row overflow as doing that screws up the entire layout. I tried adding the code and it fixed the problem, but like you said, the bottom was cut off. How would i go about making this navigation inline instead of a list style? It's really the only dropdown navigation that will be on the page so it's fine if it goes horizontal instead of vertical.

    Quote Originally Posted by RyanReese View Post
    The link is working anyway (both the one in the footer, and the one that scrolls with you. What browser is this happening on? I'm using Chrome.

    As for the dropdown, you don't set coordinates on the dropdown, so the browser literally guesses where to place it.

    Add in the following code
    Code:
    #navbar li li {
    
    • position: static;
    } #navbar li{position:relative;} #navbar li ul{top:100%;left:0;}


    And the .row element needs a different clearing mechanism. It can't use overflow:hidden. It's chopping off the dropdown menu because you use that.

  7. #7
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ajrdesign View Post
    I can't really change the Row overflow as doing that screws up the entire layout. I tried adding the code and it fixed the problem, but like you said, the bottom was cut off. How would i go about making this navigation inline instead of a list style? It's really the only dropdown navigation that will be on the page so it's fine if it goes horizontal instead of vertical.
    Try one of the other fixes listed in this article. I'm about to leave for work so I can't check. I can only leave you with these options. Try a few. I'd recommend the clearfix.

    http://ryanreese.us/blog/Contain-And-Clear-Floats.php
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work


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
  •