omegamma/assets/scss/header.scss

/**
 * Omegamma - Hugo theme for ad5001.eu and related websites.
 * Copyright (C) 2021  Ad5001
 * 
 * This program is free software: you can redistribute it and/or modify
 * it under the terms of the GNU General Public License as published by
 * the Free Software Foundation, either version 3 of the License, or
 * (at your option) any later version.
 * 
 * This program is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 * GNU General Public License for more details.
 * 
 * You should have received a copy of the GNU General Public License
 * along with this program.  If not, see <https://www.gnu.org/licenses/>.
 */

nav {
    font-size: 1.3em;
    height: 3em;
    position: absolute;
    width: 100%;
    font-family: var(--light-font);
    
    .nav-flex {
        display: flex;
        max-width: 99%;
    }
    
    .navbar-brand {
        padding-top: 1em;
        padding-left: 0.5em;
        display: flex;
        
        .icon-brand {
            width: 2.5em;
            height: 2.5em;
            margin-top: -0.7em;
            margin-right: 5px;
        }
    }
    
    .navbar-menu {
        flex: auto;
        display: block;
        width: 2em;
    }
    
    // Links list
    .navbar-list {
        float: right;
        flex: auto;
        display: flex;
        margin-top: 0px;
        list-style-type: none;
        text-transform: uppercase;
        
        li {
            list-style: none;
            
            &.active {
                background-color: var(--primary-color);
            }
            
            &.background a[role=button] {
                background-color: var(--nav-background);
                color: black;
            }
            
            a {
                padding: 1em;
                margin-left: 0;
                display: flex;
            }
        }
    }
}

.menu-with-sub {
    display: block;

    .sub-menu {
        display: none;
        position: absolute;
        padding: 0;
        margin-top: -2px;
    }
    
    &.toggled .sub-menu, &:hover .sub-menu, & .sub-menu:hover {
        display: block;
    }
}

#navbar-toggler {
    border: 0;
    background: none;
    box-shadow: none;
    border-radius: 0px;
    display: none;
    cursor: pointer;
    padding-right: 1em;
    
    img {
        width: 1.9em;
        height: 1.9em;
    }
}

@media screen and (max-width: 700px) {
    #navbar-toggler {
        display: block;
    }
    
    nav.menu-shown {
        position: fixed;
        z-index: 1;
        background: var(--nav-background);
    }
    
    /* positioning for mobile */
    nav .nav-flex {
        display: block;
        max-width: 100%;
    
        .nav-mobile {
            display: flex;
            width: 100%;
    
            .navbar-brand {
                flex: auto;
            }
        }
    
        .navbar-menu {
            height: 100vh;
            width: 100% !important;
            display: none !important;
            background: var(--nav-background);
            
            &.shown {
                display: block !important;
            }
            
            .navbar-list {
                display: block !important;
                width: 100%;
                height: 100%;
                padding-left: 0;
                
                li {
                    width: 100% !important;
                    display: flex;
                    
                    a[role=button] {
                        width: 100%;
                    }
                }
                
                .menu-with-sub {
                    display: block;
                    
                    .sub-menu {
                        margin-left: 1em;
                        display: ruby;
                    }
                }
            }
        }
    }

    /* removing white text from menu with light background */
    nav.menu-shown.text-white [role=button], nav.menu-shown.text-white button {
        color: black;
    }

    nav.menu-shown.text-white .navbar-list li.background {
        background-color: var(--nav-background);
    }
}