Issue with Bootstrap 4 Navbar overlapping content specifically on Apple mobile devices

My bootstrap 4 website () is experiencing an issue with the navbar on Apple mobile devices. On the home page, the navbar doesn't push all the content down, causing some menu items to overlap with the content below. On the "ponentes" page, the content does not get pushed down at all.

Here is the HTML for my home page:

<body>
<div class="outer">
<nav class="navegacion navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="https://sedomadrid2021.com">
    <img src="/img/logo.png" alt="logo" height="110px">
    </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 mx-auto">
      <li class="nav-item active mr-5 ml-5">
        <a class="nav-link btnreg" href="https://sedomadrid2021.com">Inicio <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item mr-5 ml-5">
        <a class="nav-link btnreg" href="https://sedomadrid2021.com/ponentes">Ponentes<span class="sr-only"></span></a>
      </li>
      <li class="nav-item mr-5 ml-5">
        <a class="nav-link btnreg" href="https://sedomadrid2021.com/CartaSEDO.pdf">Inf&oacute;rmate</a>
      </li>
      <li class="nav-item mr-5 ml-5">
        <a class="nav-link btninscrib" href="https://atlanta.eventszone.net/myCongress/form.php?thisFormCongress=sedo21&thisFormLanguage=es">Inscr&iacute;bete</a>
      </li>
    </ul>
  </div>
</nav>
<div class="contenedor-principal">
    <div class="contenedor-texto-principal">
        <span class="texto-titulo-principal">
            ¿Te lo vas<br>a perder?<br>
        </span>
        <span class="texto-parrafo-principal">
            <br>El 67º congreso de la sedo 2021 en Madrid congregará a los mejores profesionales de la ortodoncia de España en un evento de reencuentro cooperación y conocimiento
        </span>
    </div>
<div class="contenedor-bocadillo">
    <img class="fondo-bocadillo" src="/img/bocadillo.png" alt="fondo-texto">
    <span class="texto-bocadillo">Que no te<br>lo cuenten</span>
</div>
</div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
</body>

And this is the HTML for the "ponentes" page:

<... (This part of the text has not been changed) ...>

Here is the CSS being used:

<... (This part of the text has not been changed) ...>

The issue is specifically happening on mobile Apple devices, while other devices and desktops display the content correctly. Feel free to visit the site directly to replicate the issue.

Answer №1

Just a quick update: I've noticed that this issue is not limited to Apple mobile devices; it's also occurring on Windows 10 with the latest version of Firefox when resizing the browser window.

Potential solution:

Upon further inspection, it appears that you are using position: absolute extensively on the main page, causing issues with the dropdown menu. Consider replacing these with a different positioning value, as 'absolute' maintains its position regardless of changes around it.

Answer №2

resolution: My problem stemmed from placing the navbar within the "outer" div, which has a display property of flex.

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

What could be the reason for the hover class not functioning properly in Tailwind?

Looking for some help with styling a button in Next.js using Tailwind. Specifically, I want the background color of the button to change when hovered over. I've been experimenting with code like this: <button className="rounded-full bg-gradie ...

Set up a cronjob based on the specified time entered in an HTML form

For my HTML form, users enter a time in HH:mm format. I aim to set up a cronjob on the system that will automatically delete a specific file based on the user-provided time. The file itself always remains constant, with only the deletion time varying. Th ...

Mobile responsiveness malfunctioning

I recently launched my first responsive design website, which you can view here After testing the responsiveness on Chrome and FF by resizing the window, everything seemed to be working fine. However, when I checked it on my phone, the layout appeared ide ...

What could be causing the tooltip to appear in the wrong position

It may seem like a trivial issue, but I am struggling to get my tooltips to display in the correct position. No matter what I try, they always appear off position. I have searched for solutions and attempted to rearrange the order of scripts, add new scri ...

What is the best way to implement dragging functionality for an image within a specific area?

Here's a snippet of the code I'm working with: link This is the HTML code: <div class="border"> <div id="i-choose"> <input type="file" name="file" id="file" class="inputfile"> <label for="file"& ...

Strip the quotes from MVEL's @foreach when iterating over a string array

I am currently using the @foreach Orb notation within MVEL to loop through a string array. someArrayPartOfAJSONObject = ["Item 1", "Item 2"] <ul> @foreach{item: someArrayPartOfAJSONObject} <li>@{item}</li> </ul> However, when ...

Aligning text fields and text areas is not consistent

Seeking a solution to align two input fields side by side, with a textarea directly below them form ul { list-style: none; text-align: center; } form ul li { display: inline-block; margin-left: auto; margin-right: auto; } #nameform, #emailform ...

The issue with VueEditor in Nuxt.js is that it's throwing an error

When working on my Nuxt.js project, I integrated the vue2-editor package for writing articles with HTML. Everything functions properly when I enter text and submit it, however, upon reloading the page, I encounter an error stating "document is not defined" ...

Issues encountered with integrating external jQuery/JavaScript functions with Wordpress child theme template

After creating a custom template in my WordPress child theme, I added a link to the Bootstrap v3.0.3 .js file stored on my site. While the popup modal is functioning properly, the jQuery tabs seem to be having some issues. Although they are being display ...

Bootstrap modal within a nested clickable div

Utilizing the bootstrap MODAL plugin with nested divs, I have a requirement where clicking on the inside div should display the EDIT form, and clicking on the container div should show the ADD NEW form. Here is the code snippet: <div id="container" sty ...

What could be causing the position sticky to not function properly in my script?

Can someone help me troubleshoot an issue with the TopOptions image and component sticking to the top of the page? {!categorySearch && ( <div className="max-w-2xl mx-auto z-40 relative overflow-x-hidden font-metropolis_semibold" ...

Unable to display the retrieved list data using v-for loop from axios get request

I recently started using Vue.js and decided to create a simple HTML website with Vue.js to display data from myphpadmin using axios. Everything was working smoothly until I encountered an issue where I couldn't display the JSON message on my screen. n ...

JavaScript: Retrieving the following element from the parent container

Is there a way to prevent the next element within the parent tag from being enabled or disabled based on a certain condition? HTML: <span> <input type="checkbox" onchange="toggleInput(this)"> </span> <input type="text" ...

What is the reason for the countdown number's color remaining the same even after it reaches a specific time threshold?

Creating a simple countdown for sports was my idea, but now I'm stuck on the "changeColor" part that I don't have enough knowledge about. The countdown is functioning perfectly, but customizing the colors and adding CSS animations seems challeng ...

What could be causing the issue of not being able to load CSS files or images?

I'm currently in the process of learning how to develop websites, but I've encountered a stumbling block that I can't seem to overcome. I'm hoping someone here can help me out. I'm facing an issue where I am unable to link either a ...

blurred image effect on bootstrap card hover

My attempt to create a blurred image effect on a bootstrap card hover is not working as expected. The blur effect works fine without the hover. Here is the code I have been using: .card-img { transition: all 1s ease; -webkit-filter: blur(0px); ...

Show results based on the selection of multiple checkboxes upon submission

When creating PHP pages to fetch data from databases, each checkbox is linked to a different page. I want to be able to check one or multiple checkboxes and then click the submit button to display the PHP pages that are linked to the checked checkboxes. Ho ...

Quickly redesigning the appearance of file input using javascript and jquery. Seeking assistance to correct css issues on jsfiddle

Hey there, I've been working on styling the input[type="file"] element and could use some assistance. Like the saying goes, "One JSfiddle is worth 1000 words," so here's the link to my example: --- For more details, click here: http://jsfiddle.n ...

Learn how to easily incorporate a drop-down list into the material-UI Search component within the navbar to enhance the search results

I integrated a Material UI search bar into my React app's navbar following the instructions from the official documentation on MUI. However, the article does not provide any guidance on how to add a dropdown list when selecting the search input field. ...

The website functions perfectly on a local server, but once it's uploaded, the images fail

My website is functioning properly on my computer, however, after uploading it to the server, I noticed that some of the links are not appearing. Upon inspecting these links through developer tools, it shows an image size of 'Natural 1 X 1' despi ...