Bootstrap4 float-right does not work and <Nav> does not style

Asked

Viewed 111 times

0

There’s something I’ve been trying to fix for five hours and I can’t understand why "float-rigth" does not work and not even input. Actually my tag <nav> does not want to stylize.

Details: <ul class="float-right">It worked perfectly, but the <nav id="menu" class="float-right"> does not want to stylize nor does Saci stop smoking.

Follows the code:

<!DOCTYPE html>
<html lang="">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Orlando City</title>
    <link rel="stylesheet" href="lib/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.13.0/css/all.css" integrity="sha384-Bfad6CLCknfcloXFOyFnlgtENryhrpZCe29RTifKEixXQZ38WheV+i/6YWSzkz3V" crossorigin="anonymous">
    <link rel="stylesheet" href="lib/css/style.css">
</head>

<body>
    
    <header>
        <div class="container">
            <img id="logotipo" src="img/OrlandoLogo.png" alt="Logotipo">
        </div> <!-- Logo Orlando -->
        <div class="header-black">
            <div class="container">
                <ul class="float-right">
                    <li class="club-01"><a href="#"></a></li>
                    <li class="club-02"><a href="#"></a></li>
                    <li class="club-03"><a href="#"></a></li>
                    <li class="club-04"><a href="#"></a></li>
                    <li class="club-05"><a href="#"></a></li>
                    <li class="club-06"><a href="#"></a></li>
                    <li class="club-07"><a href="#"></a></li>
                    <li class="club-08"><a href="#"></a></li>
                    <li class="club-09"><a href="#"></a></li>
                    <li class="club-10"><a href="#"></a></li>
                    <li class="club-11"><a href="#"></a></li>
                    <li class="club-12"><a href="#"></a></li>
                    <li class="club-13"><a href="#"></a></li>
                    <li class="club-14"><a href="#"></a></li>
                    <li class="club-15"><a href="#"></a></li>
                    <li class="club-16"><a href="#"></a></li>
                    <li class="club-17"><a href="#"></a></li>
                    <li class="club-18"><a href="#"></a></li>
                    <li class="club-19"><a href="#"></a></li>
                    <li class="club-20"><a href="#"></a></li>
                    <li class="club-21"><a href="#"></a></li>
                    <li class="club-22"><a href="#"></a></li>
                </ul>
            </div>
        </div> <!-- Logo dos times -->
        <div class="container"> <!-- Menu de navegação -->
            <div class="row">
                <nav id="menu" class="float-right">
                    <ul>
                        <li><a href="#">Tickets</a></li>
                        <li><a href="#">News</a></li>
                        <li><a href="#">Schedule</a></li>
                        <li>
                            <div class="input-group">
                                <input type="search" placeholder="search..." >
                                <span class="input-group-btn">
                                    <button type="button"><i class="fas fa-search"></i></button>
                                </span>
                            </div>
                        </li>
                    </ul>
                </nav>
            </div>
        </div>
        
        
    </header>
    
    
    
    <script src="lib/jquery/jquery.min.js"></script>
    <script src="lib/bootstrap/js/bootstrap.min.js"></script>
    
</body>
</html>

CSS:

/* Chamando uma fonte */
@font-face {
    font-family: 'Open-Sans';
    src: url("../../fonts/Open_Sans/OpenSans-Regular.ttf");
}

/* Header
-----------------*/
header {width: 100%;height: 150px;background-color: #5E299A;}
header .container{position: relative;}
header .header-black{background-color: black;height: 40px;width: 100%;display: inline-block}

/* Logo dos clubes */
header .header-black li{background-image: url("../../img/clubs.png.png");background-repeat: no-repeat;display: inline-block;margin:4px;}
header .header-black li.club-01{background-position: 0px 0px;}
header .header-black li.club-02{background-position: -48px 0px;}
header .header-black li.club-03{background-position: -94px 0px;}
header .header-black li.club-04{background-position: -139px 0px;}
header .header-black li.club-05{background-position: -189px 0px;}
header .header-black li.club-06{background-position: -239px 0px;}
header .header-black li.club-07{background-position: -288px 0px;}
header .header-black li.club-08{background-position: -335px 0px;}
header .header-black li.club-09{background-position: -380px 0px;}
header .header-black li.club-10{background-position: -429px 0px;}
header .header-black li.club-11{background-position: -479px 0px;}
header .header-black li.club-12{background-position: -528px 0px;}
header .header-black li.club-13{background-position: -578px 0px;}
header .header-black li.club-14{background-position: -628px 0px;}
header .header-black li.club-15{background-position: -674px 0px;}
header .header-black li.club-16{background-position: -718px 0px;}
header .header-black li.club-17{background-position: -761px 0px;}
header .header-black li.club-18{background-position: -806px 0px;}
header .header-black li.club-19{background-position: -855px 0px;}
header .header-black li.club-20{background-position: -901px 0px;}
header .header-black li.club-21{background-position: -948px 0px;}
header .header-black li.club-22{background-position: -996px 0px;}
header .header-black li a{width:32px;height:32px;display: block;}
header #logotipo{position: absolute;margin: 20px 2px;}

/* Links de navegação */
/* <-- gambiarra */
#menu li{display: inline-block;font-family: "Open-Sans";font-size: 1em;margin: -8px 25px;}
#menu li.search{width: 182px;}
#menu li.search ::webkit-input-placeholder{color: white;}
#menu li.search button{background: none;border: none;color: white;}
#menu li.search input{background-color: #5C2D90;border: none;}
#menu a{color: white;font-size: 16px;}

I thank the masters already.

html css bootstrap-4

  • Link image: https://drive.google.com/file/d/10ehXR4sZM1Mh4gNPw2svatHO4qyHQBor/view

1 answer

0


Your goal would not be this justify-content-endtake a look at documentation.

I set the code to work the way you seemed to want. When doing bootstrap always leave a tab open in the documentation, it is very well done and will help you a lot.

I removed your bootstrap link:

<link rel="stylesheet" href="lib/bootstrap/css/bootstrap.min.css">

and added this (this is what they ask to use for the documentation):

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">

I removed an unnecessary div, added the classes of li'and the right classes in the nav.

<div class="container"> <!-- Menu de navegação -->
                <nav id="menu" class="nav justify-content-end">
                    <ul>
                        <li class="nav-item"><a href="#">Tickets</a></li>
                        <li class="nav-item"><a href="#">News</a></li>
                        <li class="nav-item"><a href="#">Schedule</a></li>
                        <li class="nav-item">
                            <div class="input-group">
                                <input type="search" placeholder="search..." >
                                <span class="input-group-btn">
                                    <button type="button"><i class="fas fa-search"></i></button>
                                </span>
                            </div>
                        </li>
                    </ul>
                </nav>
        </div>

This code is working but if what you want is a navbar and not a nav any I think it would be better for you to use the bootstrap navbar. It has more things and is more responsive since it is done thinking about being a main navigation bar. Give it a whirl you’ll see there’s a lot of cool stuff in it.

  • It worked out! So in that case I should use class="nav justify-content-end". Thank you. But a doubt, if I use this recommended link, there is no risk of this template being blocked in the future, because of bootstrap updates ?

  • 1

    No, if you look at the link you can see /bootstrap/4.5.0/ This means that if they release another version your site will remain on 4.5.0 unless you change. So far bootstrap continues to make old libraries available. I find it very difficult to change but if it happens it will be a news very publicized with certainty.

  • 1

    To use the navbar you have to use class=" navbar navbar-expand{-sm|-md|-lg|-xl}" as you can see here. Currently you are using a nav generic, works but is not recommended.

  • 1

    Thank you very much. Only with this question I could have the opportunity to learn a lot and I thank you for having supported me. When I have time, I will study more bootstrap documentation!

Browser other questions tagged html css bootstrap-4

You are not signed in. Login or sign up in order to post.