CSS Navigations and Menus Components

Horizontal navigation with overflow indicators

This is a simple navigation. When the navigation doesn't have enough space (on mobile for example) the overflow indicators with white gradient (on right and left side) shows up to signalize that the menu is scrollable. In case you don't want those indicators, you can remove them. Don't forget to remove the javascript and CSS for them too. If there is any active item in the menu, it automatically scrolls into the view.

Mobile navigation

Preview HTML HTML (components)

Simple mobile menu that opens after clicking on a hamburger icon.

How to use and modify Stylify CSS components

When you want to use some component do the following:

Copy&Paste component HTML. If you use the components approach, don't forget to copy their definition within the comments. Copy this definition exactly as is into a comment, if you plan to use it in one file or want the whole definition at one place and not in a global config. Otherwise copy the content between stylify-components tags into the Compiler config. Don't forget to copy script tag, if the compoenent has any.
Adjust it to your needs: Change font-size, padding, width, height... Variables like $color can be removed/modified, etc.
Check if you have copied everything necessary. Scripts, Components definition.

In case you don't have any color palette yet, you might want to check out the guide for Material Theme Builder.

Messages

Paginations

Edit this page on Github |

360 ⭐

50% discount on .EU, .ONLINE, .STORE, .TECH, .SITE, .WEBSITE, .SPACE, .FUN domains.
Code DM231Z2LGY