Icon and Text position on Menu item

0
I'd like to have a line break between the icon and the text on the menu items, so that the icon appears centrally above the text instead of alongside it. This is what I have in my app: and I'd like it to look more like this: Can anyone help with any CSS that will enable this transformation?
asked
2 answers
3

Hi Cliff,

You can edit the styling in the "_navigationbar.scss" file. If you go into your theme folder > style > Sass > components you can find this file. I was able to accomplish what you wanted by editing the ".glyphicon" class. 

This is the styling I added (i'm no css expert so I would play around with it to make sure its responsive enough for your app)

.glyphicon {
                top: 1em;
                vertical-align: middle;
                font-size: $navtopbar-glyph-size;
                display: block;
                text-align: center;
            }

 

Once you save that and compile it with Koala (or some other SASS compiler) your navigation should look like this

 

Just in case, here is some documentation on how to setup Koala 

https://docs.mendix.com/howto/ux/setup-mendix-ui-framework-with-koala

 

Hope this helps!

answered
0

That worked a treat, thanks for the help :-)

 

answered