JezK
Edit File: header.css
.switch input { opacity: 0; width: 0; height: 0; } .slider { position: absolute; cursor: pointer; top: 0; left: 0px; right: 0; bottom: 0; background-color: #ccc; -webkit-transition: .4s; transition: .4s; border-radius: 20px; } .slider:before { position: absolute; content: ""; height: 18px; width: 18px; left: 0px; bottom: -4px; background-color: #ccc; -webkit-transition: .4s; transition: .4s; border-radius: 50%; } input:checked+.slider::before { background: #2f63c8; left: -5px; } input+.slider::before { background: #2f63c8; } input:checked+.slider { background-color: #ccc; } input:focus+.slider { box-shadow: 0 0 1px #2196F3; } input:checked+.slider:before { -webkit-transform: translateX(26px); -ms-transform: translateX(26px); transform: translateX(26px); } .error { color: red; } #subMenu-width { position: relative !important; left: 0; width: 60px !important; padding: 0; } .width-main { width: 60px !important; padding: unset !important; overflow: visible; } .width-main li { width: unset!important; } li.list-item.menu-item-has-children.dropdown.width-main ul li { width: 60px!important; padding: 6px 0 9px 0px; display: block; } #subMenu-width li a { padding: 0 0px 0 8px !important; } #subMenu-width li.active { background-color: unset !important; } .down-icon { color: #d4dae9 !important; font-size: 17px !important; vertical-align: middle; } .width-main a.active { border-radius: 14px !important; } /* */ .switch { position: relative; display: inline-block; width: 45px; height: 10px; vertical-align: bottom; } .slider { position: absolute; cursor: pointer; top: 0; left: 4px; right: 0; bottom: 0; background-color: #ccc; -webkit-transition: .4s; transition: .4s; } .slider:before { position: absolute; content: ""; height: 20px; width: 20px; left: 0px; top: -5px; bottom: 0px; background-color: white; -webkit-transition: .4s; transition: .4s; } #toggle:checked+.slider { background-color: #2196F3; } #toggle:focus+.slider { box-shadow: 0 0 1px #2196F3; } #toggle:checked+.slider:before { -webkit-transform: translateX(26px); -ms-transform: translateX(26px); transform: translateX(26px); } /* Rounded sliders */ .slider.round { border-radius: 34px; } .slider.round:before { border-radius: 50%; } /* #toggle must be visible for before and after elements. Relative used for absolute position of children */ .switch #toggle { position: relative; } /* Set text on before and after elements */ #toggle::before, #toggle::after { font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 30px; } #toggle::before { position: absolute; left: 50px; bottom: 0; content: 'student'; } #toggle::after { position: absolute; right: 50px; bottom: 0; content: 'teacher'; } /* Change colors based on checked status */ #toggle:checked::before { color: green; } #toggle:checked::after { color: grey; } #toggle:not(:checked)::before { color: grey; } #toggle:not(:checked)::after { color: green; } .card-body { cursor: pointer; }