Creating a custom menu with different styling and icons

How can one go about creating a custom menu (different from that you get out of the box with mendix). For example if a designer went about and designed a menu that is different to that of mendix. Currently I have opted to use a blank layout to which I have create a menu document and a navigation tree. The problem is the styles are not what we want and there is a lot of padding and margins applied by force – which is not needed based on the design.  I did try to remove the padding by providing some values in “appearance” but nothing takes effect. This class .mx-layoutgrid and other classes e.g col-lg col-md-12 col-12 do apply the padding. Is there also a way of using custom icons. To achieve do I as a dev need to either build a custom widget using vs code and other tools (observed in one of the tutorials).
1 answers

For style adjustments like margins, paddings and color etc. you can define your own CSS classes. If you are new to CSS, then please have some beginner level course of CSS. Then you can customize your page styling in Mendix by applying your own CSS classes to different page elements. 
Check this link in docs

Custom icons can be added. To use images/icons in Mendix, you need to import them in image collections and use image viewer to display them.
If you want to control it from CSS, you can place your images in your project directory theme folder. And set images/icons with CSS background-image property