Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • October 5, 2015 at 7:24 pm #514028
    envapk2

    Hi

    For the full screen size I want to remove the menu text and replace each link with and image. But for the mobile menu I want to remove the images and bring back the text

    This has worked fine for the full screen size where to remove the text from the menu I have:

    span.avia-menu-text { visibility: hidden; }

    Then to bring back the text and remove the images for the mobile I have:

    @media only screen and (max-width: 768px) {
    span.avia-menu-text {
    opacity: 1!important;
    }
    #mobile-advanced li.menu-item a {
    background-image: none!important;
    }}

    But this does not bring back the menu text on the mobile, it just removes the images. Can you advise on what I should do here?

    many thanks

    Peter

    October 6, 2015 at 7:56 am #514168
    Rikard

    Hey Peter,

    Could you provide us with a link to the site in question so that we can take a closer look please?

    Best regards,
    Rikard

    October 6, 2015 at 12:22 pm #514322
    envapk2

    Hi Rikard
    You can see an example on the link provided. The image menu is fine on a full screen size but when it goes to a mobile screen size the images disappear ok but the menu text does not come back.

    Peter

    October 7, 2015 at 5:28 am #514906
    Rikard

    Hi,

    Could you try the following CSS instead to see if that helps?

    @media only screen and (max-width: 768px) {
span.avia-menu-text {
visibility: visible !important; 
}
#mobile-advanced li.menu-item a {
background-image: none!important;
}}

    Regards,
    Rikard

    • This reply was modified 9 years, 2 months ago by Rikard.
    October 7, 2015 at 11:17 am #515087
    envapk2

    Hi Rikard

    That works great, many thanks.

    Peter

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