The navigation bar is flexible and divided to 3 sections, left, right and center,
this allows users to interchange between standard logo leftside with menu middle
and right side versus logo centered and menu left and right sides. There is also
a smartphone version navbar that would resize and realign all item
Class:
.navbar
Flex row wrap display that occupies 100% of screen width
.navbar-logo
The logo occupies 10% of the flex basis, and nav links occupy another 90% of flex basis.
If there is no navbar-logo, than it out and change .nav-item flex-basis to 100%
.nav-img
The image height will be 70%
.nav-item
The nav items or nav links will occupy 90% of flex basis and be aligned to the center height
with the logo
.nav-item ul, li, a, a:hover
The state between a to a:hover is transformed in term of color text and letter spacing
.nav-[ alignment: left | right | center ]
Allows user to to divide navigation bar in 3 sections
Dropdown
Dropdown menu is set to have a background color of lettuce with shadow on
the dropdown menu edge, and menu text color to be dark green kale and
change to be tomatoe when hovering.
Dropdown class
.dropdown-content
Contains all the dropdown navigation links with preset lettuce colored
background and shadow around the edge.
.dropdown-content a
The navigation links with a preset of kale colored letter and aligned
to the left of the dropdown box.
.dropdown-content a:hover
When hovering over dropdown menu navigation link the color changes to be tomatoe