Responsive menu

  • Resolved datoseb

    (@datoseb)


    9 years, 11 months ago

    Hi

    Thank you for a the fantastic menu solution. I have it on my localhost site and want to menu responsive shows , when i open website on ipad or in another resolutions.

    Here is my custom menu css:

    .menu-item a img {
    display: block;
    font-size: 14px;
    font-weight: 300;
    line-height: 30px;
    margin: 0;
    overflow: hidden;
    padding: 10px 15px;
    text-transform: uppercase;
    transition: all 0.25s ease-out 0s;
    width: 120px;
    height: 120px;
    }
    .menu-item a .menu-image-hover-wrapper {
    display: block;
    }
    .menu-item a .menu-image-hover-wrapper,
    .menu-item a .menu-image-hover-wrapper img {
    float: left;
    }
    .menu-item a.menu-image-hovered .menu-image-hover-wrapper img.hovered-image,
    .menu-item a.menu-image-hovered:hover .menu-image-hover-wrapper img.menu-image {
    opacity: 0;
    }
    .menu-item a.menu-image-hovered:hover .menu-image-hover-wrapper img.hovered-image {
    opacity: 1;
    }
    .menu-item a.menu-image-title-hide .menu-image-hover-wrapper,
    .menu-item a.menu-image-title-before .menu-image-hover-wrapper {
    vertical-align: top;
    display: inline-block;
    float: none;
    }
    #your-menu-id img {
    display: block;

    }
    .menu-item a.menu-image-title-after img,
    .menu-item a.menu-image-hovered.menu-image-title-after .menu-image-hover-wrapper {
    padding-right: 10px;
    display: block;
    text-align: center;
    }
    .menu-item a.menu-image-title-before img,
    .menu-item a.menu-image-hovered.menu-image-title-before .menu-image-hover-wrapper {
    padding-left: 10px;
    }
    .menu-item a .menu-image-hover-wrapper img {
    padding: 0;
    position: absolute;
    transition: opacity 0.25s ease-in-out 0s;
    }`
    `

    Thank you

    https://wordpress.org/plugins/menu-image/

Viewing 5 replies - 1 through 5 (of 5 total)
  • zviryatko

    (@zviryatko)

    9 years, 11 months ago

    Hi, thank you for your solution.

    Thread Starter datoseb

    (@datoseb)

    9 years, 11 months ago

    Hi,

    You welcome, i was searching for a solution, how to do it responsive?

    zviryatko

    (@zviryatko)

    9 years, 11 months ago

    Use css media query, simple example:

    @media (max-width: 800px) {
    /* css for devices with width less than 800px */
}

    pelotita

    (@pelotita)

    9 years, 8 months ago

    Use css media query, simple example:
    @media (max-width: 800px) {
    /* css for devices with width less than 800px */
    }

    Hi zviryatko,
    Are you saying that adding this to plugin css the problem will be solved? Or I should add the custom css from datoseb?

    Thanks.

    zviryatko

    (@zviryatko)

    9 years, 8 months ago

    CSS – it’s just a style and it must depend on your theme, add it to .css file in your theme, some themes support adding css from theme options.

    Are you saying that adding this to plugin css the problem will be solved?

    No, i didn’t. This is not a problem, it’s theme-depend feature and can’t be solved global.

    Or I should add the custom css from datoseb?

    Try it, but if it do not help write your own css.

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Responsive menu’ is closed to new replies.