Title: [Plugin: WooCommerce] Navigation menu li elements have no width
Last modified: August 21, 2016

---

# [Plugin: WooCommerce] Navigation menu li elements have no width

 *  [mjlarge](https://wordpress.org/support/users/mjlarge/)
 * (@mjlarge)
 * [12 years, 11 months ago](https://wordpress.org/support/topic/plugin-woocommerce-navigation-menu-li-elements-have-no-width/)
 * 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'></li>");
           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!!!
 * Thank you all so much in advance!!
 * [http://wordpress.org/plugins/woocommerce/](http://wordpress.org/plugins/woocommerce/)

Viewing 1 replies (of 1 total)

 *  Thread Starter [mjlarge](https://wordpress.org/support/users/mjlarge/)
 * (@mjlarge)
 * [12 years, 11 months ago](https://wordpress.org/support/topic/plugin-woocommerce-navigation-menu-li-elements-have-no-width/#post-3982667)
 * Hey guys!
 * Okay, so 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/](http://test-site.paradisemusic.com.au/)
 * Thanks again

Viewing 1 replies (of 1 total)

The topic ‘[Plugin: WooCommerce] Navigation menu li elements have no width’ is closed
to new replies.

## Tags

 * [jquery](https://wordpress.org/support/topic-tag/jquery/)

 * 1 reply
 * 1 participant
 * Last reply from: [mjlarge](https://wordpress.org/support/users/mjlarge/)
 * Last activity: [12 years, 11 months ago](https://wordpress.org/support/topic/plugin-woocommerce-navigation-menu-li-elements-have-no-width/#post-3982667)
 * Status: not resolved

## Topics

### Topics with no replies

### Non-support topics

### Resolved topics

### Unresolved topics

### All topics