How to change background color of text field on clicking?

0
Hi Team, As per the attached snapshot, background color of sidebar navy blue but once i click on one of menu background color of that text should change. how can i acheive this?      
asked
2 answers
0

If the user navigates to a page via the Menu / Project navigation that element will get the class “active” (Mendix does this for you).
To change the color you will need to change the properties of the active class on navigation elements in SCSS.

 

There are some good learning paths about styling your app:

Style your App with CSS

answered
0

Hi Prajakta Vathare!

 

To achieved this you need to change the styling of the sidebar. You need to copy the default sidebar from the core to a custom file(.scss) or the main.scss file.  

I’m going to show you an example:

.region-sidebar {
    .mx-navigationtree {
            li.mx-navigationtree-has-items {
                & > ul {
                    background-color: $navsidebar-sub-bg;
                    li {
                        a {
                            color: $navsidebar-sub-color;
                            background-color: $navsidebar-sub-bg;
                            font-size: $navsidebar-sub-font-size;
                            &:hover,
                            &:focus,
                            &.active {
                                color: $navsidebar-sub-color-hover;
                                background-color: $navsidebar-sub-bg-hover;
                            }
                            &.active {
                                color: $navsidebar-sub-color-active;
                                background-color: $navsidebar-sub-bg-active;
                            }
                        }
                        ul{
                            li{
                                a{
                                    text-align: center;
                                     background-color: #a9b4cb;
                                &:hover,
                                &:focus,
                                &.active {
                                    background-color:#ced4e1
                                }
                                &.active {
                                    background-color: #ced4e1
                                }
                                }
                                
                            }
                        }
                    }
                }
             }
    }
}

In this example if you want to change the color when you click the button you need to modify the styles for these rules: .&hover .&focus .&active.

I hope this can help you!

answered