/*
 * Fix hamburger navbar on mobile (Bootstrap 3)
 * Tambahkan file ini sebagai css/navbar-mobile-fix.css
 * dan load setelah responsive.css.
 */

@media (max-width: 767px) {
    #main_navbar .navbar-header {
        position: relative;
        min-height: 50px;
    }

    #main_navbar .navbar-header::before,
    #main_navbar .navbar-header::after {
        content: " ";
        display: table;
    }

    #main_navbar .navbar-header::after {
        clear: both;
    }

    #main_navbar .navbar-toggle {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        position: relative;
        z-index: 1001;
        float: right;
        margin: 8px 15px 8px 0;
        padding: 9px 10px;
        background-color: #fff !important;
        border: 1px solid #ccc !important;
        border-radius: 4px;
        box-shadow: none;
    }

    #main_navbar .navbar-toggle:hover,
    #main_navbar .navbar-toggle:focus {
        background-color: #f5f5f5 !important;
        outline: none;
    }

    #main_navbar .navbar-toggle .icon-bar {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        width: 22px;
        height: 2px;
        margin-top: 4px;
        background-color: #333 !important;
        border-radius: 1px;
    }

    #main_navbar .navbar-toggle .icon-bar:first-of-type {
        margin-top: 0;
    }

    #main_navbar .navbar-brand {
        max-width: calc(100% - 65px);
    }

    #main_navbar .navbar-brand img {
        max-width: 100%;
        height: auto;
    }
}