Html - How can I arrange the buttons from the Nav element evenly with more space between them?

Sycro
January 31, 2024
153 views
0 votes
2 Answers

I want the buttons arranged evenly with more space. Of course in the end it should be responsive. I tried to arrange the buttons with bootstraps "d-flex" but it doesn’t work.

Oh and if you look at my bootstrap col’s and think you can revise the part to make it more efficient, you can also suggest an improvement there

My Code:

function menuButton(button) {

    var productElement = button.classList;

    if (productElement !== null) {
        if (productElement.contains("Start-Button")) {
            window.location.href = "index.html";
            console.log("redirected to 'index.html'");
        } else if (productElement.contains("Shop-Button")) {
            window.location.href = "products.html";
            console.log("redirected to 'products.html'");
        } else if (productElement.contains("Kontakt-Button")) {
            window.location.href = "contact.html";
            console.log("redirected to 'contact.html'");
        } else {
            console.error("menuButton: ERROR / No CSS-Class found!")
        }
    }
}

body {
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

.wrapper-1 {

    position: relative;
    overflow: hidden;
}

#background-video {
    height: 30vh;
    width: 100%;
    position: absolute;
    object-fit:cover;
}

.head-sentence {
    color: yellow;
    text-align: center;
    margin-top: 4vh;
    font-family: "Black Ops One";
    font-size: 6vh;
    padding: 10px;
    border: 5px;
    border-style: solid;
    border-radius: 10px;
    border-color: yellow;
    backdrop-filter: blur(5px);
}

.Start-Button, .Shop-Button, .Kontakt-Button {
    color: yellow;
    background-color: rgba(0, 0, 0, 0);
    font-family: "Black Ops One";
    text-decoration: underline;
    backdrop-filter: blur(5px);
    border-radius: 5px;
}

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
        <link rel="stylesheet" type="text/css" href="styles.css">
        <script src="scripts.js"></script>
        <title>Dädalus</title>
        <link rel="preconnect" href="https://fonts.googleapis.com">
        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
        <link href="https://fonts.googleapis.com/css2?family=Black+Ops+One&display=swap" rel="stylesheet">
        <link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Caveat" rel="stylesheet">
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">
    </head>
    <body>
        <video id="background-video" src="img/video (2160p).mp4" autoplay muted loop></video>
        <div class="container-fluid wrapper-1">
            <div class="row">
                <div class="col-md-3"></div>
                <div class="col-md-6 d-flex flex-column align-items-center justify-content-center">
                    <h2 class="head-sentence">Dädalus</h2>
                </div>
                <div class="col-md-3"></div> 
            </div>
            <div class="row nav-bar">
                <div class="col-md-3 col-sm-1">
                </div>
                <div class="col-md-6 col-sm-10 d-flex align-items-center justify-content-center nav-width">
                    <nav style="margin-top: 20px;">
                        <button class="Start-Button" onclick="menuButton(this)">Start</button>
                        <button class="Shop-Button" onclick="menuButton(this)">Produkte</button>
                        <button class="Kontakt-Button" onclick="menuButton(this)">Kontakt</button>
                    </nav>
                </div>
                <div class="col-md-3 col-sm-1">
                    
                </div>
            </div>
            <div class="row">
                <div class="col-md-1"></div>
                <div class="col-md-10"></div>
                <div class="col-md-1"></div>
            </div>
            
        </div>
    </body>
</html>

Answers

Added some classes to nav, mainly:

class="w-100 mt-3 d-flex justify-content-evenly"

function menuButton(button) {

    var productElement = button.classList;

    if (productElement !== null) {
        if (productElement.contains("Start-Button")) {
            window.location.href = "index.html";
            console.log("redirected to 'index.html'");
        } else if (productElement.contains("Shop-Button")) {
            window.location.href = "products.html";
            console.log("redirected to 'products.html'");
        } else if (productElement.contains("Kontakt-Button")) {
            window.location.href = "contact.html";
            console.log("redirected to 'contact.html'");
        } else {
            console.error("menuButton: ERROR / No CSS-Class found!")
        }
    }
}

body {
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

.wrapper-1 {

    position: relative;
    overflow: hidden;
}

#background-video {
    height: 30vh;
    width: 100%;
    position: absolute;
    object-fit:cover;
}

.head-sentence {
    color: yellow;
    text-align: center;
    margin-top: 4vh;
    font-family: "Black Ops One";
    font-size: 6vh;
    padding: 10px;
    border: 5px;
    border-style: solid;
    border-radius: 10px;
    border-color: yellow;
    backdrop-filter: blur(5px);
}

.Start-Button, .Shop-Button, .Kontakt-Button {
    color: yellow;
    background-color: rgba(0, 0, 0, 0);
    font-family: "Black Ops One";
    text-decoration: underline;
    backdrop-filter: blur(5px);
    border-radius: 5px;
}

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
        <link rel="stylesheet" type="text/css" href="styles.css">
        <script src="scripts.js"></script>
        <title>Dädalus</title>
        <link rel="preconnect" href="https://fonts.googleapis.com">
        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
        <link href="https://fonts.googleapis.com/css2?family=Black+Ops+One&display=swap" rel="stylesheet">
        <link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Caveat" rel="stylesheet">
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">
    </head>
    <body>
        <video id="background-video" src="img/video (2160p).mp4" autoplay muted loop></video>
        <div class="container-fluid wrapper-1">
            <div class="row">
                <div class="col-md-3"></div>
                <div class="col-md-6 d-flex flex-column align-items-center justify-content-center">
                    <h2 class="head-sentence">Dädalus</h2>
                </div>
                <div class="col-md-3"></div> 
            </div>
            <div class="row nav-bar">
                <div class="col-md-3 col-sm-1">
                </div>
                <div class="col-md-6 col-sm-10 d-flex align-items-center justify-content-center nav-width">
                    <nav class="w-100 mt-3 d-flex justify-content-evenly">
                        <button class="Start-Button" onclick="menuButton(this)">Start</button>
                        <button class="Shop-Button" onclick="menuButton(this)">Produkte</button>
                        <button class="Kontakt-Button" onclick="menuButton(this)">Kontakt</button>
                    </nav>
                </div>
                <div class="col-md-3 col-sm-1">
                    
                </div>
            </div>
            <div class="row">
                <div class="col-md-1"></div>
                <div class="col-md-10"></div>
                <div class="col-md-1"></div>
            </div>
            
        </div>
    </body>
</html>

            function menuButton(button) {

var productElement = button.classList;

if (productElement !== null) {
    if (productElement.contains("Start-Button")) {
        window.location.href = "index.html";
        console.log("redirected to 'index.html'");
    } else if (productElement.contains("Shop-Button")) {
        window.location.href = "products.html";
        console.log("redirected to 'products.html'");
    } else if (productElement.contains("Kontakt-Button")) {
        window.location.href = "contact.html";
        console.log("redirected to 'contact.html'");
    } else {
        console.error("menuButton: ERROR / No CSS-Class found!")
    }
}
}

    body {
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    
}

.wrapper-1 {

    position: relative;
    overflow: hidden;
}

#background-video {
    height: 30vh;
    width: 100%;
    position: absolute;
    object-fit:cover;
}

.head-sentence {
    color: yellow;
    text-align: center;
    margin-top: 4vh;
    font-family: "Black Ops One";
    font-size: 6vh;
    padding: 10px;
    border: 5px;
    border-style: solid;
    border-radius: 10px;
    border-color: yellow;
    backdrop-filter: blur(5px);
}

.Start-Button, .Shop-Button, .Kontakt-Button {
    color: yellow;
    background-color: rgba(0, 0, 0, 0);
    font-family: "Black Ops One";
    text-decoration: underline;
    backdrop-filter: blur(5px);
    border-radius: 5px;
}

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
        <link rel="stylesheet" type="text/css" href="styles.css">
        <script src="scripts.js"></script>
        <title>Dädalus</title>
        <link rel="preconnect" href="https://fonts.googleapis.com">
        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
        <link href="https://fonts.googleapis.com/css2?family=Black+Ops+One&display=swap" rel="stylesheet">
        <link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Caveat" rel="stylesheet">
        
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">

    </head>
    <body>
        <video id="background-video" src="img/video (2160p).mp4" autoplay muted loop></video>
        <div class="container-fluid wrapper-1">
            <div class="row">
                <div class="col-md-3"></div>
                <div class="col-md-6 d-flex flex-column align-items-center justify-content-center">
                    <h2 class="head-sentence">Dädalus</h2>
                </div>
                <div class="col-md-3"></div> 
            </div>
            <div class="row nav-bar">
                <div class="col-md-3 col-sm-1">
                </div>
                <div class="col-md-6 col-sm-10 d-flex justify-content-evenly nav-width">  
                    <!-- here i remove the nav tag and "justify-content-evenly" bootstrap property -->
                        <button class="Start-Button" onclick="menuButton(this)">Start</button>
                        <button class="Shop-Button" onclick="menuButton(this)">Produkte</button>
                        <button class="Kontakt-Button" onclick="menuButton(this)">Kontakt</button>
                    
                </div>
                <div class="col-md-3 col-sm-1">
                    
                </div>
            </div>
            <div class="row">
                <div class="col-md-1"></div>
                <div class="col-md-10"></div>
                <div class="col-md-1"></div>
            </div>
            
        </div>

    </body>
</html>

here is the answer to your query…
there is simple error that is resolved

Please signup or login to give your own answer.

Click here to cancel reply.

Html – How can I arrange the buttons from the Nav element evenly with more space between them?

Answers