Icon and Text position in navigation bar

0
Hi all, I am using Mendix 8.8.1 in the navigation line break between the icon and the text on the navigation items I have used the below code in "_navigationbar.scss" but it doesn’t work  .glyphicon { top: 1em; vertical-align: middle; font-size: $navtopbar-glyph-size; display: block; text-align: center; } Any other ideas, It seems like this need that text below the icon. Can anyone help with any CSS that will enable this transformation?  
asked
2 answers
1

Hi Ragul,

You can achieve this by changing SCSS in  ‘_navigationtree.scss’. Please add the below code in project directory\theme\styles\web\sass\app\helpers\ ‘_navigationtree.scss’ (if helper folder and _navigationtree.scss file doesn't exist in your app folder then create it and make sure to import in ‘_custom.scss’). Make sure to compile your SASS (you can use Calypso)

.mx-navigationtree {
    /* Every navigation item */
    .navbar-inner > ul {
        & > li {
            & > a {
                display: block;
            }
        }
    }
}

 

Hope this helps!

answered
0

Hi Mohammed,
For the default Mendix icons it has working properly ex: Text below the icon. if we add the external icons it remains as it is(ex: icon and text in same line) how to fix this plz advise me.

answered