WordPress.org

Ready to get started?Download WordPress

Forums

WooCommerce - excelling eCommerce
Navigation menu li elements have no width (3 posts)

  1. mjlarge
    Member
    Posted 11 months ago #

    I am using WordPress 3.5.2 and WooCommerce 2.0.13 and have built the majority of a site I am working on, yet have to come to implementing a PayPal portal for a selection of products the clients need to have on offer.

    With the main navigation menu that I have placed in the header I have included a sliding line below the menu items to denote which of them is the active item. I also have an AJAX reloader in place so I have a number of click functions (not all shown) to ensure that correct active element is always selected.

    Please see the code below:

    var $el, leftPos, newWidth,
        $mainNav = $("#menu-header-menu");
    
        $("#menu-header-menu a").click(function() {
        $(this).parent().siblings().removeClass("current_page_item");
        $(this).parent().addClass("current_page_item");
        $activeLine
        .width($(".current_page_item").width())
        .css("left", $(".current_page_item a").position().left)
        .data("origLeft", $activeLine.position().left)
        .data("origWidth", $activeLine.width());
        });
    
        $mainNav.append("<li id='active-line'>");
        var $activeLine = $("#active-line");
    
        $activeLine
        .width($(".current_page_item").width())
        .css("left", $(".current_page_item a").position().left)
        .data("origLeft", $activeLine.position().left)
        .data("origWidth", $activeLine.width());
    
         $("#menu-header-menu li a").hover(function() {
        $el = $(this);
        leftPos = $el.position().left;
        newWidth = $el.parent().width();
        $activeLine.stop().animate({
            left: leftPos,
            width: newWidth
        });
         }, function() {
        $activeLine.stop().animate({
            left: $activeLine.data("origLeft"),
            width: $activeLine.data("origWidth")
        });
        });

    and CSS

    #menu-header-menu {
            margin: 0 auto;
            list-style: none;
            position: relative;
            width: 960px;
        }
    
        #menu-header-menu li {
            display: inline;
        }
    
        #menu-header-menu li a {
            color:#C8C8C8;
            display: block;
            float: left;
            padding: 6px 15px 4px 15px;
            font-size: 14px;
            font-weight: 700;
            line-height: 22px;
            transition: color 0.6s ease-in 0s;
        }
    
        #active-line {
            position: absolute;
            bottom: 2px;
            left: 0;
            width: 100px;
            height: 1px;
            background: white; }

    This all works perfectly until I activate the WooCommerce plugin. At this point the function to the retrieve the 'width' of the ".current_menu_item" returns a value of 0, while the 'left' value of ".current_menu_item a" continues to work normally. Looking at the site in Firebug I can see that #active_line is still being appended and the 'left' value continues to be updated and animated as per the code, the 'width' value, however, continues to stay at 0.

    The issue seems to be the width value of li elements only, because if I change the selectors in the jQuery to retrieve the width of the ".current_page_item a" element (or "#menu-header-menu li a" for the hover function) the jQuery starts to return a positive 'width' value, albeit not the one I want!

    I can also force the '#menu-header-menu li' elements to have a width value by adding:

    #menu-header-menu li {
            width: 100px !important;
        }

    The strange thing is (or maybe it's not strange, because I can't work out why it is doing it!), is that the 'width' value continues to be stuck at 0 even when I disable the jQuery scripts and css file from WooCommerce.

    I have a number of other plugins that are working fine with my code, and I have no idea what this is!!!

    I managed to get in contact with the guys that put together the temporary site and have uploaded what I have done to a subdomain there. Please have a look at: http://test-site.paradisemusic.com.au/

    Thank you all so much in advance!!

    http://wordpress.org/plugins/woocommerce/

  2. Roy Ho
    Member
    Posted 11 months ago #

    I highly doubt your issue is from WooCommerce per your description.

  3. mjlarge
    Member
    Posted 11 months ago #

    @splashingpixels.com I would be more than happy for the problem not to be caused by WooCommerce, but the issue starts and stops when I activate the WooCommerce plugin. I just don't know what else it could be, but I am by no means an expert which is why I am asking. The site has numerous other plugins, jQuery scripts etc, there are lots of other variables, but the WooCommerce activation is catalyst for the problem.

    Obviously I am not saying that it is a "fault", per se, with WooCommerce. I would just love to know what is causing the behaviour!

Reply

You must log in to post.

About this Plugin

About this Topic