Topic: Navbar shift to right when you open modal

Normatov free asked 6 years ago


Navbar shift to right when open model.Help me please))this is my code: <header> <!--Navbar--> <nav id="navbarId" class="navbar navbar-expand-lg red darken-4 navbar-dark fixed-top scrolling-navbar"> <divclass="container"> <!-- Navbar brand --> <aclass="navbar-brand"href="#">FC Liverpool</a> <!-- Collapse button --> <buttonclass="navbar-toggler"type="button"data-toggle="collapse"data-target="#basicExampleNav"aria-controls="basicExampleNav" aria-expanded="false"aria-label="Toggle navigation"> <spanclass="navbar-toggler-icon"></span> </button> <!-- Collapsible content --> <divclass="collapse navbar-collapse"id="basicExampleNav"> <!-- Links --> <ulclass="navbar-nav mr-auto"> <liclass="nav-item active"> <aclass="nav-link"href="#">Home <spanclass="sr-only">(current)</span> </a> </li> <liclass="nav-item"> <aclass="nav-link"href="#">News</a> </li> <liclass="nav-item"> <aclass="nav-link"href="#">Match</a> </li> <liclass="nav-item"> <aclass="nav-link"href="#">Anfield</a> </li> <liclass="nav-item"> <aclass="nav-link"href="#">History</a> </li> </ul> <!-- Links --> <ahrefclass="btn btn-white btn-sm"data-toggle="modal"data-target="#modalLRForm">Login</a> </div> <!-- Collapsible content --> </div> </nav> <!--/.Navbar--> </header> <divclass="bgClass"style="background-image: url(myImages/bg5.jpg);"> </div> <main> <!--Modal: Login / Register Form--> <div class="modal fade" id="modalLRForm" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <divclass="modal-dialog cascading-modal"role="document"> <!--Content--> <divclass="modal-content"> <!--Modal cascading tabs--> <divclass="modal-c-tabs"> <!-- Nav tabs --> <ulclass="nav nav-tabs tabs-2 red darken-3"role="tablist"> <liclass="nav-item"> <aclass="nav-link active"data-toggle="tab"href="#panel7"role="tab"><iclass="fa fa-user mr-1"></i> Login</a> </li> <liclass="nav-item"> <aclass="nav-link"data-toggle="tab"href="#panel8"role="tab"><iclass="fa fa-user-plus mr-1"></i> Register</a> </li> </ul> <!-- Tab panels --> <divclass="tab-content"> <!--Panel 7--> <divclass="tab-pane fade in show active"id="panel7"role="tabpanel"> <!--Body--> <divclass="modal-body mb-1"> <divclass="md-form form-sm mb-5"> <iclass="fa fa-envelope prefix"></i> <inputtype="email"id="modalLRInput10"class="form-control form-control-sm validate"> <labeldata-error="wrong"data-success="right"for="modalLRInput10">Your email</label> </div> <divclass="md-form form-sm mb-4"> <iclass="fa fa-lock prefix"></i> <inputtype="password"id="modalLRInput11"class="form-control form-control-sm validate"> <labeldata-error="wrong"data-success="right"for="modalLRInput11">Your password</label> </div> <divclass="text-center mt-2"> <buttonclass="btn btn-red">Log in <iclass="fa fa-sign-in ml-1"></i></button> </div> </div> <!--Footer--> <divclass="modal-footer"> <divclass="options text-center text-md-right mt-1"> <p>Not a member? <ahref="#"class="blue-text">Sign Up</a></p> <p>Forgot <ahref="#"class="blue-text">Password?</a></p> </div> <buttontype="button"class="btn btn-outline-red waves-effect ml-auto"data-dismiss="modal">Close</button> </div> </div> <!--/.Panel 7--> <!--Panel 8--> <divclass="tab-pane fade"id="panel8"role="tabpanel"> <!--Body--> <divclass="modal-body"> <divclass="md-form form-sm mb-5"> <iclass="fa fa-envelope prefix"></i> <inputtype="email"id="modalLRInput12"class="form-control form-control-sm validate"> <labeldata-error="wrong"data-success="right"for="modalLRInput12">Your email</label> </div> <divclass="md-form form-sm mb-5"> <iclass="fa fa-lock prefix"></i> <inputtype="password"id="modalLRInput13"class="form-control form-control-sm validate"> <labeldata-error="wrong"data-success="right"for="modalLRInput13">Your password</label> </div> <divclass="md-form form-sm mb-4"> <iclass="fa fa-lock prefix"></i> <inputtype="password"id="modalLRInput14"class="form-control form-control-sm validate"> <labeldata-error="wrong"data-success="right"for="modalLRInput14">Repeat password</label> </div> <divclass="text-center form-sm mt-2"> <buttonclass="btn btn-red">Sign up <iclass="fa fa-sign-in ml-1"></i></button> </div> </div> <!--Footer--> <divclass="modal-footer"> <divclass="options text-right"> <pclass="pt-1">Already have an account? <ahref="#"class="blue-text">Log In</a></p> </div> <buttontype="button"class="btn btn-outline-red waves-effect ml-auto"data-dismiss="modal">Close</button> </div> </div> <!--/.Panel 8--> </div> </div> </div> <!--/.Content--> </div> </div> <!--Modal: Login / Register Form--> </main> This is my style.css code: body, html { height: 100%; } .bgClass { /* Full height */ height: 100%; /* Center and scale the image nicely */ background-position: center; background-repeat: no-repeat; background-size: cover; }

Piotr Glejzer staff commented 6 years ago

Hi, what is the version of our product what do you use? I recommend you to download to 4.5.6 version what we release recently. About your question. I need more information about that. Is that bug or something or do you want 'navbar shift to right when open model.' with your own idea? Best, Piotr


Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Opened

Specification of the issue

  • ForumUser: Free
  • Premium support: No
  • Technology: General Bootstrap questions
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No
Tags