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

  • Author
  • #1834411

    Hi there!

    I’ve added icons in the navigation menu of my blog:

    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!)?



    The blog I need help with is


    Hi Marine,

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




    @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;

    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)?


    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.


    Thanks @designsimply!
    I’ll test other oranges!

The topic ‘Motif theme: how to add a rollover in the navigation menu’ is closed to new replies.