I am looking to have my Bootstrap 4 navbar expand when it is hovered over

I have created a navbar using bootstrap 4. I am looking for a solution using either javascript or jquery to make the navbar expand when hovering over the hamburger icon.

    <div class="pos-f-t">
  <div class="collapse" id="navbarToggleExternalContent">
    <div class="bg-dark p-4">
        <ul class="navbar-nav mr-auto">
          <li class="nav-item active">
            <a class="nav-link" href="#">Home</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Agency</a>
          </li>
                <li class="nav-item">
            <a class="nav-link" href="#">Work</a>
          </li>
                <li class="nav-item">
            <a class="nav-link" href="#">Careers</a>
          </li>
                <li class="nav-item">
            <a class="nav-link" href="#">Contact US</a>
          </li>
        </ul>
    </div>
  </div>
  <nav class="navbar navbar-dark bg-dark">
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarToggleExternalContent" aria-controls="navbarToggleExternalContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
  </nav>
</div>
javascriptjquerycssbootstrap-4

Answer №1

  $(document).ready(function() {
  $('.navbar-toggler').mouseover(function() {
  if($('.collapse').css('display') == 'none')
            $('.collapse').show();
            else
             $('.collapse').hide();
        })
        });
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>


   <div class="pos-f-t">
  <div class="collapse" id="navbarToggleExternalContent">
    <div class="bg-dark p-4">
        <ul class="navbar-nav mr-auto">
          <li class="nav-item active">
            <a class="nav-link" href="#">Home</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Agency</a>
          </li>
                <li class="nav-item">
            <a class="nav-link" href="#">Work</a>
          </li>
                <li class="nav-item">
            <a class="nav-link" href="#">Careers</a>
          </li>
                <li class="nav-item">
            <a class="nav-link" href="#">Contact US</a>
          </li>
        </ul>
    </div>
  </div>
  <nav class="navbar navbar-dark bg-dark">
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarToggleExternalContent" aria-controls="navbarToggleExternalContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
  </nav>
</div>

Answer №2

This is my plan

$('.navbar-toggler').on('mouseenter', function(){
$('.collapse').addClass('show');
});

$('.pos-f-t').on('mouseleave', function(){
$('.collapse').removeClass('show');
});
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>

<div class="pos-f-t">
  <div class="collapse" id="navbarToggleExternalContent">
    <div class="bg-dark p-4">
        <ul class="navbar-nav mr-auto">
          <li class="nav-item active">
            <a class="nav-link" href="#">Home</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Agency</a>
          </li>
                <li class="nav-item">
            <a class="nav-link" href="#">Work</a>
          </li>
                <li class="nav-item">
            <a class="nav-link" href="#">Careers</a>
          </li>
                <li class="nav-item">
            <a class="nav-link" href="#">Contact US</a>
          </li>
        </ul>
    </div>
  </div>
  <nav class="navbar navbar-dark bg-dark">
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarToggleExternalContent" aria-controls="navbarToggleExternalContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
  </nav>
</div>

Answer №3

In my opinion, utilizing IDs is a more efficient method for displaying and concealing the navigation bar:

$('.navbar-toggler').mouseenter(function()
 {
   $('#navbarToggleExternalContent').css("display")!="block"?
   $('#navbarToggleExternalContent').show():
   $('#navbarToggleExternalContent').hide()

});

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Customize URL paths with separate templates using ui-router

I'm currently utilizing angular-ui-router's nested states feature to manage my views. My objective is to set up two routes: /artists - this will display the main page for all artists /artists/:id - this route will showcase the individual artist ...

javascriptangularjsangular-ui-router

AngularJS | Dependency Injection appears to be silent and non-responsive

I've hit a roadblock in finding solutions to my query. In essence, I'm aiming to achieve dependency injection by linking my directive from the 'directives.js' file to be accessible in my controller within the 'controllers.js' ...

javascriptangularjsdependency-injection

What could be causing the Angular HTTPClient to make duplicate REST calls in this scenario?

I am encountering an issue with my Angular service that consumes a Rest API. Upon inspecting the network and the backend, I noticed that the API is being called twice every time: Here is a snippet of my Service code: getAllUsers():Observable<any>{ ...

javascriptangularrxjshttpclient

Selenium and PhantomJS are having trouble interpreting JavaScript code

Currently experimenting with Selenium and PhantomJS for Java search tasks, I'm facing an issue where PhantomJS fails to activate javascript. My goal is to access a webpage that utilizes javascript. Previously, this method worked well for me, but now I ...

javascriptjavahtmlseleniumphantomjs

Need help with writing code in Angular for setting intervals and clearing intervals?

I am working on the functionality to display a loader gif and data accordingly in Angular. I have tried using plain JavaScript setInterval code but it doesn't work for $scope.showLoader=true and $scope.showResult=true. The console.log('found the ...

javascriptangularjs

Ways to terminate a NOHUP process for Node.js started through SSH

I have initiated a node.js server on port 3000 using nohup for background running, but now I need to stop the server on the same port and start it again. How can I stop the process? To identify the process in order to kill it, I can use this command: ps ...

javascriptlinuxnode.jsbashssh

Verify the data type of the returned information from the graphql query

Within my code, I am utilizing a graphql query through a hook that has been automatically generated by Codegen. Codegen not only creates return types but also all data types required. According to the types defined by codegen, the expected return type of m ...

javascriptreactjstypescriptgraphqlapollo

When attempting to display a sub view in Express, a 404 error is encountered

I am currently working with express and jade to display a web page. My intention is to render the page using this format 'http://127.0.0.1:5000/services/landfreight' but I keep encountering a 404 error. router.get('/service/landfreight' ...

javascriptnode.jsexpresspug

PHP serialization data retrieval issue

I have been using jQuery to serialize form data with the following code: var data = $('#frm').serialize(); After sending it to PHP, I receive this string: fiscalyear_id=4&category=Category+A&isgraph=on&Title=a&Value=a&Title ...

phpjqueryserialization

Please proceed by submitting all radio buttons that have been checked

Seeking assistance with creating a quiz application using the MEAN stack. Once all questions are attempted, there will be a submit button for checking all selected radio buttons - option 1 corresponds to 1, option 2 to 2, and so on. The current structure o ...

javascriptangularjsnode.jsmongodb

Adjust the parent element's height based on the child element's height, taking into consideration their respective positions

Is there a way to adjust the height of the parent element that has a relative position based on the height of child elements with absolute position? In the example below, the height of the .parent element is displaying as 0px Note: I am looking for a so ...

htmlcss

employing rowspan functionality within a JavaScript application

How can I achieve a table layout where the first two columns are fixed for only one row and the remaining rows are repeated 7 times? Additionally, is there a way to make the bottom border of the last row thicker? Check out the expected table for reference. ...

javascripthtmlcss

How can a functional component be created in VueJS using x-templates?

Looking to create a functional component in VueJS with a template as a single-file component? Utilizing x-templates means your component will be stored in a .html file. Want to transform the given component into a functional component? <!-- my_compone ...

javascripthtmlvue.js

Finding the location of an "Apply" button on an Angular HTML page

There is an issue with the positioning of the apply button in the filter bar. Sometimes it displays in the next row instead of alongside the other filters. How can I determine the exact position of this apply button within the HTML page? <div class=&quo ...

htmlcssangularbuttonposition

Issues have been encountered with activating checkboxes on Internet Explorer while utilizing ASP.NET CheckBox controls

I'm facing an issue with an HTML form that includes two disabled checkboxes and an image with an onclick event intended to display a popup and enable the checkboxes: <input id="chk1" type="checkbox" disabled="disabled" /> <input id="chk2" ty ...

javascriptasp.netservercontrols

How to Shift Focus to a Component in Vue.js

Within a container, I have a form section enclosed by a component that remains hidden due to the use of v-if. Upon clicking a button, the boolean value is toggled, revealing the previously concealed component. At this point, I aim to shift focus to the ini ...

javascriptvue.jsfocusaria-live

Guide to scraping a website using node.js, ASP, and AJAX

I am currently facing an issue where I need to perform web scraping on this specific webpage form. This webpage is dedicated to vehicle technical reviews, and you can try inputting the car license CDSR70 for testing purposes. As mentioned earlier, I am u ...

javascriptasp.netajaxnode.jsweb-scraping

What is the best way to connect a CSS file with multiple pages located within a specific folder in HTML/CSS?

In my CS 205 class project, I am tasked with creating a website. To accomplish this, I used Notepad++ for the HTML files and Notepad for the CSS files. The site consists of an index.html page along with other content pages, each designed separately in Note ...

csshtml

Show unique language text in the <noscript> element based on the user's browser language

I am just starting out with HTML, and I would like to show a message if JavaScript is disabled. To do this, I have placed the message within the <noscript> tag, which is working perfectly. <noscript> Need to enable Javascript. </noscript> ...

javascripthtml

What is the best way to retrieve the chosen ID from a list box and pass it to a getJSON function within an ASP.Net MVC application?

I'm facing a challenge with my list box setup... @Html.ListBoxFor(model => model.SelectedCalendarId, Model.PeriodList) After setting up a jQuery call to my controller with a hardcoded value... var calId = 12; $.getJSON("/Publishing/GetLockState1 ...

jqueryasp.net-mvc-3getjson