What is the best way to ensure that <div> elements adapt well within a <nav> element to be responsive?

Question

What is the best way to ensure that <div> elements adapt well within a <nav> element to be responsive?

While creating a dashboard page for a bot, I encountered an issue where the page looked great on desktop but lacked responsiveness on mobile devices.

Here's how the page looked on desktop:

https://i.sstatic.net/ADsXv.jpg

And here's how it appeared on mobile devices:

https://i.sstatic.net/DTTuC.png

Here's a snippet of the HTML code for the page:

HTML

<html>
    <head>
        <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="44262b2b30373036253404716a746a76">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
        <link id="theme" href="/static/css/light.css" aria-labelledby="dark" rel="stylesheet">
        <link href="/static/css/main.css" rel="stylesheet">
        <title>Steve.</title>
    </head>
    <body>
        <nav class="navbar navbar-expand-lg text-div">
            <div class="container">
                <ul class="nav navbar-nav navbar-left">
                    <a href="/"><img id="navbar_dicord_brand" src="/static/images/discord_logo_black.svg" width="120" height="60"></a>
                </ul>
               
                ... (code continues)
                
            </div>
        </nav>
        <div class="body_container">
            <div>
                
                ... (code continues)
                
            </div>
        </div>

        <footer class="footer">
            <div class="container-fluid text-center text-md-left">
                <div class="row">

                ... (code continues)

            </div>
        </footer>
    </body>
    <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="52303d3d26212620332212677c627c60">[email protected]</a>/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
</html>

... (additional code continuation)

html css bootstrap-5

Answer 1

Answer №1

This example serves as a guide... However, prior to proceeding...

Include the

<meta name="viewport" content="width=device-width, initial-scale=1.0">

tag in the head section of your code -> Viewport Meta Tag.

Avoid using the <center> element for content centering:

The usage of this feature is no longer encouraged. While some browsers may still support it, it could have already been excluded from relevant web standards, be in the process of being phased out, or retained solely for compatibility purposes. It's recommended to refrain from utilizing it and update any existing code when feasible; consult the compatibility table at the end of this page to inform your decision. Please note that this functionality might cease functioning at any time.

source: MDN - Center Element

Utilize the flexbox, grid, or positioning property -> Center Anything is CSS.

In your code (specifically in the navbar), certain elements lack a closing tag.

The Code:

Open the code snippet in full screen and adjust the window size accordingly.

var burger = document.querySelector('.burger');
var list_container = document.querySelector('.list-container');

burger.addEventListener('click', () => {
    list_container.classList.toggle('active');
});

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

ul {list-style-type: none;}
a {text-decoration: none;}

.navbar-container {
    width: 100%;
    padding: 0 15px;
    margin: 0 auto;
    position: relative;
}

body {
    font-family: Arial, Helvetica, sans-serif;
}

@media (min-width: 576px) {.navbar-container {max-width: 100%;}}
@media (min-width: 768px) {.navbar-container {max-width: 760px;}}
@media (min-width: 992px) {.navbar-container {max-width: 960px;}}
@media (min-width: 1200px) {.navbar-container {max-width: 1180px;}}

header {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: #fafafa;
    border: 1px solid #eee;
    height: 80px;
    z-index: 999;
}

.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100%;
}

.logo-container a:link, 
.logo-container a:visited {
    display: flex;
    justify-content: center;
    align-items: center;
    color: #151515;
}

.logo-container ion-icon {
    color: #151515;
    margin-right: 5px;
    font-size: 40px;
}

.logo-container span {
    font-size: 30px;
}

.list-container {
    transition: all 0.2s;
}

.list-container.active {
    transform: translateX(0);
}

.list-container ul {
    display: flex;
}

.list-container ul li {
    margin: 0 15px;
}

.list-container ul li a:link,
.list-container ul li a:visited,
.brand-container a:link,
.brand-container a:visited {
    color: #151515;
    font-weight: 600;
    font-size: 20px;
}

.burger {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 20px;
    display: none;
}

.burger span {
    display: block;
    width: 30px;
    height: 4px;
    background-color: #121212;
}

.burger span:not(:last-of-type) {
    margin-bottom: 5px;
}

@media screen and (max-width:992px){
    .list-container ul li a:link,
    .list-container ul li a:visited {
        font-size: 18px;
    }
}

@media screen and (max-width:768px){
    body {
        overflow-x: hidden;
    }
    .burger {
        display: block;
    }
    .brand-container {
        display: none;
    }
    .list-container {
        position: fixed;
        width: 100vw;
        height: 100vh;
        background-color: #fafafa;
        top: 80px;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: -1;
        transform: translateX(-100%);
    }
    .list-container ul {
        flex-direction: column;
        padding: 20px 10px;
    }
    .list-container ul li {
        margin: unset;
    }
    .list-container ul li {
        margin: 0 0 30px 0;
    }
}

<script type="module" src="https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="137a7c7d7a707c7d6053263d273d23">[email protected]</a>/dist/ionicons/ionicons.esm.js"></script>

<header>
    <nav class="navbar navbar-container">
        <div class="logo-container">
            <a href="#">
                <ion-icon name="logo-discord"></ion-icon>
                <span>Discord</span>
            </a>
        </div>
        <div class="list-container">
            <ul class="list">
                <li><a href="#">Commands</a></li>
                <li><a href="#">Invite</a></li>
                <li><a href="#">Support Server</a></li>
                <li><a href="#">Patreon</a></li>
            </ul>
        </div>
        <div class="brand-container">
            <a href="#">
                <img src="..." alt="...">
                <span>Steve</span>
            </a>
        </div>
        <div class="burger">
            <span></span>
            <span></span>
            <span></span>
        </div>
    </nav>
</header>

Answer 2

This example serves as a guide... However, prior to proceeding...

Include the

<meta name="viewport" content="width=device-width, initial-scale=1.0">

tag in the head section of your code -> Viewport Meta Tag.

Avoid using the <center> element for content centering:

The usage of this feature is no longer encouraged. While some browsers may still support it, it could have already been excluded from relevant web standards, be in the process of being phased out, or retained solely for compatibility purposes. It's recommended to refrain from utilizing it and update any existing code when feasible; consult the compatibility table at the end of this page to inform your decision. Please note that this functionality might cease functioning at any time.

source: MDN - Center Element

Utilize the flexbox, grid, or positioning property -> Center Anything is CSS.

In your code (specifically in the navbar), certain elements lack a closing tag.

The Code:

Open the code snippet in full screen and adjust the window size accordingly.

var burger = document.querySelector('.burger');
var list_container = document.querySelector('.list-container');

burger.addEventListener('click', () => {
    list_container.classList.toggle('active');
});

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

ul {list-style-type: none;}
a {text-decoration: none;}

.navbar-container {
    width: 100%;
    padding: 0 15px;
    margin: 0 auto;
    position: relative;
}

body {
    font-family: Arial, Helvetica, sans-serif;
}

@media (min-width: 576px) {.navbar-container {max-width: 100%;}}
@media (min-width: 768px) {.navbar-container {max-width: 760px;}}
@media (min-width: 992px) {.navbar-container {max-width: 960px;}}
@media (min-width: 1200px) {.navbar-container {max-width: 1180px;}}

header {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: #fafafa;
    border: 1px solid #eee;
    height: 80px;
    z-index: 999;
}

.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100%;
}

.logo-container a:link, 
.logo-container a:visited {
    display: flex;
    justify-content: center;
    align-items: center;
    color: #151515;
}

.logo-container ion-icon {
    color: #151515;
    margin-right: 5px;
    font-size: 40px;
}

.logo-container span {
    font-size: 30px;
}

.list-container {
    transition: all 0.2s;
}

.list-container.active {
    transform: translateX(0);
}

.list-container ul {
    display: flex;
}

.list-container ul li {
    margin: 0 15px;
}

.list-container ul li a:link,
.list-container ul li a:visited,
.brand-container a:link,
.brand-container a:visited {
    color: #151515;
    font-weight: 600;
    font-size: 20px;
}

.burger {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 20px;
    display: none;
}

.burger span {
    display: block;
    width: 30px;
    height: 4px;
    background-color: #121212;
}

.burger span:not(:last-of-type) {
    margin-bottom: 5px;
}

@media screen and (max-width:992px){
    .list-container ul li a:link,
    .list-container ul li a:visited {
        font-size: 18px;
    }
}

@media screen and (max-width:768px){
    body {
        overflow-x: hidden;
    }
    .burger {
        display: block;
    }
    .brand-container {
        display: none;
    }
    .list-container {
        position: fixed;
        width: 100vw;
        height: 100vh;
        background-color: #fafafa;
        top: 80px;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: -1;
        transform: translateX(-100%);
    }
    .list-container ul {
        flex-direction: column;
        padding: 20px 10px;
    }
    .list-container ul li {
        margin: unset;
    }
    .list-container ul li {
        margin: 0 0 30px 0;
    }
}

<script type="module" src="https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="137a7c7d7a707c7d6053263d273d23">[email protected]</a>/dist/ionicons/ionicons.esm.js"></script>

<header>
    <nav class="navbar navbar-container">
        <div class="logo-container">
            <a href="#">
                <ion-icon name="logo-discord"></ion-icon>
                <span>Discord</span>
            </a>
        </div>
        <div class="list-container">
            <ul class="list">
                <li><a href="#">Commands</a></li>
                <li><a href="#">Invite</a></li>
                <li><a href="#">Support Server</a></li>
                <li><a href="#">Patreon</a></li>
            </ul>
        </div>
        <div class="brand-container">
            <a href="#">
                <img src="..." alt="...">
                <span>Steve</span>
            </a>
        </div>
        <div class="burger">
            <span></span>
            <span></span>
            <span></span>
        </div>
    </nav>
</header>

Answer 3

Answer №2

Employing flexbox in combination with @media queries can greatly benefit your web layout. Consider adjusting the flex-direction from row to column for mobile devices. Happy coding! :)

Answer 4

Employing flexbox in combination with @media queries can greatly benefit your web layout. Consider adjusting the flex-direction from row to column for mobile devices. Happy coding! :)

What is the best way to ensure that <div> elements adapt well within a <nav> element to be responsive?

Answer №1

The Code:

Answer №2

Similar questions

Issues encountered when trying to implement a Navbar drop-down menu using Angular in conjunction with Bootstrap 4

Watching for changes to an object's value in an AngularJS service triggered by a controller from a separate module (Extended Edition)

Creating an image using tiles in HTML

Tips for generating a new div for every iteration:

Issue with Bootstrap 3: Element refuses to remain within the defined width of the div container

Discussing the use of local identification within a <BASE> tag in SVG specifically on the Firefox browser

Is it possible to alter the background color once the content of an input field has been modified?

Ways to vertically align a div in Bootstrap 4?

Ways to pass scope between the same controller multiple times

The bootstrap modal display issue: black background visible

What is the best way to style only textboxes with CSS without affecting other input types such as checkboxes?

Incorporating CSS code directly into a PHP webpage instead of linking to an external CSS

Listen for an event on a button to show a specific div

Aligning Text to the Right Using CSS

Tips on positioning a button "above" the carousel-control-next icon

Adjusting the position of an element when the width of its parent div shifts

Updating CSS class within a div tag utilizing ASP.NET (C#)

AngularJS: Showcase HTML code within ng-view along with its corresponding output displayed in a navigation format such as Html, Css, JS, and Result

A beginner's guide to retrieving random names and images from JSON data for every object using JavaScript

Tips for incorporating Bootstrap classes into a React project, setting the className attribute to an empty string