Home > database >  prevent line wrap by making elements disappear with d-none bootstrap
prevent line wrap by making elements disappear with d-none bootstrap

Time：01-23

I'm building a responsive website that contains a topbar menu. This menu has lots of options, which is great for a big screen display. Unfortunately, for smaller viewports, such as cellphones, all those options don't fit, and the buttons end up wraping.

normal viewport: enter image description here

cellphone: enter image description here

This is the snippet code:

<header  id="header">

        <div  id="toggle-up"> <i  id="header-toggle"></i></div>

        <div id="nav-buttons" >

            <div >
                <div >
                    <span >Level 1</span>
                </div>
                <div  style="width: 100px; height: 5px;">
                    <div  style="width: 70%;" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
                </div>
            </div>
            
            

            <button ><i ></i></button>

            <button ><i ></i></button>

            <div >
                <button  type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
                  <span >TC</span>
                  <span>0.00</span>
                </button>
                <ul  aria-labelledby="dropdownMenuCoins">
                  <li><a  href="#">Action</a></li>
                  <li><a  href="#">Another action</a></li>
                  <li><a  href="#">Something else here</a></li>
                </ul>
            </div>

            <a type="button" >Deposit</a>
        </div>
</header>

To try to circumvent the problem, I decided to make some of the menu elements disappear on smaller viewports, using the bootstrp5 combination d-none d-flex-sm classes (enter image description here

Does any one have an idea of how we can solve this issue?

Full code:

HTML:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />

    <link href="./css/custom.css" rel="stylesheet">
    <link href="./css/navlayout.css" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/boxicons@latest/css/boxicons.min.css" rel="stylesheet">

    <script defer src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
    <script defer src="./js/navlayout.js"></script>
    <script defer src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/js/all.min.js" crossorigin="anonymous"></script>

    <link rel="icon" href="./img/icon.png" />

    <title>Vegaz.bet</title>
</head>

<body id="body-pd" style="background: url('./img/Home e Roleta.png') no-repeat center center fixed; background-size: cover;">
    <header >
        <div ></div>
    </header>
    <header  id="header">

        <div  id="toggle-up"> <i  id="header-toggle"></i></div>

        <div id="nav-buttons" >

            <div >
                <div >
                    <span >Level 1</span>
                </div>
                <div  style="width: 100px; height: 5px;">
                    <div  style="width: 70%;" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
                </div>
            </div>
            
            

            <button ><i ></i></button>

            <button ><i ></i></button>

            <div >
                <button  type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
                  <span >TC</span>
                  <span>0.00</span>
                </button>
                <ul  aria-labelledby="dropdownMenuCoins">
                  <li><a  href="#">Action</a></li>
                  <li><a  href="#">Another action</a></li>
                  <li><a  href="#">Something else here</a></li>
                </ul>
            </div>

            <a type="button" >Deposit</a>
        </div>
    </header>
    <div  id="nav-bar">
        <nav >
            <div>
                <div >
                    <a href="#" > <i ></i> <span >Crash</span> </a>
                    <a href="#" > <i ></i> <span >Roullete</span> </a>
                    <a href="#" > <i ></i> <span >Dice</span> </a>
                    <a href="#" > <i ></i> <span >Heads or Tails</span> </a>
                    <hr >
                    <a href="#" > <i ></i> <span >Deposit /<br> Withdrawal</span> </a>
                    <a href="#" > <i ></i> <span >Help</span> </a>
                </div>
            </div>
            
        </nav>
    </div>
    <div  id="nav-bar-chat">

        <div id="invisible-toggle-div" >

            <div >
                <button id="close-chat" type="button"  aria-label="Close"></button>
                <button type="button" ><span >Vegaz Chat</span></button>
            </div>

            <div >
                <div id="chatContainer" >
                    
                    <span >11:29</span>
                    <div >
                        <span ><span  style="color: yellow">youranus420:</span> oi putões</span>
                    </div>
                    
                    <span >11:29</span>
                    <div >
                        <span ><span  style="color: yellow">youranus420:</span> bora crash?</span>
                    </div>
                    
                    <span >11:30</span>
                    <div >
                        <span ><span  style="color: purple">elon musk:</span> Olha o nome do cara kkkkk</span>
                    </div>
                        
                </div>
            </div>

            <div >
                <div >
                    <div >
                        <input type="text"  placeholder="Your message" aria-label="Message">
                        <button  type="button" id="button-addon2">Send</button>
                    </div>
                </div>
            </div>

        </div>

    </div>
    <!--Container Main start-->
    <div >
        <h4>Main Components</h4>

        <a  id="chatButton" role="button">
            <span ><i  style="font-size: 40px;"></i></span>
        </a>
    </div>
    <!--Container Main end-->

</body>

</html>

CSS:

@import url("https://fonts.googleapis.com/css2?family=Montserrat&display=swap");
:root {
    --top-header-top-position: 5%;
    --header-height: 3rem;
    --nav-width: 68px;
    --chat-width: 100px;
    --primary-color: var(--bs-primary);
    --secondary-color: var(--bs-secondary);
    --field-gray: var(--bs-field-grey);
    --field-grey-transparency: var(--bs-field-grey-transparency);
    --white-color: var(--bs-white);
    --body-font: 'Montserrat', sans-serif;
    --normal-font-size: 1rem;
    --z-fixed: 100;
    --z-topbar: 101;
}

*,
::before,
::after {
    box-sizing: border-box
}

.top-header {
    width: 100%;
    height: var(--top-header-top-position);
    position: fixed;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 1rem;
    background-color: var(--secondary-color);
    z-index: var(--z-topbar);
    transition: .5s;
    text-align: center !important;
}

.header {
    width: 100%;
    height: var(--header-height);
    position: fixed;
    top: var(--top-header-top-position);
    left: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 1rem;
    background-color: var(--primary-color);
    z-index: var(--z-fixed);
    transition: .5s
}

.header_toggle {
    color: var(--primary-color);
    font-size: 1.5rem;
    cursor: pointer
}

.header_img {
    width: 35px;
    height: 35px;
    display: flex;
    justify-content: center;
    border-radius: 50%;
    overflow: hidden
}

.header_img img {
    width: 40px
}

.l-navbar {
    position: fixed;
    top: 0;
    left: -30%;
    width: var(--nav-width);
    height: 100vh;
    background-color: var(--primary-color);
    padding: .5rem 1rem 0 0;
    transition: .5s;
    z-index: var(--z-fixed)
}

.r-navbar {
    position: fixed;
    top: 0;
    right: 0;
    width: 0;
    height: 100vh;
    background-color: var(--primary-color);
    padding: 1rem 0 0 1rem;
    transition: .5s;
    z-index: var(--z-fixed);
    padding: 1rem 0 0 1rem;
}

.nav {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    overflow: hidden;
    margin-top: 5rem;
}

.nav_logo,
.nav_link {
    display: grid;
    grid-template-columns: max-content max-content;
    align-items: center;
    column-gap: 1rem;
    padding: .5rem 0 .5rem 1.5rem;
    text-decoration: none;
}

.nav_logo {
    margin-bottom: 2rem
}

.nav_logo-icon {
    font-size: 1.25rem;
    color: var(--white-color)
}

.nav_logo-name {
    color: var(--white-color);
    font-weight: 700
}

.nav_link {
    position: relative;
    color: var(--white-color);
    margin-bottom: 1.5rem;
    transition: .3s
}

.nav_link:hover {
    color: var(--white-color)
}

.nav_icon {
    font-size: 1.25rem;
}

.secondary-bs-color {
    color: var(--bs-secondary)
}

.white-bs-color {
    color: var(--white-color)
}

.show-left-nav {
    left: 0;
    width: calc(var(--nav-width)   156px);
}

.show-right-nav {
    width: 100%;
}

.body-menu-pd {
    padding-left: calc(var(--nav-width)   188px); 
}

.body-chat-pd {
    padding-right: calc(var(--chat-width)   1rem);
}

.chat-font {
    font-size: small;
}

.time-span-chat {
    font-size: smaller;
    color: var(--white-color);
}

#chatContainer {
    -ms-overflow-style: none; /* for Internet Explorer, Edge */
    scrollbar-width: none; /* for Firefox */
    overflow-y: scroll; 
}

#chatContainer::-webkit-scrollbar {
    display: none; /* for Chrome, Safari, and Opera */
}

.active {
    color: var(--white-color)
}

.active::before {
    content: '';
    position: absolute;
    left: 0;
    width: 2px;
    height: 32px;
    background-color: var(--white-color)
}

.height-100 {
    height: 100vh
}

.float-icon-chat {
    width: 60px;
    height: 60px;
    bottom: 40px;
    right: 40px;
    background-color: var(--secondary-color);
    color: var(--white-color);
    border-radius: 50px;
    text-align: center;
    vertical-align: middle;
}

.coin-dropdown-item {
    color: var(--white-color);
}

.coin-dropdown-item:hover {
    color: var(--secondary-color);
    background-color: var(--field-grey-transparency);
    font-weight: bold;
}

@media screen and (min-width: 768px) {
    .header {
        height: calc(var(--header-height)   1rem);
        padding: 0 2rem 0 calc(var(--nav-width)   2rem)
    }
    .header_img {
        width: 40px;
        height: 40px
    }
    .header_img img {
        width: 45px
    }
    .l-navbar {
        left: 0;
        padding: 1rem 1rem 0 0
    }
    .r-navbar {
        right: 0;
        padding: 1rem 0 0 1rem;
        width: 0;
    }
    .show-left-nav {
        width: calc(var(--nav-width)   156px)
    }
    .show-right-nav {
        width: calc(var(--chat-width)   156px)
    }
    .body-menu-pd {
        padding-left: calc(var(--nav-width)   188px);   
    }
    .body-chat-pd {
        padding-right: calc(var(--chat-width)   156px)
    }
}

JS:

document.addEventListener("DOMContentLoaded", function(event) {

    const showNavbar = (toggleId, navId, bodyId, headerId) => {
        const toggle = document.getElementById(toggleId),
            nav = document.getElementById(navId),
            bodypd = document.getElementById(bodyId),
            headerpd = document.getElementById(headerId),
            toggleup = document.getElementById("toggle-up")

        // Validate that all variables exist
        if (toggle && nav && bodypd && headerpd) {
            toggleup.addEventListener('click', () => {
                // show navbar
                nav.classList.toggle('show-left-nav');
                //hide navbar buttons on sm
                document.getElementById("nav-buttons").classList.toggle('d-none');
                // change icon
                toggle.classList.toggle('fa-times');
                // add padding to body
                bodypd.classList.toggle('body-menu-pd');
                // add padding to header
                headerpd.classList.toggle('body-menu-pd');
            });
        }
        
    }

    showNavbar('header-toggle', 'nav-bar', 'body-pd', 'header');


    /*===== LINK ACTIVE =====*/
    const linkColor = document.querySelectorAll('.nav_link');

    function colorLink() {
        if (linkColor) {
            linkColor.forEach(l => l.classList.remove('active'));
            this.classList.add('active');
        }
    }
    linkColor.forEach(l => l.addEventListener('click', colorLink));

    // show chat
    const showChat = (toggleId, navId, bodyId, headerId) => {
        const toggle = document.getElementById(toggleId),
            nav = document.getElementById(navId),
            bodypd = document.getElementById(bodyId),
            headerpd = document.getElementById(headerId),
            closeChat = document.getElementById("close-chat")

        // Validate that all variables exist
        if (toggle && nav && bodypd && headerpd) {
            const toggleFunc = () => {
                // show navbar
                document.getElementById("invisible-toggle-div").classList.toggle('invisible');
                nav.classList.toggle('invisible');
                nav.classList.toggle('show-right-nav');
                
                // change icon
                toggle.classList.toggle('invisible');
                // add padding to body
                bodypd.classList.toggle('body-chat-pd');
                // add padding to header
                headerpd.classList.toggle('body-chat-pd');
            }
            toggle.addEventListener('click', toggleFunc);
            closeChat.addEventListener('click', toggleFunc);
        }
        
    }

    showChat('chatButton', 'nav-bar-chat', 'body-pd', 'header');
    
});

CodePudding user response：

change:

<div id="nav-buttons" >

to:

<div id="nav-buttons" >

Page link：https//www.codepudding.com/database/272688.html

Prev:Different display of email signature in browser and MS Outlook
Next:I cannot enter the value for type2 or grind2 or wght2 in the output what is the error?
  •  Tags：  
  • Related

About Us:  Contact Us      Terms of Service       Privacy Policy

Copyright © 2010-2023，Powered By CodePudding