WordPress.org

Ready to get started?Download WordPress

Forums

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

  1. ABDesign
    Member
    Posted 6 months 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.

    Arthur

    https://wordpress.org/plugins/jquery-responsive-select-menu/

  2. Mickey Kay
    Member
    Plugin Author

    Posted 6 months 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
    Member
    Posted 6 months 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;}

Reply

You must log in to post.

About this Plugin

About this Topic