/** Setting the main header background strip at the top
* * position - This will fix the header at the top even while scrolling */
site-header
position: fixed width: 100% height: 110px background: $color-custom-secondary /** The vegburger toggle box and the mobile expanded mode * header background div are turned off for the moment */ #header-vegburger-toggle, #mobile-header-extended-background display: none /** The main navigation control container holds the logo * and navigation icons * * max-width - The navgiation container won't expand beyond 1012px * margin - Set to auto to center the container inside the header */ #header-nav-container width: 85% height: 100% max-width: 1012px margin: auto /** Setting up the site's logo text * * margin - Removing the default margins set in the standard overrides * line-height - Vertically aligns the text (by setting to height of the div) */ #logo-text float: left width: 320px height: 100% margin: auto line-height: 110px font-weight: 700 font-size: 3rem /** Couldn't change the color of the text from the parent h1 tag for some * reason */ a color: $color-white &:hover a color: $color-light-grey /** The vegburger icon is turned off for the moment * * user-select - Stops highlighting the vegburger icon when selected */ #vegburger display: none user-select: none /** Setting up the sub container which holds the navigation icons and menu */ #header-nav-menu-icons-container float: right width: 300px height: 100% /** Handling the individual menu items * * float - Not sure why this is required, without it the menu * items overflow from the container */ .header-nav-menu-item float: left width: 75px height: 110px &:hover /** Moves the menu icon up when the mouse hovers over the menu item */ .header-nav-menu-icon position: relative bottom: 10px /** Displays the menu name when the mouse hovers over the menu item */ .header-nav-menu-text display: block /** Sets up the navigation icon * * margin - Set to auto to center the icon inside the div * fill - Gives a color to the svg icon */ .header-nav-menu-icon width: 60% height: 100% margin: auto fill: $color-white /** Sets up the menu name text * * position - Set to relative to move the text inside the menu-icon * display - Sets the text to none until mouse hover * bottom - Offset required to move the text so that it overlaps * with the menu icon */ .header-nav-menu-text display: none position: relative bottom: 33px width: 100% height: 30% margin: 0px text-align: center font-size: 14px color: $color-white
/**
* Since the header is positioned to be fixed, the content in the page * can slip behind the header at the top as one scrolls down. * So, a header-spacer is required to make the content * appear after the header at the top. */
.header-spacer
height: 110px
@media screen and (max-width: 768px)
/** Changing the header size */ #site-header height: 80px /** When the vegburger icon is pressed, it sets the toggle (checkbox) * input to checked. This triggers the nav bar to go into the expanded * mode in mobile devices * * display - The flat black background is made visible * position - Fixed so that it moves with the header until it is closed * height & width - vh and vw allows for the background to be set to * the height and width of the viewport * z-index - Puts the background behind the logo and vegburger icon in DOM * stack */ #header-vegburger-toggle:checked + #mobile-header-extended-background display: block position: fixed z-index: 1 width: 100% height: 100% width: 100vw height: 100vh background-color: $color-custom-secondary /** On toggle behind checked, the menu icons and text need to be * shown in mobile devices. */ #header-vegburger-toggle:checked + #mobile-header-extended-background + #header-nav-container /** Resetting the height to make the container ready to hold * header-nav-menu-icons-container */ height: 500px position: relative z-index: 1 /** Resets the height of the logo text */ #logo-text height: 80px /** The navigation icons can now be showed */ #header-nav-menu-icons-container display: block width: 100% height: 300px /** The menu items now need to appear like in a list * under the main header * * border-top: Demarcation between the menu items */ .header-nav-menu-item display: block width: 100% height: 50px margin: 10px 0px 10px 0px border-top: 1px solid $color-secondary /** Sets the menu icon */ .header-nav-menu-icon position: static float: left width: 35px height: 100% /** Sets the menu text */ .header-nav-menu-text display: block position: static float: right width: 80% height: 100% text-align: left font-size: 20px line-height: 50px /** Sets up the initial look for the header-nav-container */ #header-nav-container #logo-text width: 200px font-size: 2rem line-height: 80px /** Setting up the vegburger icon * * cursor - Turns the cursor to a pointer while hovering over the icon */ #vegburger display: block float: right width: 30px height: 80px margin: 0px line-height: 80px text-align: center font-size: 2.5rem color: $color-white cursor: pointer /** Icons are not displayed until the vegburger is selected */ #header-nav-menu-icons-container display: none /** Resetting the header-spacer height to match new header's height */ .header-spacer height: 80px