How to Change Size of Hover Image in Nav Menu?

20 replies
  • WEB DESIGN
  • |
How do I go about making the boxes that show up when you hover over the navigation menu items smaller on this site?

I selected that portion of the screen and inspected it from within Firebug, but I'm not sure which value modifies the size of the boxes upon hover-over.

I've spent some time changing some values in Firebug, but have unsuccessful in identifying what specific value modifies this.
#change #hover #image #menu #nav #size
  • Profile picture of the author longblog
    a:hover img {
    width: 160px; <==== CHANGE THIS
    position: absolute;
    top: -25%;
    left: 0;
    margin: 0 0 0 -30px;
    border: 5px solid #333;
    {{ DiscussionBoard.errors[8153450].message }}
    • Profile picture of the author mrniceguy123
      Originally Posted by longblog View Post

      a:hover img {
      width: 160px; <==== CHANGE THIS
      position: absolute;
      top: -25%;
      left: 0;
      margin: 0 0 0 -30px;
      border: 5px solid #333;
      I can't find that anywhere in the style.css.

      Where exactly did you see that piece of code in my style.css?
      {{ DiscussionBoard.errors[8154372].message }}
      • Profile picture of the author JamesLennon
        Originally Posted by mrniceguy123 View Post

        I can't find that anywhere in the style.css.

        Where exactly did you see that piece of code in my style.css?
        I suspect he was just giving you an example
        {{ DiscussionBoard.errors[8154402].message }}
        • Profile picture of the author longblog
          Originally Posted by JamesLennon View Post

          I suspect he was just giving you an example
          Nope, that's the exact code from his site he needs to change. It's located at static.tinypic.com/s/global_v4.3.30.css

          I'm not quite sure exactly were this "static" directory is on your host, but when I inspect the element, that's the url it gives me.

          Edit: It's on line 562 by the way.
          {{ DiscussionBoard.errors[8154427].message }}
          • Profile picture of the author mrniceguy123
            Originally Posted by longblog View Post

            Nope, that's the exact code from his site he needs to change. It's located at static.tinypic.com/s/global_v4.3.30.css

            I'm not quite sure exactly were this "static" directory is on your host, but when I inspect the element, that's the url it gives me.

            Edit: It's on line 562 by the way.
            Sorry man, I'm lost.

            On line 562 of my style.css, lies a padding value.

            Plus the link you provided isn't numbered, so I'm not sure where this code lies.

            Is it supposed to be in my style.css, or somewhere else?
            {{ DiscussionBoard.errors[8154448].message }}
  • Profile picture of the author JamesLennon
    If I was you I would use HTML5's transform as just increasing the size will play havoc with your layout.
    {{ DiscussionBoard.errors[8154247].message }}
    • Profile picture of the author mrniceguy123
      Originally Posted by JamesLennon View Post

      If I was you I would use HTML5's transform as just increasing the size will play havoc with your layout.
      I just Google'd to learn what it is, but I don't understand how to go about implementing that. How do I do it?
      {{ DiscussionBoard.errors[8154358].message }}
      • Profile picture of the author JamesLennon
        Originally Posted by mrniceguy123 View Post

        I just Google'd to learn what it is, but I don't understand how to go about implementing that. How do I do it?
        I would learn all you can before trying anything or get a coder to do it. It can get quite complicated
        {{ DiscussionBoard.errors[8154399].message }}
    • Profile picture of the author Michael71
      Originally Posted by JamesLennon View Post

      If I was you I would use HTML5's transform as just increasing the size will play havoc with your layout.
      I think you mean CSS3 transform property...
      Signature

      HTML/CSS/jQuery/ZURB Foundation/Twitter Bootstrap/Wordpress/Frontend Performance Optimizing
      ---
      Need HTML/CSS help? Skype: microcosmic - Test Your Responsive Design - InternetCookies.eu

      {{ DiscussionBoard.errors[8155173].message }}
  • Profile picture of the author longblog
    EDIT: Skip all this and go to my next post!

    It's in the global_v4.3.30.css as far as I can see from my side. The lines won't be numbered unless you are using a program like dream weaver.

    You can can try using the important declaration on an a hover element in your style. Css to override the other file, but that's kind of lazy coding. My phone won't let me type it correctly. I'll show you how when I get home.

    edit: OK I"m home and can show you now. You can try adding the following code to your style.css and see if it works. Sometimes it will work, and other times it wont. Like I said above though, it's kind of lazy coding and can cause issues down the line if you forget it's there and try to make other changes etc..

    Code:
    a:hover img {
    width: 160px !important;  <==== CHANGE THIS
    position: absolute;
    top: -25%;
    left: 0;
    margin: 0 0 0 -30px;
    border: 5px solid #333;
    }
    {{ DiscussionBoard.errors[8154494].message }}
  • Profile picture of the author longblog
    OH CRAP! Lol, I thought the tinypic site was your site! I've been giving you the code from their site. I thought we were talking about the hover images at the bottom of tinypic.com until I saw someone else using the site to link one of their images just now. What is your actual domain name so I can look at the code?

    edit: I found it. Look for the following code on line 598. You'll have to add a height and a top margin:
    Code:
    media="screen"
    ul.art-hmenu>li>a:visited, ul.art-hmenu>li>a:hover, ul.art-hmenu>li:hover>a {
    text-decoration: none;
    }
    {{ DiscussionBoard.errors[8154797].message }}
    • Profile picture of the author mrniceguy123
      Thanks! How do I add the necessary margins? I'm still learning this stuff. Thanks for your help, sir.
      {{ DiscussionBoard.errors[8154912].message }}
      • Profile picture of the author Patrick
        Originally Posted by mrniceguy123 View Post

        Thanks! How do I add the necessary margins? I'm still learning this stuff. Thanks for your help, sir.

        If you really want to get the grip of the layout of your page, I suggest you start with the basics of HTML/CSS and not just jump into the code. Just like when a pilot wishes to fly a plane, he would learn the basics, and not go up in the air and then ask "how to get down"....
        {{ DiscussionBoard.errors[8156319].message }}
  • Profile picture of the author Patrick
    Secondly, your question was also vague...and unclear...

    ""boxes that show up when you hover over the navigatio1n menu items""

    Those are not boxes, that is background color/image on hover. If you make them smaller on hover, can you imagine how ugly the layout would look then ?

    Thirdly, your question might have meant something else, but the replies here confused you more and more...
    {{ DiscussionBoard.errors[8156336].message }}
    • Profile picture of the author mrniceguy123
      Originally Posted by Patrick View Post

      Secondly, your question was also vague...and unclear...

      ""boxes that show up when you hover over the navigatio1n menu items""

      Those are not boxes, that is background color/image on hover. If you make them smaller on hover, can you imagine how ugly the layout would look then ?

      Thirdly, your question might have meant something else, but the replies here confused you more and more...
      You're right; I am confused. I would love to take the time to learn more CSS, however my time doesn't allow for it right now.

      I believe Longblog's reply above was intended to help me accomplish what I'm looking for, but he said I needed to add margins, and I need help figuring out how to do so.
      {{ DiscussionBoard.errors[8170571].message }}
  • Profile picture of the author watsonovedades
    good stuff thanks i was looking for this info asweel
    Signature
    Whatever your mind can conceive and BELIEVE you can achieve
    Follow me on Twitter - @DineroConPc
    I talk about Affiliate Marketing Methods
    {{ DiscussionBoard.errors[8163521].message }}
  • Profile picture of the author David V
    It can be a little tricky with navs if you don't know what to look for.
    You don't need to add or edit margins.

    In your style.css you have this on line 560:
    Code:
    ul.art-hmenu>li>a {
    padding: 0 15px;
    margin: 0 auto;
    position: relative;
    display: block;
    height: 53px;
    cursor: pointer;
    text-decoration: none;
    color: #517AC8;
    line-height: 53px;
    text-align: center;
    }
    The 2 parts that you need to change are the "height" and "line-height".

    You could change those to something like 33 or 35.
    To test it without committing to the change, open firebug or web developer and in the left panel select the href in this line:
    Code:
    <li class="menu-item-1413">
    <a title="Homeowners" href="http://myhousesforsaleindetroit.com/home-owner-resources/">Homeowners</a>
    </li>
    Don't select the "li", select the link inside. (<a title="blah blah)
    Now look on the css right pane, scroll down and you'll see the block of code I pasted up top.
    Change the height and line-height to get the desired heights.
    Then you can physically change it.
    {{ DiscussionBoard.errors[8170792].message }}

Trending Topics