app/assets/stylesheets/navbar.scss
// Fixed top navbar
.nav-wrapper{
@extend .fixed;
z-index: 10000;
// transition: all 0.5s ease;
svg {
fill: white;
}
.svg-btn {
height: 42px;
width: 150px;
}
// Transparent navbar for landing page
&.transparent-nav{
background-color: transparent;
box-shadow: none;
transition: all 0.5s ease;
a{
@extend .dark-text;
}
.dropdown-content{
background-color: rgba(255,255,255,0.9);
}
svg {
fill: $dark-text-color;
}
}
// Customised left align menu items
.left{
height: 100%;
width: auto;
margin-left: 2.5rem;
#brand-logo{
width: 184px;
height: 42px;
@media screen and (max-width: 992px){
margin-left: auto;
margin-right: auto;
}
}
@media screen and (max-width: 992px){
position: absolute;
width: 100%;
margin: 0;
}
}
// Customised right align menu items
.right{
margin-right: 1.5rem;
li a {
height: 64px
}
}
.indicator {
background: $secondary-color;
border-radius: 50%;
display: inline-block;
width: 9px;
height: 9px;
padding: 0;
margin: 1px 0 7px 0;
}
}
// Mobile navigation
.button-collapse{
margin-left: 2.5%;
}
.side-nav{
z-index: 10000;
.collapsible-header{
padding: 0px;
width: 100%;
}
.indicator {
background: $secondary-color;
border-radius: 50%;
display: inline-block;
width: 9px;
height: 9px;
padding: 0;
margin: 1px 0 7px 0;
}
}
.drag-target{
width: 5px;
}