Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
  • #21786

    Hi There!

    I added some rollover images to the theme’s menu, which worked out great. however, upon viewing on iphone5, in vertical view, the menu, instead of turning into drop down menu like it’s supposed to, it ends up just stacking the menu images on top of each other in a second line.

    I’ve also noticed that when I re-size my browser window, first it squishes the menu like that and then past a certain threshold, it will convert to the mobile menu.

    Is there a way to make it just go to the drop-down menu instead of squishing like this?



    Hi eldiablosf,

    That is the way it is supposed to work, but my guess is you used some !important values for your buttons which is causing the responsive code not to work properly.




    Actually, I didn’t. I just inserted simple rollover code into the menu items. I can see that with plain text, they stack nicely on top of each other, but with the images, end up overlapping each other. pls see here:

    Cant I just decrease the threshold at which the menu changes to the drop down, so that it changes to the drop down much earlier instead of scrunching? I just cant seem to find it.



    Oh, I see now the threshold is in js/avia.js

    If I set it to say 1024px, will this cause problems on certain mobile devices? Cause at this point, I’d rather have the drop down menu on all devices than show overlapping images.


    Or, I guess, if I reduce the padding between the menu icons, it wont stretch all the way across to the right, and will make it less likely to go on the second line before changing to the drop down menu, right?…. hmm…


    No, if that is your only issue (the scrunching) you can just change the value as needed.

    If you wanted to add your own media queries, its pretty simple if you know a bit of css. Here is the template I used to start if you are interested in going that route:

    /* #Media Queries
    ================================================== */

    /* Smaller than standard 960 (devices and browsers) */
    @media only screen and (max-width: 959px) {}

    /* Tablet Portrait size to standard 960 (devices and browsers) */
    @media only screen and (min-width: 768px) and (max-width: 959px) {}

    /* All Mobile Sizes (devices and browser) */
    @media only screen and (max-width: 767px) {}

    /* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
    @media only screen and (min-width: 480px) and (max-width: 767px) {}

    /* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
    @media only screen and (max-width: 479px) {}




    Awesome, thank you very much!

Viewing 7 posts - 1 through 7 (of 7 total)

The topic ‘Help with Menu Rollover images’ is closed to new replies.