Drop menu not display on mobile.

https://ibb.co/48rPbPY

It works. Thanks.

I tried following the instructions from https://docs.generatepress.com/article/building-simple-mega-menu/ to create a mega menu, but it doesn’t seem to be working. I noticed there’s some other code in the ‘Additional CSS’ section—could there be a conflict between them?

Below is the code that comes with the theme.

/* GeneratePress Site CSS */ /* adds a white border around the entire site on tablet and desktop */

@media (min-width: 769px) {
	body {
		padding: 0 30px 30px;
	}
	
	.site-footer {
		margin-top: 30px;
	}
}

/* woocommercce product page "select options" button size adjustment */

.woocommerce ul.products li.product .button {
    width: 100%;
    text-align: center;
    padding: 3px;
}

/* woocommercce price, option and the description font weight */

body.woocommerce div.product .woocommerce-tabs ul.tabs li a {
    font-weight: 200;
}

.price .woocommerce-Price-amount.amount {
    font-weight: 200;
}

.woocommerce div.product form.cart .variations label {
    font-weight: 200;
}

.wc-pao-addon label.wc-pao-addon-name {
    font-weight: 200;
}

/*woocommerce cart and checkout page font weights*/

table th, table td, table strong, dt,
.woocommerce table.shop_table :is(th, td),
.woocommerce ul#shipping_method .amount,
.woocommerce-error a, 
.woocommerce-info a, 
.woocommerce-message a,
#payment .payment_methods li.wc_payment_method > input[type=radio]:first-child:checked + label,
.woocommerce #payment #place_order, 
.woocommerce-page #payment #place_order {
    font-weight: 200 !important;
}

/* Side bar products titles font weight */

.product_list_widget li a span {
    font-weight: 200;

/* image block drop shadow */

.photo-shadow img {
	box-shadow: 10px 10px 0px rgba(237,235,235,0.8);
}

/* product additional information tabs font styling */

.woocommerce table.shop_attributes th {
	font-size: 16px;
}

.woocommerce table.shop_attributes td p {
	padding: 8px 16px;
	font-size: 16px;
} /* End GeneratePress Site CSS */

Below is the mege menu code found in https://docs.generatepress.com/article/building-simple-mega-menu/,

/* Mega Menu */
	
	
	@media (min-width: 769px) {
    nav .main-nav .mega-menu {
        position: static;
    }

    nav .main-nav .mega-menu > ul {
        position: absolute;
        width: 100%;
        left: 0 !important;
        display: flex;
        flex-wrap: wrap;
    }

    nav .main-nav .mega-menu > ul > li > a {
        font-weight: bold;
    }

    nav .main-nav .mega-menu>ul>li {
        display: inline-block;
        width: 25%;
        vertical-align: top;
    }

    nav .main-nav .mega-menu.mega-menu-col-2>ul>li {
        width: 50%;
    }

    nav .main-nav .mega-menu.mega-menu-col-3>ul>li {
        width: 33.3333%;
    }

    nav .main-nav .mega-menu.mega-menu-col-5>ul>li {
        width: 20%;
    }

    nav .main-nav .mega-menu > ul > li:hover > a,
    nav .main-nav .mega-menu > ul > li:focus > a,
    nav .main-nav .mega-menu > ul > li[class*="current-"] > a,
    nav .main-nav .mega-menu ul ul {
        background-color: transparent !important;
        color: inherit;
    }

    nav .main-nav .mega-menu ul .sub-menu {
        position: static;
        display: block;
        opacity: 1;
        visibility: visible;
        width: 100%;
        box-shadow: 0 0 0;
        left: 0;
        height: auto;
        pointer-events: auto;
        transform: scale(1);
    }

    nav .main-nav .mega-menu ul.toggled-on .sub-menu {
        pointer-events: auto;
    }

    nav .main-nav .mega-menu .sub-menu .menu-item-has-children .dropdown-menu-toggle {
        display: none;
    }
}
	/*End mega menu*/

Hi! When I deleted the first part codes /generatepress…./ and kept the /mega menu…/ codes, it will display like this https://ibb.co/nk6tsG0, this is what we want.

But if I added the first part codes /generatepress…./ and kept the /mega menu…/ codes at the same time, it will display like this: https://ibb.co/34M4h8P, this is NOT what we want.

I think if there may be some problem with the existence of both? Thanks.