Remove bullet points from header

[malavkarkar]

I have manually added cart and search button in menu, but for some reason these icons are listed with bullet points. How do I remove these bullet points?

[kory]

Hey, @malavkarkar! Thanks for writing in…do you have some sort of customizations going on with a child theme? For some reason you’re getting some odd / doubled up markup with two search buttons. That would be the first thing we need to solve as to why that is happening. Can you let us know of any customizations you’ve made to your site via a child theme? Thanks!

[malavkarkar]

Yes I’m aware of double search and cart icons, I actually put it there.

I wanted to add these icons in mobile header, next to the logo. So I activated WooCommerce cart menu and search header icon from Theme Options first, and then added this code in JS.

jQuery(document).ready(function($){
$(’.x-nav-wrap.mobile li.x-menu-item-woocommerce’).addClass(‘cart-menu-item-x’).insertAfter(’.x-btn-navbar’);
});

(function($) {
$(’.x-nav-wrap.mobile .x-menu-item-search’).insertAfter(’.x-btn-navbar’);
})(jQuery);

The issue is, these new icons are showing up with bullet points which I want to remove.

[ruenel]

Hello Malav,

You already have the class for the menu items. Simply set the list-style property to “none”:

.x-menu-item-woocommerce,
.x-menu-item-search {
    list-style: none;
}

Hope this helps.

[malavkarkar]

Thanks, that worked!

[tristup]

Hi Malav,

Glad that it worked for you.

Thanks