How to align the content of a Nav Bar so that it stays in the center of the screen?



  • I have a nav bar that I need to put your content in the center of the screen, I've tried several codes but it always gets left, follow my current code

    <nav class="navbar navbar-inverse navbar-fixed-top justify-content-center" style="background-color: #e7ebd5;">
            <div class="container">
                <div class="navbar-header">
                    <div class="row justify-content-center">                  
                            <div id="ImagemLogo">
                                <img src="~/images/TerraVerdeLogo.png" class="img-responsive"> 
                        </div>
                    </div>
    
                        &lt;a asp-area="" asp-controller="Home" style="color:#ffffff ; font-size:15px;text-align:center" asp-action="Index" class="navbar-brand"&gt;Home&lt;/a&gt;
    
    
                        &lt;a asp-area="" asp-controller="Loja" style="color:#ffffff; font-size:15px;" asp-action="Index" class="navbar-brand"&gt;Loja&lt;/a&gt;
    
    
                        &lt;a asp-area="" asp-controller="Home" style="color:#ffffff; font-size:15px;" asp-action="LoginCliente" class="navbar-brand"&gt;Login/Cadastro de Clientes&lt;/a&gt;
    
    
            &lt;/div&gt;
            @inject IHttpContextAccessor HttpContextAccessor
            &lt;div id="NomeUsuarioLogado"&gt;&lt;/div&gt;
            @inject IHttpContextAccessor HttpContextAccessor
            &lt;div id="NomeClienteLogado"&gt;&lt;/div&gt;
        &lt;/div&gt;
    
    &lt;/nav&gt;
    



  • See that vc is putting the class justify-content-center navbar, but vc placed as his direct son navabar a div with the class container, this prevents centralized alignment.

    To fix this just put vc class justify-content-center direct container inside navbar.

    OBS: Yet I think it's quite wrong to clog a container inside navbar. You should follow the documentation to have no problems in the future! https://getbootstrap.com/docs/4.1/components/navbar/

    <link rel="stylesheet" type="text/css" media="screen" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" />
    

    <nav class="navbar navbar-inverse navbar-fixed-top " style="background-color: #e7ebd5;">
    <div class="container justify-content-center">
    <div class="navbar-header">
    <div class="row justify-content-center">
    <div id="ImagemLogo">
    <!-- <img src="~/images/TerraVerdeLogo.png" class="img-responsive"> -->
    <img src="https://placecage.com/100/100" class="img-responsive">
    </div>
    </div>
    <a asp-area="" asp-controller="Home" style="color:#ffffff ; font-size:15px;text-align:center"
    asp-action="Index" class="navbar-brand">Home</a>
    <a asp-area="" asp-controller="Loja" style="color:#ffffff; font-size:15px;" asp-action="Index" class="navbar-brand">Loja</a>
    <a asp-area="" asp-controller="Home" style="color:#ffffff; font-size:15px;" asp-action="LoginCliente"
    class="navbar-brand">Login/Cadastro de Clientes</a>
    </div>
    <!-- @inject IHttpContextAccessor HttpContextAccessor -->
    <div id="NomeUsuarioLogado">logado</div>
    <!-- @inject IHttpContextAccessor HttpContextAccessor -->
    <div id="NomeClienteLogado">logado</div>
    </div>

    </nav>




Suggested Topics

  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2