Need help? Check out our Support site, then


Motif theme: how to add a rollover in the navigation menu

  1. Hi there!

    I've added icons in the navigation menu of my blog:
    orangemediatique.wordpress.com

    Now, I am trying to add a rollover effect. For instance, I want that, when the mouse hovers on the little orange juice icons, the text Home appears.

    Do you guys think its possible? If yes, do you know how to do it (I searched everywhere!)?

    Cheers,

    Marine

    The blog I need help with is orangemediatique.wordpress.com.

  2. allancollins23
    Member

    Hi Marine,

    You can do this by adding a :hover pseudo-class to your icon and forcing the text-indent back to 0px.

    Example:

    li.home-icon:hover{
    text-indent:0px;
    }
  3. @allancollins23, nice, and awesome to have you in the forums!

    Marine, you can also use a little bit of a negative text-indent to center "Home" on the icon like this:

    li.home-icon:hover {
        text-indent: -13px;
    }
  4. Great! A billion thanks @allancollins23 and @thesacredpath!
    Is it possible to change the position of the text in height (I want it to appear a bit lower)?

  5. You can add spacing to the top of each text item in the main menu by adding something like this:

    .main-navigation li a {
    	padding-top: 15px;
    }

    Adjust the 15px as needed

    Be careful because if you have any text that falls to two lines, 15px could be too much. If you don't want menu item text to wrap, you could add "white-space: nowrap;" to the ".main-navigation li a" rule above.

    Your site looks so unique! However, I personally found the color combination of light orange on light green for the "création de contenus éditoriaux originaux" text extremely hard to read. Consider making that a darker orange to match the word Médiatique above.

  6. Thanks @designsimply!
    I'll test other oranges!

Topic Closed

This topic has been closed to new replies.

About this Topic