Customize top horizontal menu in mobile

[annashial]

Hi, I am trying to customize the top horizontal menu in mobile.

What I want is to remove the word Categories and put a symbol. But I want to reduce the width of 

<div id="block_top_menu" class="sf-contener clearfix col-lg-12">

because I do not want it to be 100%. But when I reduce its width, the whole div with the menu that is being expanded is reduced.

Is there any way to put it in a separate div and when I click it, the menu will expand in 100% width div?

I tried many ways but I did not manage anything.