How can I create a centered responsive menu

June 1, 2022

I have some troubles creating a menu that has 4 items and should be be centered beside each other with a gap between them, and if on mobile device be stacked on each other. The menu should look like the image here…

Can someone please show how this can be achieved?

>Solution :

It is possible to do so, just with a ul list and few lines of CSS:

<!DOCTYPE HTML>

<html>

    <head>
        <style>

            * {
                margin: 0;
                padding: 0;
            }
            .menu {
                list-style-type: none;
                width: 100%;
                text-align: center;
            }
            .menu li {
                text-align: center;
                display: inline-block;
                padding: 8px 16px;
                margin: 8px 8px;
                background-color: rgba(0, 0, 255, 0.336)
            }

            @media only screen and (max-width: 600px) {
            
                .menu li {
                    display: block;
                }

            }

        </style>
    </head>

    <body>
        
        <ul class="menu">
            <li>Menu1</li>
            <li>Menu2</li>
            <li>Menu3</li>
            <li>Menu4</li>
        </ul>

    </body>

</html>