Close

Bulb Style Navigation Menu

This is an example of a bulb style navigation menu that changes the background color accordingly, designed using HTML, CSS, JavaScript, and Bootstrap framework 4. The fonts and CSS styles are imported to the code with their URLs. JavaScript functions have been used to implement the active status of the navigation bar. The colors used in the form are predefined as $blue:#3498db, $orange:#e67e22, $green:#1abc9c, and $red:#e74c3c. The body of the form is given a font-family style 'Open Sans', sans-serif, font-weight as 600, whereas the background color is set to change to the above mentioned colors according to the selected navigation item. The header title of the form has the styles of color as rgba(255,255,255,.9), margin-top as 30vh, font-weight as 100, text-align as center, font-size as 55px, line-height as 1.5, background as rgba(0,0,0,.1), and padding as 0px 0 20px 0. The navigation items have the styles of width as 25%, text-align as center, padding as 25px 20px, and font color as rgba(255,255,255,.3), which changes its font color to #fff, in a hover event. Source: https://codepen.io/soulrider911/pen/zGmYQK

Post Comment or Questions

Lorem ut labore et dolore magna aliqua. Ut enim ad minim veniam.

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Several Related Snippets

Lorem ut labore et dolore magna aliqua. Ut enim ad minim veniam.