Bootstrap 4 Modal - Menu

The name of the pictureThe name of the pictureThe name of the pictureClash Royale CLAN TAG#URR8PPP


Bootstrap 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>





You are missing an opening <nav>
– Rob
13 mins ago


<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.

-

Popular posts from this blog

Makefile test if variable is not empty

Makefile test if variable is not empty In a makefile I'm trying to I've created this simplified makefile to demonstrate my problem. Neither make a or make b executes the body of the if, I don't understand why not. make a make b .PHONY: a b a: $(eval MY_VAR = $(shell echo whatever)) @echo MY_VAR is $(MY_VAR) $(info $(MY_VAR)) ifneq ($(strip $(MY_VAR)),) @echo "should be executed" endif @echo done b: $(eval MY_VAR = $(shell echo '')) @echo MY_VAR is $(MY_VAR) $(info $(MY_VAR)) ifneq ($(strip $(MY_VAR)),) @echo "should not be executed" endif @echo done I'm using $ make --version GNU Make 3.81 There are several problems, and misunderstandings. Your MY_VAR is a make variable, set it without a <tab> to its value, and no need to $(eval ...) . MY_VAR:=$(shell echo whatever) is enough. No <tab> before $(info ...) neither, this is make – Zelnes ...
Read more

Will Oldham

Image
"Palace Music" redirects here. For the racehorse, see Palace Music (horse). Bonnie 'Prince' Billy Will Oldham, June 6, 2009 Background information Birth name William Oldham Also known as Palace Brothers Palace Music Bonnie 'Prince' Billy Born ( 1970-12-24 ) December 24, 1970 (age 47) Louisville, Kentucky, United States Genres Folk alternative country country freak folk [1] Years active 1993–present Labels Drag City, Domino, Spunk Associated acts Dawn McCarthy, The Cairo Gang, Mekons, Matt Sweeney, Mick Turner, Tortoise, Trembling Bells, Harem Scarem, The Picket Line, Alex Neilson, Björk, Slint Website www.bonnieprincebilly.com Will Oldham (born December 24, 1970), better known by the stage name Bonnie 'Prince' Billy , is an American singer-songwriter and actor. From 1993 to 1997, he performed and recorded under variations of the Palace name, including the Palace Brothers, Palace Songs, and Palace Music. After releasing material under his own name,...
Read more

'Series' object is not callable Error / Statsmodels illegal variable name

Image
Clash Royale CLAN TAG #URR8PPP 'Series' object is not callable Error / Statsmodels illegal variable name Update: You can download my dataset here. I am running a simple OLS regression with statsmodels and pandas dataframe as following: import statsmodels.formula.api as sm import pandas as pd df=pd.read_csv("exp.csv") #df is a dataframe that I have containing many variable names such as AAPL, SPY, INF, etc. for column in df: result=sm.ols(formula="SPY"+" ~ "+column, data=df).fit() However, one of the column name in df is INF . I guess maybe INF is a reserved word for pasty, the code gives me the following error: INF INF Traceback (most recent call last): File "<stdin>", line 1, in <module> File "/home/ap248/.local/easybuild/software/2017/Core/miniconda2/4.3.27/lib/python2.7/site-packages/statsmodels/base/model.py", line 155, in from_formula missing=missing) File "/home/ap248/.local/easybuild/softw...
Read more