The Bootstrap 4 navigation bar remains expanded on tablet screens

I recently obtained and modified a basic bootstrap 4 theme. By customization, I mean that I ensured all menu items have the same margin and added my logo.

The issue I encountered is that on tablets, the navbar does not collapse as expected. I have attached a photo of this problem for reference.

You can also take a look at my demo site here.

    <nav class="navbar navbar-expand-lg bg-white" id="site_navigation"> 
    <a class="navbar-brand" href="<?php echo $host; ?>" title="">
        <img src="<?php echo $host; ?>/images/assets/logo2.png" class="img-responsive site_logo" alt=""/>
    </a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation"> 
        <span class="navbar-toggler-icon"><i class="fa fa-bars navbar_ikon"></i></span>
    </button>
  <div class="collapse navbar-collapse" id="navbarsExampleDefault">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="http://example.com" id="dropdown01" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Services</a>
        <div class="dropdown-menu" aria-labelledby="dropdown01"> <a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">Another action</a> <a class="dropdown-item" href="#">Something else here</a> </div>
      </li>
      <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="http://example.com" id="dropdown01" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">About us</a>
        <div class="dropdown-menu" aria-labelledby="dropdown01"> <a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">Another action</a> <a class="dropdown-item" href="#">Something else here</a> </div>
      </li>
      <li class="nav-item"> <a class="nav-link" href="<?php echo $host; ?>/webshop-creation">Webshop Creation</a> </li>
      <li class="nav-item"> <a class="nav-link" href="#">References</a> </li>
      
    </ul>
    <ul class="navbar-nav ml-auto">
      <li class="nav-item"> <a class="nav_link_last_1" href="#"><i class="fa fa-envelope"></i> Contact Us</a> </li>  
      <li class="nav-item"> <a class="nav_link_last_2" href="#"><i class="fa fa-file"></i> Request a Quote</a></li>
    </ul>
  </div>
</nav>

This is where the issue lies on tablet view - what's causing the logo to disappear and how are the menu items affected?

htmlcssbootstrap-4responsive-design

Answer №1

The situation is expected as the collapse occurs at 992px. When viewing in landscape mode on your tablet, it likely exceeds this threshold. Even with browser inspection tools, the display appears consistent. Therefore, adjust the class to expand using xl instead of lg.

Alternatively, you may opt for a smaller font-size.

Answer №2

Is the issue specific to landscape mode only?

Possible Fix #1

Try changing navbar-expand-lg to navbar-expand-xl

Possible Fix #2

Create a new breakpoint in your .css file for iPad's landscape mode width and use the styles from the lower breakpoint.

Consider setting the new breakpoint at 1024px like this:

@media (min-width: 1024px){

}

You could also create a custom breakpoint that targets the exact width of 1024px by combining min-width and max-width properties.

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

Unable to view mobile version on HTML page / lack of responsiveness observed

<body> <nav class="navbar navbar transparent"> <div class="container-fluid logo"> <div class="navbar-header"> <a class="navbar-brand" href="#"> <img src="images/Logo.png" /> & ...

htmlformstwitter-bootstrapmobileresponsive-design

AngularJS is failing to recognize the onload event when loading a URL

I am currently working with the AngularJS Framework and I have encountered an issue. My directive only seems to work when the window is fully loaded. screensCreators.directive('createscreen', function () { return { restrict: "A", ...

javascriptjqueryangularjshtml

Using the flex:1 property does not automatically make my elements the same size and cover the entire height of the container

I have 2 containers and I want the elements in each container to fill the entire container. My goal is to make one container appear larger than the other. https://i.stack.imgur.com/73yoR.jpg Even though I am using the flex: 1 property, it does not seem t ...

css

Obtain the value for every span class and insert the corresponding string into the input field

I have a series of tags labeled as 'tag-label' in spans. My goal is to combine the values of these tags and insert them into an input field, separating each value with commas. To demonstrate this, I've created a JSFiddle that showcases the ...

javascriptjqueryhtml

Troubleshooting: Issue with Button Layout in Ionic's ItemSliding Component

How can I create a list item that allows swiping to reveal an archive button? The requirement is for the icon to appear to the left of the text. I'm referring to the documentation on Button Layout: https://ionicframework.com/docs/api/components/item ...

cssangulartypescriptionic2ionic3

Steps to eliminate the select all checkbox from mui data grid header

Is there a way to remove the Select All checkbox that appears at the top of the checkbox data column in my table? checkboxSelection The checkboxSelection feature adds checkboxes for every row, including the Select All checkbox in the header. How can I ...

javascriptcssreactjsmaterial-uidatagrid

What factors should you consider when selecting between Bootstrap and MDBootstrap for your class usage?

My CSS skills are not very advanced. I have been using MDBootstrap for most of the styling on my project, but I am not a fan of its table styling. I would prefer to use the table CSS class from regular Bootstrap instead of MDB. I have both dependencies inc ...

cssbootstrap-5mdbootstrap

Using AngularJS ng-repeat to pass href links

I am facing an issue with displaying hyperlinks in a list of messages obtained from server response using AngularJS. $scope.messages = [] When a button is clicked, the content of a text area is added to the array using ng-click method. This message is th ...

javascriptjqueryhtmlangularjs

Tips on Importing a Javascript Module from an external javascript file into an <script> tag within an HTML file

I'm facing an issue while attempting to import the 'JSZip' module from an external node package called JSZip in my HTML File. The usual method of importing it directly using the import command is not working: <script> import ...

javascripthtmltypescriptfigmafigma-api

What is the proper way to integrate EJS tags within script tags in EJS files?

I am encountering an issue with the code in my index.ejs file from YelpCamp, which is a part of Colt Steele's course. const campgrounds = <%- JSON.stringify(campgrounds) %>; I attempted to fix it by changing the code to: const campgrounds = &ap ...

javascripthtmljsonexpressejs

I have noticed that the share buttons on Sharethis.com only show up after I resize the viewport

After integrating share buttons from Sharethis.com, I noticed that they do not appear when the page is refreshed. However, when I resize the viewport, they suddenly show up. <!DOCTYPE html> <html lang="en"> <head> <script t ...

htmlbuttonsharebootstrap-5

Choose all stylus/css imports except for those with a specific ending

How can a rule be correctly written in a .styl file to import all files from selected folders except those that contain the -ie suffix (e.g. bar-ie.style)? What is the best way to achieve this? The code below is not functioning as expected: import([&apos ...

cssregeximportstylus

Tips for ensuring that your modal functions properly with an image tag within a figure tag

I'm facing an issue with getting a modal to display on my image gallery. The problem arises when the images are enclosed within figure tags, necessary for my hover effect, causing the modal to malfunction. I suspect that the problem lies within the f ...

javascripthtml

What are the best ways to change the styling of jquery ui widgets?

Currently utilizing jQuery UI, I have encountered an issue with the font size within a dialog. When utilizing the standard settings, the font size appears to be excessively large. To address this, I used the element inspector to identify the class name o ...

jquerycssjquery-ui

What steps can be taken to ensure that the design of this page flows seamlessly?

Interested in a design similar to this https://i.sstatic.net/wbXo2.jpg <!DOCTYPE html> <html lang="en> <head> <meta charset="UTF-8> <title>Title</title> <style> html, body { height: 100%; margin: 0; ...

htmlcss

Receive a notification when the div element stops scrolling

I am attempting to replicate Android's expandable toolbar within an Angular component. My HTML code appears as follows: <div (scroll)="someScroll($event)"> <div class="toolbar"></div> <div class="body"></div> </d ...

javascripthtmlangularevents

Best practices for implementing dual ngFor directives within a single tr element?

Click here to view the page The image attached shows the view I want to iterate through two ngFor loops inside the tr tag. When using a div tag inside the tr, it's looping the button next to the tag instead of where I want it in the file table header ...

htmlangulartypescriptuser-interfaceangular-material

Tips on including a trash can symbol to rows in a bootstrap table using React

I am working on a table that contains various fields, and I want to add a trash icon to each row so that when it is clicked, the specific row is deleted. However, I am encountering an issue where the trash icon is not showing up on the row and I am unable ...

javascriptreactjstypescriptbootstrap-4react-bootstrap

Exploring Web Scraping Through Dual System Security

I come seeking guidance on how to navigate a website with two different security systems in place. The first system requires a username and password, which I have successfully managed to handle. However, the second security system only requires a password ...

pythonhtmlauthenticationweb-scraping

What is the best way to arrange <div> elements with text inside without moving the text?

I need help figuring out how to stack one or more <div> elements on top of another <div> element while maintaining the text content within each. My issue is illustrated in this fiddle: https://jsfiddle.net/rd268ucy/1/. When attempting to drag o ...

javascripthtmlcss