Hide the navigation bar elements specifically on Safari browser when using Bootstrap v4.5.3

I'm having an issue with my Bootstrap v4.5.3 navbar not displaying correctly on Safari browser. All I see is the colored line, no text or hamburger icon. Can anyone help me with this?

Here is my Navbar Code:

<nav class="navbar navbar-expand-lg navbar-dark deep-orange darken-4">
    <div class="container">
        <div class="row">
          <a class="navbar-brand" href="<?php echo'index.php?lang='.$_GET['lang'].'&page=home'; ?>"><?php echo $lang['pagename'] ?></a>
          <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#mainNavBar" aria-controls="mainNavBar" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
          </button>

          <div class="collapse navbar-collapse" id="mainNavBar">
            <ul class="navbar-nav mr-auto">
              <li class="nav-item <?php if(($_GET["page"] == 'home') || ($_GET["page"] == '')) { echo "active";} ?>">
                <a class="nav-link" href="index.php?lang=<?php echo $_GET['lang']; ?>&page=home"><?php echo $lang['homepage'] ?></a>
              </li>
            ....
            </ul>
          </div>
      </div>
  </div>
</nav>

Answer №1

Uncertain about the desired colors for .deep-orange and .darken-4 since no CSS has been provided with your question

It's worth mentioning that you don't need to use .row inside the .navbar > .container div. Simply using .container will align the .navbar content width breakpoints with your other .container elements. (until the navbar switches to mobile nav, at which point the container becomes fluid, allowing users to easily access the hamburger menu with their thumb in the top right corner.)

Adding .row would interpret immediate child elements as columns, causing issues in your .navbar.

You can find a working demo below that functions correctly in Safari.

Fiddle link also available... https://jsfiddle.net/joshmoto/dr230sox/


Here is a scratch demo of the aforementioned code to test on your devices...

Check out how it appears on Mobile Safari on an iPhone 5...

https://i.sstatic.net/Wbyi7.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

Transform every URL within the class.phpmailer.php file

After spending 3 weeks searching, I finally stumbled upon these amazing answers >>> How to turn plain URLs into clickable links? However, I am unsure of how to implement this with phpmailer.. I have been utilizing an html form to send informatio ...

Ensuring consistent height for the initial div across separate columns (Bootstrap 4)

Here is the HTML structure that needs adjustment: <div class="container"> <div class="row"> <div class="col-12 col-sm-12 col-lg-4 col-md-4"> <div class="title">Some title</div> <ul&g ...

The JavaScript code malfunctions when I introduce a new HTML tag

I am attempting to create a simple photo gallery using PhotoSwipe. However, I have encountered an issue where certain functions like Previous and Next buttons stop working when I add new HTML elements. Here is the original code: <div class="my-gallery ...

The {shade} of the code has been modified within brackets

Ever encountered your code's colors abruptly changing to red and green in the middle of an HTML page? My editor is Brackets, and while it doesn't pose any issues, it's really bothersome and makes the code difficult to read: Take a look at t ...

Ensuring form labels are properly aligned with input-group-prepend in Bootstrap

Currently, I am developing a python/django website using bootstrap, and I have encountered an issue that I cannot resolve independently. It has been quite some time since I last worked with python/django/bootstrap, so I may be overlooking something? <fo ...

A Firefox Browser View of a Next.js and Tailwind Website magnified for closer inspection

After creating a website using Next.js and Tailwind CSS, I noticed that the site is appearing zoomed in when viewed in Firefox. However, it looks fine in all other browsers. When I adjust the screen to 80%, the website displays correctly in Firefox. What ...

Persist all user input data entered during the registration process on the front end

I am looking to store all user information captured during the registration process on the front end. While some default details like name and nickname are saved automatically, I want to ensure that all information such as "about us," biography, date of bi ...

Placing a CSS overlay above a jQuery element. How to manage z-index?

I'm looking to superimpose a CSS element over some ongoing Jquery activity in the background. The goal is to have the white box displayed prominently, while the jquery popup text appears neatly within the grey side sections. I want the white box to e ...

Tips on incorporating a color picker in HTML using jQuery

Looking to implement an HTML color picker with the help of JQuery. Wondering if there is a simpler method to do this without relying on external JQuery libraries? Experimented with <input type="color"> but encountered issues that prevented it from ...

When a DIV is clicked, trigger the fadein effect on another DIV; when the same DIV is clicked again, fade

I have a sliding panel on my webpage that reveals the navigation (www.helloarchie.blue). I want the content inside the panel to fade in slowly when it slides out, and then fade out when the user clicks the icon to close the panel. How can I achieve this ef ...

Why aren't my laptop media query CSS styles being applied?

My laptop size media query is not applying the CSS styles I want. I have tried using both min and max width but without success. I am trying to replicate the layout found here: @media screen and (min-width: 960px) and (max-width:1199px){ .grid-co ...

Custom dropdown selection using solely JavaScript for hidden/unhidden options

I'm trying to simplify things here. I want to create a form that, when completed, will print the page. The form should have 3-4 drop-down lists with yes or no options. Some of the drop-downs will reveal the next hidden div on the form regardless of th ...

Tips for ensuring all my onclick event are clickable in iOS browser

Currently, I am developing a web page using HTML5 and JQuery Mobile. I have encountered an issue where the onclick function does not work on iOS device browsers. Is there a way to change all onclick events to be accessible through tapping instead? This wou ...

The x-axis values in Amchart are transitioning rather than shifting

I'm facing an issue with my x-axis values as I'm using real-time amcharts. The x-axis values change every 3 seconds, but instead of smoothly moving, they abruptly change to the next value. I would like it to slide smoothly like this example: htt ...

Correcting W3C validation issues is essential

I am encountering errors in my W3C validation process. Even though I have set <!DOCTYPE HTML> for my page, I continue to experience issues as shown in the image below. I have been trying to troubleshoot and resolve these errors without much success ...

The sizing of table rows within a card body appears to be incorrect while using Bootstrap 4

Within a card element, I have a table where one of the cells contains a progress bar. Unfortunately, the width of this specific column is not rendering as desired (col-xs-8). I've attempted adjusting the width on table headers and specific data column ...

What is the best way to align 3 divs next to each other with spacing and borders?

I'm having trouble aligning three divs side by side. When I try to add borders and a small gap between each div, the third div ends up on a new line. Is there a way to automatically resize the divs so they fit together? HTML: <div class="trendi ...

Display the website logo when users share on WhatsApp

My goal is to have my website icon appear in WhatsApp when I share it (similar to the example below). https://i.stack.imgur.com/KCWi8.jpg I initially tried using this code, but it didn't work: <link rel="shortcut icon" href="css/img/favicon/favi ...

Show the name of the chosen attribute option next to the label for variable products in Woocommerce

Is there a way in WooCommerce to have the selected attribute name displayed next to its label? <th class="label"> <label for="<?php echo esc_attr( sanitize_title( $attribute_name ) ); ?>"><?php echo wc_attribute ...

What is the correct method for storing an XML value node with the character &amp;#38 in a database?

Recently, I received an XML in my asp.net 4.8 backend application from a sender. Here is an example of the XML: <person> <name>example1 &amp;#38 example2</name> </person> My server app reads the node value and stores it in a ...