jQuery Responsive Select Menu
[resolved] Would like to make the "First Term" item an image (3 posts)

  1. ABDesign
    Posted 2 years ago #

    Would like the menu activation item to show up on mobile as that box with 3-4 horizontal bars, which is looking like the standard for accessing the menu on mobile devices.

    I can make it happen on a desktop with small window on the browser, but the image will not show on the phone, only the | character I've used to place hold that item.

    You can see this here: abdesignweb.com/tas

    Any help would be most appreciated as this slide-up menu looks great when activated on the mobile device.



  2. Mickey Kay
    Plugin Author

    Posted 2 years ago #

    Hi Arthur,

    Unfortunately, styling <select> elements is a tricky endeavor, and definitely outside the scope of this plugin. I've always found this article really helpful though: http://css-tricks.com/dropdown-default-styling/

    Good luck!

  3. ABDesign
    Posted 2 years ago #

    Thanks for that CSS tricks link. Chrome was the browser that it would not show in, both desktop and Android, but the [_webkit-appearance: none;] declaration made it show up in chrome. Using 0 for the border and matching the background color of the "select" item fixed the rest of the visuals on the phone display. Now, I can resize the image and have a working model for the client to use for his reviews. Thanks again.

    Here is the custom css used for placing that image in your menu's top position.

    select.jquery-responsive-select-menu {background-image: url("/images/MobileMenuLinkBars.png"); color: #4362A4; background-color:#000000; background-repeat: no-repeat; border: 0; height: 50px; width: 100px; margin: 0 0 0 20px; -webkit-appearance: none;}

Topic Closed

This topic has been closed to new replies.

About this Plugin

  • jQuery Responsive Select Menu
  • Frequently Asked Questions
  • Support Threads
  • Reviews

About this Topic