Bootstrap 4 Modal - Menu
Clash Royale CLAN TAG#URR8PPPBootstrap 4 Modal - Menu
a {
color: inherit;
text-decoration: inherit;
}
a:hover {
color: inherit;
text-decoration: inherit;
}
body {
font-family: 'Roboto Condensed', sans-serif;
}
/* ---------------------------------------------------- */
/* navigation */
.navbar-toggler:focus, .navbar-toggler:active {
outline: none;
border: none;
box-shadow: none;
}
.menu {
padding-left: 10px;
}
.fa-bars, .menu {
color: #006699 !important;
}
.navbar-text {
color: gray;
}
.mainlink {
font-size: 1.75em;
line-height: 1.25em;
font-weight: 400;
}
.sublink {
font-size: 1em;
line-height: 1.15em;
}
.navbar-toggle {
margin-left: 15px;
margin-right: 0;
}
.modal-nav-content {
/* width: 100%; */
height: auto;
}
.modal-nav-body {
margin-top: 10em;
}
.modal-nav-body p {
color: white;
margin: 0;
padding: 0;
padding-top: 6px;
padding-bottom: 6px;
/* width: 100%; */
}
.modal-nav-body h5 {
color: white;
line-height: 1.5em;
font-size: 2.75em;
font-weight: 700;
/* padding-left: 2em; */
padding-bottom: 1.5em;
}
.navbar-toggler::before {
border: none;
background: transparent !important;
}
.navbar-text {
display: inline-block;
word-spacing: 2em;
}
.navbar-text a {
color: #808080;
}
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Roboto+Condensed:300,400,700" rel="stylesheet">
<title>Crossings Realty</title>
</head>
<body>
<nav class="navbar bg-light">
<div class="container">
<a class="navbar-brand" href="#">
<img src="content/crossings-nav.png" alt="Crossings Realty">
</a>
<!-- <span class="navbar-text mr-auto pl-5">
<a href="#">Listings</a>
<a href="#">About</a>
<a href="#">Contact</a>
</span> -->
<span class="navbar-text ml-auto pr-2">
<i class="fas fa-phone fa-xs pr-2"></i><a class="pl-1">444-444-4444</a>
<a class="menu">MENU</a>
</span>
<button class="navbar-toggler collapsed" type="button" data-toggle="modal" data-target="#nav-modal" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<i class="fas fa-bars fa-lg"></i>
</button>
</div>
</nav>
<a>
<div class="modal fade" id="nav-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-nav-content">
<div class="modal-nav-body">
<div class="row">
<h5>Explore.</h5>
</div>
<div class="row">
<div class="col-sm">
<p class="mainlink"><a href="#">HOME</a></p>
<p class="mainlink pt-4"><a href="#">SELLING</a></p>
<p class="mainlink pt-4"><a href="#">LISTINGS</a></p>
<p class="sublink"><a href="#">Buy</a></p>
<p class="sublink"><a href="#">Rent</a></p>
<p class="mainlink pt-4"><a href="#">CONTACT</a></p>
</div>
<div class="col-sm">
<p class="mainlink"><a href="#">ABOUT</a></p>
<p class="sublink"><a href="#">Full Experience</a></p>
<p class="sublink"><a href="#">We Know Real Estate</a></p>
<p class="sublink"><a href="#">Great Agents</a></p>
<p class="mainlink pt-4"><a href="#">RESOURCES</a></p>
<p class="sublink"><a href="#">How we sell fast</a></p>
<p class="sublink"><a href="#">FAQs on buying and selling</a></p>
<p class="sublink"><a href="#">Why use a Realtor?</a></p>
<p class="sublink"><a href="#">We are part of MLS</a></p>
<p class="sublink"><a href="#">Mortgage Calculator</a></p>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
</body>
</html>
Having an issue getting my links to work within the modal. I am using this as a full screen menu. Please let me know what I am doing that is wrong. I've tried putting these links outside the modal on the site and it works but when inside the modal the href is not activated. Thank you for your time and help!
a {
color: inherit;
text-decoration: inherit;
}
a:hover {
color: inherit;
text-decoration: inherit;
}
body {
font-family: 'Roboto Condensed', sans-serif;
}
/* ---------------------------------------------------- */
/* navigation */
.navbar-toggler:focus, .navbar-toggler:active {
outline: none;
border: none;
box-shadow: none;
}
.menu {
padding-left: 10px;
}
.fa-bars, .menu {
color: #006699 !important;
}
.navbar-text {
color: gray;
}
.mainlink {
font-size: 1.75em;
line-height: 1.25em;
font-weight: 400;
}
.sublink {
font-size: 1em;
line-height: 1.15em;
}
.navbar-toggle {
margin-left: 15px;
margin-right: 0;
}
.modal-nav-content {
/* width: 100%; */
height: auto;
}
.modal-nav-body {
margin-top: 10em;
}
.modal-nav-body p {
color: white;
margin: 0;
padding: 0;
padding-top: 6px;
padding-bottom: 6px;
/* width: 100%; */
}
.modal-nav-body h5 {
color: white;
line-height: 1.5em;
font-size: 2.75em;
font-weight: 700;
/* padding-left: 2em; */
padding-bottom: 1.5em;
}
.navbar-toggler::before {
border: none;
background: transparent !important;
}
.navbar-text {
display: inline-block;
word-spacing: 2em;
}
.navbar-text a {
color: #808080;
}
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<button class="navbar-toggler collapsed" type="button" data-toggle="modal" data-target="#nav-modal" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<i class="fas fa-bars fa-lg"></i>
</button>
</div>
</nav>
<a>
<div class="modal fade" id="nav-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-nav-content">
<div class="modal-nav-body">
<div class="row">
<h5>Explore.</h5>
</div>
<div class="row">
<div class="col-sm">
<p class="mainlink"><a href="#">HOME</a></p>
<p class="mainlink pt-4"><a href="#">SELLING</a></p>
<p class="mainlink pt-4"><a href="#">LISTINGS</a></p>
<p class="sublink"><a href="#">Buy</a></p>
<p class="sublink"><a href="#">Rent</a></p>
<p class="mainlink pt-4"><a href="#">CONTACT</a></p>
</div>
<div class="col-sm">
<p class="mainlink"><a href="#">ABOUT</a></p>
<p class="sublink"><a href="#">Full Experience</a></p>
<p class="sublink"><a href="#">We Know Real Estate</a></p>
<p class="sublink"><a href="#">Great Agents</a></p>
<p class="mainlink pt-4"><a href="#">RESOURCES</a></p>
<p class="sublink"><a href="#">How we sell fast</a></p>
<p class="sublink"><a href="#">FAQs on buying and selling</a></p>
<p class="sublink"><a href="#">Why use a Realtor?</a></p>
<p class="sublink"><a href="#">We are part of MLS</a></p>
<p class="sublink"><a href="#">Mortgage Calculator</a></p>
</div>
</div>
</div>
</div>
</div>
</div>
<nav>
1 Answer
1
Your links are contained within an anchor, thus when one clicks on an anchor, it's covered by the parent anchor.
You can't do this:<a><a>link</a></a>
<a><a>link</a></a>
The a element
Content model:
Transparent, but there must be no interactive content or a element descendants.
I've tried a plain link in the modal but doesn't activate. It seems like the modal does not allow links?
– Mitra
3 mins ago
@Mitra The HTML you show is invalid.
– Rob
1 min ago
By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.
You are missing an opening
<nav>– Rob
13 mins ago