Estoy queriendo agregarle vinculo a los a href de un menu como ejemplo Chapas y chapas acanaladas que vinculen a un sitio pero no me deja. Quería saber como si hay alguna forma que ademas de que abra su respectiva solapa vincule a una pagina.
adjunto un fragmento de código donde quiero el vinculo.
<a class="nav-link dropdown-toggle" href="https://www.google.com/" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Por otro lado como hacer para que en mobile el menu no quede desplegado y se contraiga.
.categoria-prod #collapsingNavbar .dropdown .dropdown-menu {
position: absolute;
transform: translate3d(0px, 41px, 0px);
top: -43px!important;
left: 252px!important;
will-change: transform;
background: #868686;
border-radius: initial;
color: #fff;
padding-top: 0;
padding-bottom: 0;
}
.categoria-prod #collapsingNavbar .dropdown .hijas-de-hijas {
position: absolute;
transform: translate3d(0px, 41px, 0px);
top: -42px!important;
left: 218px!important;
will-change: transform;
background: #868686;
border-radius: initial;
color: #fff;
font-size: 14px;
padding-top: 0;
padding-bottom: 0;
}
.categoria-prod #collapsingNavbar .dropdown-item.active,
.dropdown-item:active {
background-color: #f5131f;
color: #fff!important
}
.categoria-prod #collapsingNavbar .dropdown .dropdown-menu a {
color: #fff;
padding-left: 14px;
padding-right: 14px;
padding-top: 9px;
padding-bottom: 9px;
}
.categoria-prod #collapsingNavbar .dropdown .dropdown-menu a:hover {
color: #000;
background: #fff;
}
.categoria-prod .bg-prod {
background-color: #f5131f;
}
.categoria-prod .bg-prod .btn-dropdown {
background-color: #f5131f;
width: 100%;
color: #fff;
border-radius: initial!important;
border: initial!important;
text-align: left;
padding: 10px 15px 10px 20px;
border-color: initial!important;
font-weight: 600;
font-size: 17px;
}
.categoria-prod .bg-prod .btn-dropdown i {
float: right;
font-size: 23px;
}
.categoria-prod .bg-prod .navbar-collapse {
padding-top: 0!important;
background-color: #454545;
border-radius: initial;
}
.categoria-prod .bg-prod .navbar-collapse li {
margin: 18px 15px 18px 5px;
}
.categoria-prod .bg-prod .navbar-collapse li a {
padding: 0px 0px 0 10px;
color: #fff;
width: 100%;
display: block;
}
.categoria-prod .bg-prod .navbar-collapse li a:hover {
text-decoration: none;
color: #dcdcdc;
}
.categoria-prod .bg-prod .navbar-collapse li .padre li {
margin: 5px 5px 10px 5px;
}
.categoria-prod .bg-prod .navbar-collapse li:last-child {
margin: 18px 15px 8px 5px;
}
.categoria-prod .bg-prod .navbar-collapse li .padre li:last-child {
margin: 0px 15px 0px 5px;
}
.dropdown-submenu {
position: relative;
}
.dropdown-submenu>.dropdown-menu {
top: 0;
left: 107%;
background-color: #868686;
margin-left: -1px;
width: 100%
}
.dropdown-submenu:hover>.dropdown-menu {
display: block;
border-radius: initial
}
.dropdown-submenu:hover>.dropdown-menu .submenu-hijo {
left: 102%;
margin: 0;
padding: 0;
}
.categoria-prod .bg-prod .dropdown-submenu:hover>.dropdown-menu>li>a {
padding: 0px 10px;
margin: 0;
}
.categoria-prod .bg-prod .dropdown-submenu:hover>.dropdown-menu>li>a:hover {
text-decoration: none;
color: #dcdcdc
}
.categoria-prod .bg-prod .dropdown-submenu:hover>.dropdown-menu>li .submenu-hijo li {
margin: 8px 10px 8px 0;
padding: 0;
border-radius: initial;
}
.categoria-prod .bg-prod .dropdown-submenu:hover>.dropdown-menu>li .submenu-hijo li a {
font-size: 14px
}
.dropdown-submenu>a:after {
display: block;
content: " ";
float: right;
width: 0;
height: 0;
border-color: transparent;
margin-top: 5px;
margin-right: -10px;
}
.dropdown-submenu.pull-left {
float: none;
}
.dropdown-submenu.pull-left>.dropdown-menu {
left: -100%;
margin-left: 10px;
}
#collapsingNavbar {
position: absolute;
z-index: 10;
width: 100%;
top: 57px;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">
<div class="container categoria-prod pt-3 pt-lg-0">
<div class="row">
<div class="col-lg-3 p-0 pl-lg-0 pr-lg-3">
<div class="bg-prod">
<div class="py-lg-3 ">
<div class="dropdown">
<a id="dLabel" role="button" class="btn btn-dropdown" href="/page.html" type="button" data-toggle="collapse" data-target="#collapsingNavbar">
Producto
<i class="fas fa-list-ul"></i>
</a>
<ul class="dropdown-menu multi-level navbar-collapse collapse " role="menu" aria-labelledby="dropdownMenu" id="collapsingNavbar">
<li><a href="#">Hierro</a></li>
<li><a href="#">Perfiles</a></li>
<li class="dropdown-submenu">
<a tabindex="-1" href="www.google.com">Chapas
<span class="fa fa-chevron-right float-right mt-1" aria-hidden="true"></span>
</a>
<ul class="dropdown-menu padre">
<li><a tabindex="-1" href="#">Second level</a></li>
<li class="dropdown-submenu">
<a href="www.google.com">Chapas acanaladas
<span class="fa fa-chevron-right float-right mt-1" aria-hidden="true"></span>
</a>
<ul class="dropdown-menu submenu-hijo">
<li><a href="www.google.com">Chapa Acanalada Prepintada</a></li>
<li><a href="#">3rd level</a></li>
</ul>
</li>
<li><a href="#">Tubos y caños</a></li>
<li><a href="#">Metal desplegado y rejilla</a></li>
<li><a href="#">Aislaciones y membranas</a></li>
<li><a href="#">Clavos y tornillos</a></li>
<li><a href="#">Alambres y tejidos</a></li>
<li><a href="#">Todo para herrería</a></li>
<li><a href="#">Soldadoras</a></li>
<li><a href="#">Herramientas eléctricas</a></li>
</ul>
</li>
<li><a href="#">Tubos y caños</a></li>
<li><a href="#">Metal desplegado y rejilla</a></li>
<li><a href="#">Aislaciones y membranas</a></li>
<li><a href="#">Clavos y tornillos</a></li>
<li><a href="#">Alambres y tejidos</a></li>
<li><a href="#">Todo para herrería</a></li>
<li><a href="#">Soldadoras</a></li>
<li><a href="#">Herramientas eléctricas</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<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.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>