How to make a responsive menu with CSS - SEOCOM - Agencia SEO y Marketing Digital

If you are one of those all-rounder programmers in which no day is the same for you in the work environment and you have to deal with anything from a layout to a WPO, this article is of interest to you.

When we talk about optimising a website we usually think of actions such as improving server resources, minifying files or reducing the size of images. But many times we find that no matter how much we do, the speed is still slow. When this happens we should start looking inside the website and check if the functionalities we are using are useful and if they are optimised.

One of the most common cases and one that is most noticeable in the metrics of the speed meters is the duplication of the header link menus. A high percentage of pages load two menus regardless of the device on which they enter: one for desktop size and another for reduced size (tablet and mobile).

Unify the duplicate menu structure

The first thing to do is to program the HTML code that will divide the menu into blocks:

<header class="header">
    <nav class="navbar navbar-expand-lg fixed-top py-3">
        <div class="container">
            <button type="button" data-toggle="collapse" data-target="#navbar" aria-controls="navbar" aria-expanded="false" class="navbar-toggler navbar-toggler-right"><i class="fa fa-bars"></i></button>
            <div id="navbar" class="collapse navbar-collapse">
                <ul class="navbar-nav ml-auto">
                    <li class="nav-item active">
                        <a href="#" class="nav-link text-uppercase font-weight-bold">Inicio</a>
                    </li>
                    <li class="nav-item"><a href="#" class="nav-link text-uppercase font-weight-bold">Sobre nosotros</a></li>
                    <li class="nav-item"><a href="#" class="nav-link text-uppercase font-weight-bold">Galería</a></li>
                    <li class="nav-item"><a href="#" class="nav-link text-uppercase font-weight-bold">Portfolio</a></li>
                    <li class="nav-item"><a href="#" class="nav-link text-uppercase font-weight-bold">Contacto</a></li>
                </ul>
            </div>
        </div>
    </nav>
</header>

We will then shape it with the styles that will adapt the block to different devices:

.navbar {
   transition: all 0.4s;
   background: #3d5e9b;
}
 
.navbar .nav-link {
   color: white;
}
 
.navbar .nav-link:hover,
.navbar .nav-link:focus {
   color: black;
   text-decoration: none;
}
 
.navbar .navbar-brand {
   color: #fff;
}
 
.navbar.active {
   background: #fff;
   box-shadow: 1px 2px 10px rgba(0, 0, 0, 0.1);
}
 
.navbar.active .nav-link {
   color: #555;
}
 
.navbar.active .nav-link:hover,
.navbar.active .nav-link:focus {
   color: #555;
   text-decoration: none;
}
 
.navbar.active .navbar-brand {
   color: #555;
}
 
@media (max-width: 991.98px) {
   .navbar .navbar-brand,
   .navbar .nav-link {
       color: white;
       padding-left: 50px;
   }
}

For all this to work it is important to have the Boostrap library active in your CMS. If this is not the case you simply add the necessary resources in the HEAD as follows:

<head>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css" rel="stylesheet" />
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/js/bootstrap.bundle.min.js"></script>
</head>

The final result on desktop screens will be:

And on small devices:

In short, if you have basic programming skills, it is relatively easy to adapt a single menu to all devices. In this way you will be getting a better optimisation of your website and a cleaner and more scalable code.