Efficiently finding the right section by utilizing the hamburger menu, ensuring the menu does not obscure the text

In my bootstrap application, I am facing an issue with the hamburger menu. To understand the problem better, you will need both a laptop and a mobile device to follow these steps:

1: Visit on your desktop computer.

2: Scroll up and down the page to see that the navbar is fixed, which is the desired behavior.

3: Click on any link in the navbar, like 'Courses' or 'Services', and notice how it takes you to the relevant section displaying its title and content.

4: Now, access the website on your mobile device.

5: Open the hamburger menu and navigate to the same section. You will find that even though it takes you to the right place, the section's title is covered by the menu. To view it, you have to close the menu.

I wish for the mobile experience to mirror the desktop one where the section's title is visible without closing the hamburger menu upon navigation.

What changes are necessary to achieve this functionality?

<nav class="navbar navbar-expand-lg navbar-light fixed-top">
...
</nav>

body { 
    padding-top: 80px; 
}

Answer №1

My initial idea was to create a space using CSS by applying a media query and setting the padding for the body to 300px to account for the height of the hamburger menu when it's open. However, this resulted in unsightly white space at the top of the page when the menu was closed.

The Bootstrap navbar adopts a hamburger & dropdown layout starting from 991px. Similar to your suggestion, you can add classes with padding properties to relevant elements to "push down" the content so that it remains visible when the dropdown is open.

@media (max-width: 991px) {
   ...
}

On the JavaScript side, you can check out the Bootstrap Collapse event documentation

$(document).ready(function() {

  $('#navbarSupportedContent').on('show.bs.collapse', function() {
    // Add necessary logic here... include your classes
    console.log('navbar opening');
  })

  $('#navbarSupportedContent').on('hide.bs.collapse', function() {
    // Add necessary logic here... remove your classes
    console.log('navbar closing');
  })

});
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" 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>

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <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="#">Link</a>
      </li>
    </ul>

  </div>
</nav>

While implementing this approach may address your issue, I would advise against it from a UX standpoint. I faced a similar situation on a SPA website I developed, and collapsing the navbar dropdown when navigating improved the overall appearance. This allowed users to view the entire page without obstruction. Simply toggle the class show on the navbar-collapse element to achieve this.

https://i.sstatic.net/eUcML.png

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

Tips for structuring a webpage section on a smaller screen using Bootstrap

Good day, I am inquiring about how to adjust the formatting of a website element when viewed on a different browser size. For instance, this is what my top navigation bar looks like at the LG size: Nav LG However, when I switch to SM size, it appears u ...

Expanding div fills remaining space with scrollable content (Utilizing Bootstrap 4 Flexbox grid)

My code was running smoothly before I enabled flexbox support in Bootstrap 4 Alpha 3: Check out the working jsfiddle here However, once flexbox support was enabled, I hit a roadblock. I'm looking for a solution using Bootstrap 4 built-in Flexbox gri ...

Combining strings with JQuery

Looking for help with a code snippet <script> function goToDetails($i){ $(function(){ var transValue = $('#trans'+$i).html(); var mileageValue = $('#mileage'+$i).html(); var engineValue = $('#eng'+$i).html ...

Enhance your website with Jquery-powered page transitions that can easily be linked for a

I have a client who has a specific vision for their website. To demonstrate the concept, I've created a demo which can be viewed here: She requested page transitions similar to those in the demo for the main content. I used jQuery to implement this ...

Error encountered: popper.js throwing an unexpected token export SyntaxError

Error in Angular: When using popper.js with bootstrap 4, I'm encountering a SyntaxError with Unexpected token export. The error is showing up in the browser console. I tried changing the reference location for popper.min.js but it didn't work. ...

I am receiving a reference error even though the day variable has already been defined. Can you kindly point out

When I attempt to log in, the page is giving me the correct output. Interestingly, even after encountering an error, the webpage continues to function properly. app.get("/", function(req, res) { let day = date.getDate(); console.log(day); r ...

Using Scrapy to extract data from Project Euler's website

Currently, I am working on scraping projecteuler.net using Python's scrapy library as a way to practice my skills. While there are existing implementations of similar scrapers online, they seem too complex for my needs. I simply want to save the probl ...

React component is unable to identify prop

I'm attempting to send an array of objects from the main App.js file to a smaller component using props. However, for some reason, the prop is not being recognized within the smaller component file. https://i.stack.imgur.com/WuyFr.png https://i.stac ...

Removing the blue border around a button upon being clicked

Whenever I press my button, an unexpected event occurs. Is there a solution to avoid this issue? Thank you for your help! :) ...

Having trouble implementing responsive image with fixed aspect ratio code

I've tried several tutorials online to make this image responsive with a fixed aspect ratio, but nothing seems to work. The image is set at 900x400px and I want it to remain fully visible on smaller screens as well. Here's the codepen link < ...

What is the simplest method to transfer a variable from an HTML file to a Python script?

Can someone show me the simplest method to pass a variable from HTML to Python? I'm using the "input" tag to get the variable, and I only need to send it to my Python script without any response back to the HTML. Appreciate your help! ...

Immediate self-invocation occurs within a JavaScript function

My goal is to dynamically create a DOM button object with JavaScript, and it seems to be happening perfectly fine. However, I'm facing an issue where if I try to assign another JavaScript function to one of the buttons, the other script triggers itsel ...

A guide on utilizing Node.js and Express to read a text file and convert it into an HTML table

As a Node.js developer using Express, I am delving into the realm of Javascript for the first time. My goal is to parse a text file and extract specific data from it to display in an HTML table. Currently, I can successfully open and read the file using fs ...

What is the best way to ensure consistent display of a bootstrap 4 card structure on both mobile and desktop devices?

I'm attempting to make the bootstrap card look the same on mobile as it does on desktop, but I haven't been able to find a solution online. No snippets have been helpful! Below is a comparison of the appearance of the bootstrap v4 card: Desktop ...

Is there a way to efficiently access checkboxes by their IDs and toggle classes without the need for redundant classes and functions?

In my current project, I have set up functionality to toggle classes on a table for hiding specific columns. This is determined by checkboxes selected by the user above the table, each checkbox having its own unique ID like "product_1", "product_2", and so ...

Why does my contact form display PHP code unexpectedly?

I've been following a YouTube tutorial to create a responsive single-page website using Bootstrap. The tutorial covered the front-end, but now I'm stuck on integrating a contact form. I added some PHP code I found online, but there seems to be an ...

Is it possible to bind HTML within an AngularJS partial but encountering an inexplicable issue?

I'm facing an issue with my ng-repeat that involves using a partial HTML file to loop through and display items on a page. The variables within the partial are not displaying, but interestingly enough, the variable {{rule.name}} outside of the partial ...

View information on Android without the need for any HTML formatting

I have a SQLite table filled with records that contain HTML tags. I need help figuring out how to properly display these records in my application so that users only see the actual content without the tags. Any ideas on how to achieve this? Below is the c ...

"Upload a video file and use JavaScript to extract and save the first frame as an image

I have a webpage where users can upload a video file, and the page will generate a thumbnail based on a timestamp provided by the user. Currently, I am focusing on generating the thumbnail from the FIRST frame of the video. Here is an example of my progr ...

Sending a parameter to a form within Edge Animate

I'm facing an issue where I need to pass a variable to a form from Edge Animate. Here's the current instruction snippet: sym.$("form").append('<iframe width="100%" height="100%" src="login_PRA.php?v_id="vidn frameborder="0" scrolling="no ...