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;
}
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
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