Skip navigation
SarahVictoria75
SarahVictoria75 Calculating status...
Currently Being Moderated

How do I switch off properties of active nav buttons as I roll over others?

Mar 19, 2013 11:02 AM

Hello,

 

Please see a site I'm working on:

 

http://www.starshelters.co.uk/index.html

 

I'd like to have it so that the darker blue nav bar line for the page you're on changes back to the thinner, lighter line when you roll over other nav items - how do I do this? I've tried a few things but with no success.

 

Also, my container has an expanding box problem and I'm not sure why.

 

Thank you!

170 Views   5 Replies   Latest reply: Nancy O., Mar 19, 2013 12:11 PM
 
Replies
  • Nancy O.
    Currently Being Moderated
    1. Nancy O.,
    Mar 19, 2013 11:14 AM   in reply to SarahVictoria75
    Report

    Add this  to your CSS:

     

    #current:hover {your style rules here}

     

     

    Nancy O.

     
    |
    Mark as:
  • SarahVictoria75
    Currently Being Moderated
    2. SarahVictoria75,
    Mar 19, 2013 11:25 AM   in reply to Nancy O.
    Report

    Thanks Nancy,

     

    When I do this, the heavier line only goes back to the thinner line when hovering over the current page. I'm trying to get it so the current page button goes back to the thinner line when hovering over another nav button before clicking off the current page.

     

    Am I missing something?

     

    Thanks

     
    |
    Mark as:
  • Nancy O.
    Currently Being Moderated
    3. Nancy O.,
    Mar 19, 2013 11:39 AM   in reply to SarahVictoria75
    Report

    Oh, I see.  That's something more complex than CSS alone can handle.  You'll need some client-side scripts for this.  I'm not sure it's even worth all the extra effort, are you?

     

     

     

    Nancy O.

     
    |
    Mark as:
  • SarahVictoria75
    Currently Being Moderated
    4. SarahVictoria75,
    Mar 19, 2013 11:47 AM   in reply to Nancy O.
    Report

    Okay - probably not!

     

    Would you be able to advise on my expanding box problem with my container on line 20?

     

    and also, if you look at the coding, I've had to create a false side bar to make the footer start at the same place on the smaller pages - is this the best way of doing this?

     

    Thanks

     
    |
    Mark as:
  • Nancy O.
    Currently Being Moderated
    5. Nancy O.,
    Mar 19, 2013 12:11 PM   in reply to SarahVictoria75
    Report

    You're a little over zealous with the floats. You have them everywhere & you don't need them.

     

    Remove float:left from everything except your navigation and it should work much better. 

     

    What are floats used for?

     

     

     

    Nancy O.

     
    |
    Mark as:
Actions

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points