How do I link a URL to the bootstrap menu?

Question

How do I link a URL to the bootstrap menu?

Navigation

#1 by (1 votes)
#2 by (0 votes)

0

I want to put a link to Facebook that opens outside the website but it does not work, only when it collapses for the phone version works. I do not know much about bootstrap. Thanks.

    <!-- Sub Page Menu section -->
  <nav class="main-nav">
                    <a href="#" class="nav-toggle"></a>
                    <ul id="sub-nav" class="nav">

                        <li><a href="#about" class="nav-link">Nosotros</a></li>
                        <li><a href="#menu5" class="nav-link">Servicios</a></li>
                        <li><a href="#testimonials" class="nav-link">Experiencias</a></li>
                        <li><a href="#filtergallery" class="nav-link">Portafolio</a></li>
                        <li><a href="#contactform" class="nav-link">Contacto</a></li>
                        <li> <a href="https://www.facebook.com/lacocoyodotcom/" target="_blank" class="nav-link">facebook</a></li>
                        </ul>
                  </nav>

bootstrap menu url link

asked by Javiviser 29.10.2018 в 03:25

source

2 answers

1

Do it by javascript

    <!-- Sub Page Menu section -->
  <nav class="main-nav">
                    <a href="#" class="nav-toggle"></a>
                    <ul id="sub-nav" class="nav">

                        <li><a href="#about" class="nav-link">Nosotros</a></li>
                        <li><a href="#menu5" class="nav-link">Servicios</a></li>
                        <li><a href="#testimonials" class="nav-link">Experiencias</a></li>
                        <li><a href="#filtergallery" class="nav-link">Portafolio</a></li>
                        <li><a href="#contactform" class="nav-link">Contacto</a></li>
                        <li> <a onclick="window.open('https://www.facebook.com/lacocoyodotcom/','_blank')" class="nav-link">facebook</a></li>
                        </ul>
                  </nav>

answered by 29.10.2018 в 17:06

how can I create a file that takes the name date-time.log autoload with extended classes, inheritance

score 0 · Accepted Answer

I did a test with your code and it does not open the new tab as you indicate, sure there must be an event attached to those links, that is, there must already be an associated event that prevents it from being executed by opening a new window or tab, I solved it by creating an event just to the links where its href attribute starts with http like this:

$("#sub-nav a[href^='http']").on('click', function (e) {
  let href = $(this).attr("href");
  window.open("https://www.facebook.com/lacocoyodotcom/", '_blank');
  
})

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

<nav class="main-nav">
  <a href="#" class="nav-toggle"></a>
  <ul id="sub-nav" class="nav">

      <li><a href="#about" class="nav-link">Nosotros</a></li>
      <li><a href="#menu5" class="nav-link">Servicios</a></li>
      <li><a href="#testimonials" class="nav-link">Experiencias</a></li>
      <li><a href="#filtergallery" class="nav-link">Portafolio</a></li>
      <li><a href="#contactform" class="nav-link">Contacto</a></li>
      <li><a href="https://www.facebook.com/lacocoyodotcom/" class="nav-link">facebook</a></li>
      </ul>
</nav>

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

This does not work with this editor, so to see it work you can see it here .

I hope it works for you.