Resize navbar in smaller screens and move it to the right

Question

I Need help to move the navbar to the right side, since the row is not using all the width from the parent div (container).

Also I need to make the navbar resizable on smaller screens and when the button appears to show the hidden navbar, after click on it, displays the menu on right side (currently appearing on middle).

I have already tried to use the pl-5 ml-5 classes that bootstrap 4 provides to move the navbar, but it seems these classes don't solve the problem.

I have already checked that adding more content (text, links, li, etc.) inside those rows get bigger.

Current state of the website: https://demos.posicionart.com/silleri/

 <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/> <nav class="navbar navbar-expand-lg navbar-light bg-light pb-0"> <div class="container"> <div class="row"> <div class="col-4 col-lg-4 ml-0"> <a class="navbar-brand" href="#"> <img src="images/landing/silieri-logo-head.png" class="d-inline-block align-top" alt="Imagen Logo Header Silieri"> </a> </div> <div class="col-8 col-lg-8"> <div class="row"> <p class="text-right navbar-header-footer"> <b class="welcome-title-header">Qro.</b> (442) 223 6825 | (442) 183 055 | (442) 183 1940 | <b class="welcome-title-header">León</b> (447) 432 0949 <i class="fab fa-facebook fa-lg"></i> <i class="fab fa-whatsapp fa-lg"></i> CONTÁCTANOS </p> </div> <div class="row"> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarSupportedContent"> <ul class="navbar-nav ml-auto mr-auto"> <li class="nav-item pb-1 pt-1 pl-2 pr-2"> <a class="nav-link" href="#">Proyectos</a> </li> <li class="nav-item pb-1 pt-1 pl-2 pr-2"> <a class="nav-link" href="#">Especiales</a> </li> <li class="nav-item pb-1 pt-1 pl-2 pr-2"> <a class="nav-link" href="#">Catálogo</a> </li> <li class="nav-item pb-1 pt-1 pl-2 pr-2"> <a class="nav-link" href="#">Guía</a> </li> <li class="nav-item pb-1 pt-1 pl-2 pr-2"> <a class="nav-link" href="#">Cotizador</a> </li> </ul> </div> </div> </div> </div> </div> </nav> 

I Just want to move the navbar to the right and make it responsive, since this is the first time that I'm using a navbar like this and not the default one that bootstrap 4 provides.

Answer 1

we can not use same structure everywhere so just replace your above code with the following code

HTML

<div class="container">
    <div class="row">
        <div class="col-sm-3">
           <img src="images/landing/silieri-logo-head.png" class="d-inline-block align-top" alt="Imagen Logo Header Silieri">
       </div>
       <div class="col-sm-9">
        <div class="row">
            <div class="col-sm-12">
                <ul class="top-navbar">
                    <li class=""><b class="welcome-title-header">Qro.</b> (442) 223 6825 | (442) 183 055 | (442) 183 1940</li>
                    <li class=""><b class="welcome-title-header">León</b> (447) 432 0949 <i class="fab fa-facebook fa-lg"></i></li>
                    <li class=""><i class="fab fa-whatsapp fa-lg"></i> CONTÁCTANOS</li>
                </ul>
            </div>
        </div>
        <div class="row">
            <div class="col-sm-12">
                <nav class="navbar navbar-expand-lg navbar-light pb-0">
                    <button class="navbar-toggler ml-auto" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                        <span class="navbar-toggler-icon"></span>
                    </button>
                    <div class="collapse navbar-collapse" id="navbarSupportedContent">
                        <ul class="navbar-nav ml-auto">
                            <li class="nav-item pb-1 pt-1 pl-2 pr-2">
                                <a class="nav-link" href="#">Proyectos</a>
                            </li>
                            <li class="nav-item pb-1 pt-1 pl-2 pr-2">
                                <a class="nav-link" href="#">Especiales</a>
                            </li>
                            <li class="nav-item pb-1 pt-1 pl-2 pr-2">
                                <a class="nav-link" href="#">Catálogo</a>
                            </li>
                            <li class="nav-item pb-1 pt-1 pl-2 pr-2">
                                <a class="nav-link" href="#">Guía</a>
                            </li>
                            <li class="nav-item pb-1 pt-1 pl-2 pr-2">
                                <a class="nav-link" href="#">Cotizador</a>
                            </li>
                        </ul>
                    </div>
                </nav>
            </div>
        </div>
    </div>
</div>
</div>

and CSS

.top-navbar {
        list-style: none;
        float: right;
    }

    .top-navbar li {
        float: left;
    }

Answer 2

There are many ways you can actually achieve this, I have added a class to the row and add css class as

.mobile-right {
   justify-content: flex-end;
}

Here is the codepen link https://codepen.io/sohebm/pen/MdxYQx

But I would suggest you, understand how Bootstrap grid layout works and responsive utilities

Answer 3

You could use the flex helpers provided by bootstrap especially justify-content-end to align the menu to the right and align-items-end to align the menu to the right in small screens as well as the ml-auto class to align the navbar toggler to the right.

See below :

 <!DOCTYPE html> <!DOCTYPE html> <html lang="es"> <head> <meta charset="UTF-8"> <title>Silieri</title> <meta name="description" content="Prueba Desc"> <meta name="keywords" content="Prueba, Prueba2"> <meta name="author" content="Posicionart"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="icon" type="image/png" href="https://demos.posicionart.com/silleri/images/logosilieri.png"> <script src="https://demos.posicionart.com/silleri/js/landing/jquery-3.4.1.min.js"></script> <script src="https://demos.posicionart.com/silleri/js/landing/bootstrap.min.js"></script> <link rel="stylesheet" type="text/css" href="https://demos.posicionart.com/silleri/css/landing/webfonts/all.min.css"> <link rel="stylesheet" type="text/css" href="https://demos.posicionart.com/silleri/css/landing/bootstrap.min.css"> <link rel="stylesheet" type="text/css" href="https://demos.posicionart.com/silleri/css/landing/styles.css"> </head> <body><nav class="navbar navbar-expand-lg navbar-light bg-light pb-0"> <div class="container"> <div class="row"> <div class="col-4 col-lg-4 ml-0"> <a class="navbar-brand" href="#"> <img src="images/landing/silieri-logo-head.png" class="d-inline-block align-top" alt="Imagen Logo Header Silieri"> </a> </div> <div class="col-8 col-lg-8"> <div class="row"> <p class="text-right navbar-header-footer"> <b class="welcome-title-header">Qro.</b> (442) 223 6825 | (442) 183 055 | (442) 183 1940 | <b class="welcome-title-header">León</b> (447) 432 0949 <i class="fab fa-facebook fa-lg"></i> <i class="fab fa-whatsapp fa-lg"></i> CONTÁCTANOS </p> </div> <div class="row"> <button class="ml-auto navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse justify-content-end" id="navbarSupportedContent"> <ul class="navbar-nav align-items-end"> <li class="nav-item pb-1 pt-1 pl-2 pr-2"> <a class="nav-link" href="#">Proyectos</a> </li> <li class="nav-item pb-1 pt-1 pl-2 pr-2"> <a class="nav-link" href="#">Especiales</a> </li> <li class="nav-item pb-1 pt-1 pl-2 pr-2"> <a class="nav-link" href="#">Catálogo</a> </li> <li class="nav-item pb-1 pt-1 pl-2 pr-2"> <a class="nav-link" href="#">Guía</a> </li> <li class="nav-item pb-1 pt-1 pl-2 pr-2"> <a class="nav-link" href="#">Cotizador</a> </li> </ul> </div> </div> </div> </div> </div> </nav><section id="welcome"> <div class="jumbotron rounded-0 home-banner"></div> </section> <section id="main" class="container"> <div class="container"> <p class="main-title text-center">Podemos amueblar desde una oficina hasta <b class="welcome-title-header">UN CORPORATIVO</b></p> <hr class="my-5 welcome-hr"> <p class="text-justify mb-5 welcome-message center-justified"> En Sileri nos especializamos en crear ambientes fucionales, cómodos y durables cuyo desarrollo va desde la planeación del proyecto hasta la entrega e instalación del mobiliario. </p> <div class="row"> <div class="col-md-4"> <img src="images/landing/banner-home-ambientes.jpg" class="main-image mb-3 img-fluid" alt="Imagen de Ambientes"> <div class="row"> <div class="col-md-2 pad-mar-0"> <div class="vr">&nbsp;</div> </div> <div class="col-md-10 pr-5"> <h3 class="upper-letters welcome-title-card"><b class="primary-color">Ver</b> Ambientes</h3> <p class="text-justify welcome-text-card">¿Tienes un proyecto grande en mente? Visita nuestra selección de ambientes para inspirarte.<a href="#"> VER MÁS</a></p> </div> </div> </div> <div class="col-md-4"> <img src="images/landing/banner-home-catalogo.jpg" class="main-image mb-3 img-fluid" alt="Imagen de Cátalogo"> <div class="row"> <div class="col-md-2 pad-mar-0"> <div class="vr">&nbsp;</div> </div> <div class="col-md-10 pr-5"> <h3 class="upper-letters welcome-title-card"><b class="primary-color">Ver</b> Catálogo</h3> <p class="text-justify welcome-text-card">Encuentra piezas que funcionen, combinen y se adapten a tu proyecto y presupuesto.<a href="#"> VER MÁS</a></p> </div> </div> </div> <div class="col-md-4"> <img src="images/landing/banner-home-asesoria.jpg" class="main-image mb-3 img-fluid" alt="Imagen de Asesorías"> <div class="row"> <div class="col-md-2 pad-mar-0"> <div class="vr">&nbsp;</div> </div> <div class="col-md-10 pr-5"> <h3 class="upper-letters welcome-title-card"><b class="primary-color">Solicita</b> Asesoría</h3> <p class="text-justify welcome-text-card">Si no sabes cuándo es el momento ideal para renovar un área de trabajo, toma el test y contáctanos.<a href="#"> VER MÁS</a></p> </div> </div> </div> </div> </div> </section> <section id="muebles" class="container"> <div class="container"> <div id="muebles-row" class="row pt-5 mt-5"> <div class="col-md-8 pr-0"> <h1 id="title-muebles" class="upper-letters main-title">Muebles Especiales</h1> <hr class="muebles-hr"> <div class="container pl-0"> <p class="text-justify">Existen dentro de las empresas áreas que demandan soluciones específicas en cuestión de funcionalidad, diseño y estética; si necesitas una solución integral para tu proyecto, podemos ayudarte.</p> </div> <a id="btn-conoce-mas-1" class="mt-4 rounded-0 pl-5 pr-5 btn btn-dark upper-letters" href="#">Conoce <span class="primary-color">más</span></a> </div> <div class="col-md-4 pl-0"> <img src="images/landing/banner-home-muebles-especiales.jpg" class="muebles-image img-fluid" alt="Imagen Sección de Muebles"> <a id="btn-conoce-mas-2" class="mt-4 rounded-0 pl-5 pr-5 btn btn-dark upper-letters" href="#">Conoce <span class="primary-color">más</span></a> </div> </div> </div> </section> <section id="testimonios" class="container"> <div class="container"> <div class="row"> <div class="col-md-4"> <div class="row"> <div class="col-lg-10"> <img id="imagen-testimonios-1" class="mt-5 pt-5 testimonials-image img-fluid" src="images/landing/home-testimonio-am.png" alt="Imagen Sección Testimonios"> </div> <div class="col-lg-2"> <div class="vr-testimonios">&nbsp;</div> </div> </div> </div> <div class="col-md-8"> <br> <div class="container"> <h1 id="title-testimonios" class="upper-letters main-title">Testimonios</h1> <img id="imagen-testimonios-2" class="mt-5 pt-5 testimonials-image img-fluid" src="images/landing/home-testimonio-am.png" alt="Imagen Sección Testimonios"> <blockquote class="blockquote"> <p class="text-justify text-testimonials">Después de trabajar con ellos en el equipamento de nuestro comedor ejecutivo y de las salas de juntas del corporativo, recomiendo apliamente a Silieri Koncept por su experiencia, profesionalismo y entusiasmo en el proyecto.</p> <b> <footer class="blockquote-footer"> Director de compras, <cite title="Source Title">AM Consultores</cite> </footer> </b> </blockquote> </div> </div> </div> </div> </section><br> <footer class="footer"> <div class="container"> <div class="row"> <div class="col-3 col-md-3"> <br> <div class="vr-footer-1">&nbsp;</div> <ul> <li class="left"><a href="#" class="upper-letters">Proyectos</a></li> <li class="left"><a href="#" class="upper-letters">Muebles Especiales</a></li> <li class="left"><a href="#" class="upper-letters">Guía</a></li> </ul> </div> <div class="col-3 col-md-3"> <br> <div class="vr-footer-1">&nbsp;</div> <ul> <li class="center"><a href="#" class="upper-letters">Catálogo</a></li> <li class="center"><a href="#">Mesas y escritorios</a></li> <li class="center"><a href="#">Sillas y sofás</a></li> <li class="center"><a href="#">Recepciones</a></li> <li class="center"><a href="#">Áreas de Guardado</a></li> <li class="center"><a href="#">Escolares y Capacitación</a></li> <li class="center"><a href="#">Muros Móviles</a></li> </ul> </div> <div class="col-3 col-md-3"> <br> <div class="vr-footer-1">&nbsp;</div> <ul> <li><a href="#" class="upper-letters">Contacto</a></li> <li> <p> Oficina Matriz <br> B. Quitana 208 <br> Col. Carretas <br> CP 76050 <br> Querétaro, Qro. MX. </p> </li> <li>(442) 223 6825</li> <li>(442) 183 0555</li> <li>(442) 183 1940</li> <br> <li> <p> Oficina León <br> (442) 432 0949 </p> </li> </ul> </div> <div class="col-3 col-md-3"> <br> <ul class="footer-icons pb-5"> <li id="li-icons" class="mr-3 ml-3"><i class="fab fa-facebook fa-3x"></i></li> <li id="li-icons" class="mr-3 ml-3 pb-4"><i class="fab fa-whatsapp fa-3x"></i></li> </ul> <ul id="ul-brand" class="mt-4 pt-4"> <li class="upper-letters">Silieri Koncept</li> <li> <p> Muebles de oficina <br> & proyectos integrales </p> </li> </ul> </div> </div> </div> <br><br><br><br> <div class="second-footer"> <div class="container"> <div class="row"> <div class="col-3 col-md-3"> <img src="images/landing/silieri-logo-footer.png" class="d-inline-block align-top pt-2 pb-2" alt="Imagen Logo Footer Silieri"> </div> <div class="col-9 col-md-9"> <p class="text-right mt-4 upper-letters"> 2019 &copy Silieri Koncept. Todos los derechos reservados. Consulte nuestro <a href="#">aviso de privacidad</a> </p> </div> </div> </div> </div> </footer> </body> </html>