mobile sticky menu chatgpt css

/* Reset some default styles */

body, h1, ul {

    margin: 0;

    padding: 0;

}

/* Hide the container by default for larger screens */

.mobile-bottom-menu-container {

    display: none;

}

/* Column styles */

.mobile-bottom-menu-column {

    flex: 1;

    text-align: center;

    margin: 10px;

	outline: none;

}

/* Icon styles */

.mobile-bottom-menu-link {

    text-decoration: none; /* Remove underline from links */

    color: #333; /* Text color for icons */

    display: flex;

    flex-direction: column;

    align-items: center; /* Center text below the icon */

    outline: none; /* Remove the outline on focus/click */

}

.mobile-bottom-menu-icon {

    font-size: 24px; /* Reduce icon size as needed */

	outline: none;

}

.icon-text {

    font-size: 14px; /* Adjust text size as needed */

    margin-top: 5px; /* Add spacing between icon and text */

	outline: none;

}

/* Sticky mobile-bottom-menu at the bottom */

@media (max-width: 768px) {

    /* Hide desktop footer in mobile view */

    #custom-footer {

        display: none;

    }

    /* Wrapper styles */

    .mobile-bottom-menu-wrapper {

        position: relative;

    }

    /* Show the container only on mobile screens */

    .mobile-bottom-menu-container {

        display: flex;

        justify-content: space-between;

        padding-top: 5px; /* Add spacing at the top */

        position: fixed;

        bottom: 0;

        width: 100%;

        background-color: #fff; /* Add a background color if needed */

        z-index: 999; /* Ensure it appears above other content */

		border-top: 1px solid #333; /* Add a top border */

		outline: none;

    }

    .mobile-bottom-menu-column {

        flex-basis: calc(50% - 20px);

		border: none;

		outline:none;

    }

    /* Remove the outline when an anchor is clicked */

    .mobile-bottom-menu-link:focus {

        outline: none;

    }

}