How can i fix the responsive of navbar items with bootstrap or css

user_12506687 0
Viewed 375

I have to do a page very similar to one that already exist the thing is that i need to replicate the behaviour of the responsive of the page, that is giving me troubles with my navbar if someone can guide me of how to do a navbar similar to the one i have to do that would be very help full

Here is a little bit of my html

<nav class="navbar navbar-expand-lg navbar-dark bg">
        <img src="RCPlogo.svg.png" width="130" height="45" class=" mr-left-logo" >
        <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 mr-auto">
                <a class="navbar-brand ml-auto " href="RCP.html">
                    <img src="baseline_home_white_18dp.png" width="30" height="30" class="d-inline-block " alt="">
                </a>
                <span class="divider-border"></span>
                <li class="nav-item dropdown ">
                    <a class="nav-link nav-letter " href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                        PROGRAMME
                    </a>
                    <div class="dropdown-menu bg-dropdown" aria-labelledby="navbarDropdown">
                        <a class="dropdown-item " href="#">Action</a>
                        <div class="dropdown-divider "></div>
                        <a class="dropdown-item " href="#">Another action</a>
                        <div class="dropdown-divider "></div>
                        <a class="dropdown-item " href="#">Something else here</a>
                    </div>
                </li>
                <span class="divider-border"></span>
                <li class="nav-item dropdown">
                    <a class="nav-link nav-letter " href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                        ABSTRACTS
                    </a>
                    <div class="dropdown-menu bg-dropdown" aria-labelledby="navbarDropdown">
                        <a class="dropdown-item " href="#">Action</a>
                        <div class="dropdown-divider "></div>
                        <a class="dropdown-item " href="#">Another action</a>
                        <div class="dropdown-divider "></div>
                        <a class="dropdown-item " href="#">Something else here</a>
                    </div>
                </li>
                <span class="divider-border"></span>
<button class="btn btn-info">BOOK NOW FOR 2020</button>
                <img src="https://img.icons8.com/color/64/000000/facebook.png" width="40" height="30" class="margin-top-fb" >
                <img src="https://img.icons8.com/color/48/000000/twitter-squared.png" width="40" height="30" class="margin-top-tw">
                <p class="RCP">#RCPMed2019</p>
            </ul>
        </div>
    </nav>

This is how my navbar on responsive looks like

enter image description here

This is how it should look like

enter image description here

*Here is the link of the page i have to replicate *

bootstrap-4 css
2 Answers

This is how i solve it adding this css class

@media (max-width:1100px){
            .divider-border {
                display:none !important;
            }
            .navbar-brand{
                display:none !important;
            }
            .margin-top-fb{
                display:none !important;
            }
            .margin-top-tw{
                display:none !important;
            }
            .RCP{
                display:none !important;
            }
            .nav-letter{
                text-align: center;
            }
            .mr-left-logo{
                margin-left: -5px !important;
            }
            .btn-info{
                max-width: 150px !important;
                text-align: center !important;
                vertical-align: middle !important;
                margin-left: auto;
                margin-right: auto;
            }
        }
user_125066870

Finally this is done. I have designed for medium and small screens. You can add the style for small screen as well.

/* Extra small devices (phones, 600px and down) */
/* @media only screen and (max-width: 600px) {...} */

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) and (max-width: 767px) {
            div.wwe{
                background-color: maroon !important;
            }
            .navbar-collapse{
                position: absolute !important;

                top: 4rem;
                right: 2rem;
                background-color: #2f3542;
                text-align: center;
                width: 15rem;
            }
            
    }

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) and (max-width: 992px) {
    div.wwe{
                background-color: aqua !important;
            }
            

            .navbar-collapse{
                position: absolute !important;
                top: 4rem;
                right: 2rem;
                background-color: #2f3542;
                text-align: center;
                width: 15rem;
            }
    }
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Template</title>

    <!-- Font Awesome 4.7 -->
    <link
      href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"
      rel="stylesheet"
      integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN"
      crossorigin="anonymous"
    />

    <!-- bootstrap 4.4 -->
    <link
      rel="stylesheet"
      href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
      integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh"
      crossorigin="anonymous"
    />


  </head>
  <body>
    <nav class="navbar navbar-expand-lg navbar-dark  bg-dark  ">
      <a class="navbar-brand " href="#">My College</a>
      <button
        class="navbar-toggler"
        type="button"
        data-toggle="collapse"
        data-target="#navbarNavDropdown"
        aria-controls="navbarNavDropdown"
        aria-expanded="false"
        aria-label="Toggle navigation"
      >
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse " id="navbarNavDropdown">
        <ul class="navbar-nav  ml-auto">
          <li class="nav-item active">
            <a class="nav-link" href="#"
              >Programme <span class="sr-only">(current)</span></a
            >
          </li>
          <li class="nav-item">
            <a class="nav-link " href="#">Abstracts</a>
          </li>
          <li class="nav-item">
            <a class="nav-link " href="#">PArtners and Exhibtors</a>
          </li>
          <li class="nav-item">
            <a class="nav-link " href="#">Venues and Travles</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Conference Info</a>
          </li>
          <li class="nav-item">
            <a class="nav-link text-info" href="#">Book now for 2020</a>
          </li>

          <!-- <li class="nav-item dropdown">
            <a
              class="nav-link dropdown-toggle"
              href="#"
              id="navbarDropdownMenuLink"
              role="button"
              data-toggle="dropdown"
              aria-haspopup="true"
              aria-expanded="false"
            >
              Dropdown link
            </a>
            <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
              <a class="dropdown-item" href="#">Action</a>
              <a class="dropdown-item" href="#">Another action</a>
              <a class="dropdown-item" href="#">Something else here</a>
            </div> -->
          </li>
        </ul>
      </div>
    </nav>
    <div class="wwe">
        sadjdb
    </div>
    <!-- Bootstrap js ,popper js and jquery  -->
    <script
      src="https://code.jquery.com/jquery-3.4.1.slim.min.js"
      integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n"
      crossorigin="anonymous"
    ></script>
    <script
      src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
      integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
      crossorigin="anonymous"
    ></script>
    <script
      src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"
      integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6"
      crossorigin="anonymous"
    ></script>

    <!-- Custome js  -->
    <script src="script.js"></script>
  </body>
</html>

user_122100020
Related