Tagged: , , ,

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • November 8, 2015 at 7:56 pm #532209
    jambrikp

    Hi,

    I have two widget on the header. One for the mobile number and one for the mobile icon. I would like to use a hover effect on the mobile icon and set main-menu margin right to display mobile number.

    It’s not work:

    #text-3.widget:hover .main_menu {
    margin-right: 400px;
}

    Or do you know a better solution?

    Thank you

    Best regards,
    Peter

    November 8, 2015 at 8:13 pm #532218
    Basilis

    Hey Peter!

    how are you adding the mobile phone number.
    Can you please show us all the code you are using?

    Cheers!
    Basilis

    November 8, 2015 at 8:30 pm #532231
    jambrikp
    .main_menu {
    clear: none;
    position: absolute;
    z-index: 100;
    line-height: 30px;
    height: 100%;
    margin-top: 0px;
    margin-right: 38px;
    margin-bottom: 0px;
    margin-left: 0px;
    right: 0;
}

.html_main_nav_header.html_logo_left #top .main_menu .menu>li:last-child>a, .html_bottom_nav_header #top #menu-item-search>a {
    padding-right: 13px;
}

#header #text-2.widget {
    right: 38px;
    padding-top: 0;
    position: absolute;
    top: 26px;
    font-size: 30px;
}

#header #text-3.widget {
    right: 0%;
    padding-top: 0;
    position: absolute;
    top: 0px;
    font-size: 30px;
}

#header #text-3.widget:hover .main_menu {
    margin-right: 400px;
    -webkit-transition: all 0.4s cubic-bezier(0.46, 0.03, 0.52, 0.96);
    transition: all 0.4s cubic-bezier(0.46, 0.03, 0.52, 0.96);
}

    And I have to header widget I used this guide:
    http://kriesi.at/documentation/enfold/adding-a-widget-area-to-the-header/

    At the moment the phone number (text-2 widget) is not visible because the main-menu background is white.

    Thank you

    November 10, 2015 at 4:30 pm #533399
    Elliott

    Hi!

    Are you wanting to hide the number until user hovers over the phone icon and then have it display?

    Best regards,
    Elliott

    November 10, 2015 at 4:43 pm #533424
    jambrikp

    Hi!

    Yes! :) I have more menu items so the z-index solve the number hiding but I can not main-menu margin right…
    But do you know a better solution?

    Thank you

    Best regards,
    Peter

    November 11, 2015 at 6:19 pm #534292
    Elliott

    Hi!

    I think what you will want to do is add the H3 into the same text widget as the icon and then add this to your custom CSS.

    .textwidget:hover h3.widgettitle {
    z-index: 9999999 !important;
    position: relative;
    background: white;
    display: block;
}
h3.widgettitle { display: none; }

    Best regards,
    Elliott

    December 8, 2015 at 3:07 pm #548771
    jambrikp

    Thank you! :) It’s work! :)

  • Author
    Posts
Viewing 7 posts - 1 through 7 (of 7 total)
  • The topic ‘Header widget hover’ is closed to new replies.