Guten Tag,
ich habe vor auf meiner Webseite ein Modal zu erstellen.
Sobald ich den Code Einfüge und den Button vom Modal anklicke, öffnet sich zwar das Menü, aber die Navigation Bewegt sich mit. Sie bewegt sich 1x nach rechts und wieder zurück.
Sie verschiebt sich also nicht dauerhaft, aber nervig ist es trotzdem.
Kann mir dabei jemand helfen?
Modal:
Code
<header class="bewerben text-center text-white d-flex">
<div class="container my-auto">
<div class="row">
<div class="col-lg-10 mx-auto">
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
<h1 class="text-uppercase">
<strong style="font-size: 50px">Bewerben</strong>
</h1>
<hr class="test1">
</div>
<div class="col-sm-8 contact-form" style="display: block; margin: 0 auto">
<form id="contact" method="post" class="form" role="form">
<div class="row">
<!-- Benutzername -->
<div class="col-xs-6 col-md-6 form-group">
<input style="opacity: 0.7" class="form-control" name="username" placeholder="Dein Name" type="text" autocomplete="off" required />
</div>
<!-- Dein Alter -->
<div class="col-xs-6 col-md-6 form-group">
<input style="opacity: 0.7" class="form-control" name="deinalter" placeholder="Dein Alter" type="text" autocomplete="off" required />
</div>
<!-- Bereich -->
<div class="col-xs-6 col-md-6 form-group">
<select style="opacity: 0.7" name='bereich' class='form-control show-tick' autocomplete="off" required>
<option style="opacity: 0.7" value='' disabled selected><p style="color: blue">Bitte wähle einen Bereich</p></option>
<option style="opacity: 0.7" value='' disabled><u>----------------------------------------------------------</u></option>
<option style="opacity: 0.7" id='mod' value='Moderator' style='font-weight: bold;'>Moderation</option>
<option style="opacity: 0.7" id='supp' value='Supporter' style='font-weight: bold;'>Support</option>
<option style="opacity: 0.7" id='dev' value='Developer' style='font-weight: bold;'>Developer</option>
<option style="opacity: 0.7" id='content' value='Content' style='font-weight: bold;'>Content</option>
</select>
</div>
<!-- E-Mail Adresse -->
<div class="col-xs-6 col-md-6 form-group">
<input style="opacity: 0.7" class="form-control" name="email" placeholder="Deine E-Mail Adresse" type="email" autocomplete="off" required />
</div>
</div>
<textarea style="opacity: 0.7" class="form-control" name="aboutyou" name="gruss" placeholder="Erzähl uns etwas über dich." rows="5"></textarea>
<br />
<div class="row">
<div class="" style="display: block; margin: 0 auto">
<button name='submitted' class="btn btn-primary pull-right" style="width: 300px">Bewerbung absenden</button>
</form>
</div>
</div>
</div>
</div>
</div>
</header>Navigation:
Code
<nav class="navbar navbar-expand-lg navbar-light fixed-top" id="mainNav" style="color: blue; position: fixed">
<div class="container">
<a class="navbar-brand js-scroll-trigger" href="#page-top">BassRadio.de</a>
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li id="start2" class="nav-item active">
<a id="start2" class="nav-link js-scroll-trigger" href="">Start</a>
</li>
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="team.php">Serverteam</a>
</li>
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="">Partner</a>
</li>
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="">Bewerbungen</a>
</li>
</ul>
</div>
</div>
</nav>Vielleicht kann mir ja jemand Helfen.
Mit freundlichen Grußen
CuzImCloud