WordPress.org

Ready to get started?Download WordPress

Forums

Promotion Slider
[resolved] Upgrade breaks slider alignment in Firefox (9 posts)

  1. Joe Nasevich
    Member
    Posted 1 year ago #

    I upgraded Promotion Slider to version 3.3.3, and now slider is aligned too far up and to the right, so it now partially overwrites menu. This only happens with Firefox browser. It looks OK in IE 8 and Chrome browsers. I'm using WordPress version 3.5.1 with Thesis theme version 1.8.1. Website is http://sperrymarinefcu.com/

    http://wordpress.org/extend/plugins/promotion-slider/

  2. Joe Nasevich
    Member
    Posted 1 year ago #

    Fixed it! I edited slider.css and changed the .promo_slider class as follows (original CSS is commented out on first line; new CSS follows on next line).


    /* .promo_slider { height:235px; overflow:hidden; position:relative; } */
    .promo_slider { height:235px; overflow:hidden; position:relative; clear:left; }

    Works OK now in Firefox, IE, and Chrome.

  3. Micah Wood
    Member
    Plugin Author

    Posted 1 year ago #

    @jnasevich,

    Great! I came up with an alternate solution since it was your mega menu CSS that seemed to be throwing things off:

    #page #megaMenu { float: none; overflow: hidden; }

  4. Joe Nasevich
    Member
    Posted 1 year ago #

    Actually, my original change didn't quite fix everything. When slider changes to next promotion, menu drop-down is below slider. So I also needed to set z-index less than menu's z-index (100 in my case). So modified CSS in slider.css would be


    .promo_slider { height:235px; overflow:hidden; position:relative; clear:left; z-index:5}

    Micah, I will test your alternate solution as well and let you know if that works.

  5. Joe Nasevich
    Member
    Posted 1 year ago #

    Micah,

    Your alternate solution fixes that alignment issue, but like my original change to .promo_slider, it doesn't address how the Promotion Slider obscures the menu pull downs. To be fair, I hadn't provided my megamenu CSS (I am using UberMenu 2 as my WordPress Mega Menu plugin).


    #megaMenu {
    position:relative;
    line-height:1em;
    overflow:visible;
    zoom:1;
    display:block;
    float:left;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    z-index:100;
    }

    Note that overflow:visible; is what allows submenu items to be displayed. Also note that megamenu z-index is set to 100.

    So I'm sticking with my change to promotion-slider/css/slider.css:

    .promo_slider { height:235px; overflow:hidden; position:relative; clear:left; z-index:5}

    Cheers, and thanks for a great plugin!

  6. Micah Wood
    Member
    Plugin Author

    Posted 1 year ago #

    @jnasevich,

    Glad you found a fix... whatever works. As a side note, overflow: hidden; is just one way of clearing floats. I wasn't thinking too hard when I suggested it, but yes, it would prevent the dropdowns from appearing. A better solution would probably be to apply a clearfix to the #megaMenu div and to simply not float the element. The z-index assigned to the menu should probably be bumped up to 101 so the menus show in front of the slider. I should probably tone down the z-index on the slider as well.

    I intend to do a better job about updating the Promotion Slider plugin more often, which means that future updates to the plugin will cause you to lose your CSS changes if you edit the actual plugin files. As a best practice, you don't want to apply custom css to plugins or themes that might need to be updated. Sure, you can re-apply the changes, but who wants to have to remember which plugins can / can't be updated without requiring additional work?

    It isn't uncommon to recommend that CSS changes be made within the theme, but you still run into the same issues if you have to update your theme. Instead, using a plugin like this makes a lot of sense: http://wordpress.org/extend/plugins/pc-custom-css/

  7. Joe Nasevich
    Member
    Posted 1 year ago #

    Actually, since I'm using Thesis theme, PC Custom CSS plugin isn't necessary. I made my changes in Thesis theme's custom.css file instead. Changes made there survive updates to theme and plugins.

    Thanks for tip though. I will use it in other themes.

  8. rtna
    Member
    Posted 1 year ago #

    It still breaks down the exerpt on the slider when Megamenu is used. Can that be fixed somehow?

  9. Micah Wood
    Member
    Plugin Author

    Posted 1 year ago #

    @rtna,

    This issue has been marked as resolved and was very specific to the CSS on Joe's site. It sounds like your issue is completely different. Can you please create a new thread? Thanks!

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic