|
Tags: Blanking Manual revert |
| Line 1: |
Line 1: |
| #hamburger-menu {
| |
| display: none;
| |
| }
| |
|
| |
|
| @media (max-width: 768px) {
| |
| #hamburger-menu {
| |
| display: inline-block;
| |
| }
| |
| .vector-main-menu {
| |
| display: none;
| |
| background-color: #007BFF; /* Customize background color */
| |
| position: absolute;
| |
| top: 40px; /* Adjust to fit your design */
| |
| left: 0;
| |
| width: 100%;
| |
| padding: 10px 0;
| |
| z-index: 100;
| |
| }
| |
| .vector-main-menu li {
| |
| text-align: center;
| |
| padding: 10px;
| |
| border-top: 1px solid #fff;
| |
| }
| |
| .vector-main-menu li a {
| |
| color: white; /* Menu link color */
| |
| text-decoration: none;
| |
| font-size: 18px;
| |
| }
| |
| }
| |
|
| |
| /* Make sure the hamburger menu only shows on mobile */
| |
| #hamburger-menu {
| |
| display: none;
| |
| }
| |
|
| |
| @media (max-width: 768px) {
| |
| #hamburger-menu {
| |
| display: inline-block; /* Display the button on mobile */
| |
| }
| |
|
| |
| /* Initially hide the menu */
| |
| .vector-main-menu {
| |
| display: none;
| |
| background-color: #007BFF; /* Background color of the menu */
| |
| position: absolute;
| |
| top: 50px; /* Adjust this if necessary */
| |
| left: 0;
| |
| width: 100%;
| |
| padding: 10px 0;
| |
| z-index: 100;
| |
| }
| |
|
| |
| /* Style the menu items */
| |
| .vector-main-menu li {
| |
| text-align: center;
| |
| padding: 10px;
| |
| border-top: 1px solid #fff;
| |
| }
| |
|
| |
| .vector-main-menu li a {
| |
| color: white;
| |
| text-decoration: none;
| |
| font-size: 18px;
| |
| }
| |
|
| |
| /* Add a class to make the menu visible when clicked */
| |
| .menu-visible {
| |
| display: block;
| |
| }
| |
| }
| |
