Create an id for a list item

[theleanbox]

I am trying to align the Woocommerce cart to the right of the nav bar. The way I am doing it is needs a new id for the li tag already created by the theme. How can I create a new one so I can FINNALY write the code I need in the global css to finish what I need.

<nav class="x-nav-wrap desktop" role="navigation">
  <ul id="menu-top-menu" class="x-nav"><li id="menu-item-20" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-20"><a href="https://theleanboxexpress.pboyxnn4-liquidwebsites.com/"><span>Home</span></a></li>
<li id="menu-item-21" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-21"><a href="https://theleanboxexpress.pboyxnn4-liquidwebsites.com/about/"><span>About</span></a></li>
<li id="menu-item-23" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-23"><a href="https://theleanboxexpress.pboyxnn4-liquidwebsites.com/contact/"><span>Contact</span></a></li>
<li id="menu-item-91" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-91"><a href="https://theleanboxexpress.pboyxnn4-liquidwebsites.com/shop/"><span>Shop</span></a></li>
<li class="menu-item current-menu-parent x-menu-item x-menu-item-woocommerce" id="test"><a href="https://theleanboxexpress.pboyxnn4-liquidwebsites.com/cart/" class="x-btn-navbar-woocommerce"><div class="x-cart outer-inner inline rounded"><span class="outer"><span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">$</span>0.00</span></span><span class="inner"><span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">$</span>0.00</span></span></div></a></li></ul></nav>

Under chrome dev I created the id that equals to test in the 5th li tag. This is what I need to do so I can edit that id in the global css.

SITE: https://theleanboxexpress.pboyxnn4-liquidwebsites.com

If there is an easier way and I am over thinking it please let me know.

Thanks!!!

[christopher]

Hi Dayana,

Adding a new ID to the li tags will need the installation of a Child Theme and lots of PHP files override. I suggest that you use the location-based CSS code. So for the fifth li element, you will need to add a CSS selector like this:

#menu-top-menu li:nth-child(5) {
/* Add your CSS code here. */
}

I suggest that you read this article for more information about the method I mentioned.

Thank you.