The hamburger menu icon appears distorted when viewed on Safari browser

My website features a sticky hamburger menu on mobile. After testing it on iPhones and Android devices, I noticed that it looks slightly odd on iPhones.

The left image shows how it appears on Android (LG G7 & G6), which is the desired appearance:

The right image displays how it looks on Safari (iPhone):

https://i.sstatic.net/oNScTm.jpg https://i.sstatic.net/4Wv26m.jpg

I prefer the Android version's rounded look without the wide background, how can I achieve this on Safari browsers for iPhone devices?

<div data-id="1455d08b" class="elementor-element elementor-element-1455d08b elementor-column elementor-col-50 elementor-top-column" data-element_type="column">
  <div class="elementor-column-wrap elementor-element-populated">
    <div class="elementor-widget-wrap">
      <div data-id="2831392c" class="elementor-element elementor-element-2831392c elementor-nav-menu__align-center elementor-nav-menu--stretch elementor-nav-menu--indicator-classic elementor-nav-menu--dropdown-tablet elementor-nav-menu__text-align-aside elementor-nav-menu--toggle elementor-nav-menu--burger elementor-widget elementor-widget-nav-menu"
        data-settings="{&quot;full_width&quot;:&quot;stretch&quot;,&quot;layout&quot;:&quot;horizontal&quot;,&quot;toggle&quot;:&quot;burger&quot;}" data-element_type="nav-menu.default">
        <div class="elementor-widget-container">
          <nav class="elementor-nav-menu--main elementor-nav-menu__container elementor-nav-menu--layout-horizontal e--pointer-underline e--animation-slide">
            <ul id="menu-1-2831392c" class="elementor-nav-menu" data-smartmenus-id="15319029903013254">
              <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-home current-menu-item page_item page-item-6 current_page_item menu-item-373"><a href="http://wolfppr.donut.co.il/" class="elementor-item  elementor-item-active">Home</a></li>
              <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-372"><a href="http://wolfppr.donut.co.il/about-us/" class="elementor-item">About Us</a></li>
              <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-371"><a href="http://wolfppr.donut.co.il/our-services/" class="elementor-item">Our Services</a></li>
              <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-370"><a href="http://wolfppr.donut.co.il/hktdc/" class="elementor-item">HKTDC</a></li>
              <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-369"><a href="http://wolfppr.donut.co.il/talk-ahead/" class="elementor-item">Talk Ahead</a></li>
              <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-368"><a href="http://wolfppr.donut.co.il/contact-us/" class="elementor-item">Contact Us</a></li>
            </ul>
          </nav>
          <div class="elementor-menu-toggle" style="">
            <i class="eicon" aria-hidden="true"></i>
          </div>
          <nav class="elementor-nav-menu--dropdown elementor-nav-menu__container" style="top: 39px; width: 375px; right: -269px;">
            <ul id="menu-2-2831392c" class="elementor-nav-menu" data-smartmenus-id="15319029903020608">
              <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-home current-menu-item page_item page-item-6 current_page_item menu-item-373"><a href="http://wolfppr.donut.co.il/" class="elementor-item  elementor-item-active">Home</a></li>
              <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-372"><a href="http://wolfppr.donut.co.il/about-us/" class="elementor-item">About Us</a></li>
              <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-371"><a href="http://wolfppr.donut.co.il/our-services/" class="elementor-item">Our Services</a></li>
              <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-370"><a href="http://wolfppr.donut.co.il/hktdc/" class="elementor-item">HKTDC</a></li>
              <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-369"><a href="http://wolfppr.donut.co.il/talk-ahead/" class="elementor-item">Talk Ahead</a></li>
              <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-368"><a href="http://wolfppr.donut.co.il/contact-us/" class="elementor-item">Contact Us</a></li>
            </ul>
          </nav>
        </div>
      </div>
    </div>
  </div>
</div>

androidhtmlioscssweb

Answer №1

.elementor-menu-toggle {
    width: 39px;
}

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

Android NTLM is receiving an HTTP/1.1 401 Unauthorized status code

Attempting to retrieve data from a SharePoint server, Below is the code snippet: DefaultHttpClient httpclient = new DefaultHttpClient(); httpclient.getAuthSchemes().register("ntlm", new NTLMSchemeFactory()); httpclient.getCredentialsProvider( ...

javaandroidauthenticationsharepointntlm

Enable the feature for users to upload images to a specific folder within the Chrome extension without the need for

I need to implement a feature in my Chrome extension that allows users to upload images directly to a specific folder named "upload" without needing a submit button. <form action="/upload"> <input type="file" name="myimages" accept="image/*"> ...

javascriptjqueryhtmlgoogle-chrome-extensionfirefox-addon

Establishing connections between HTML and CSS files

After writing my html and css code, I noticed that the files are not linking properly. Despite checking for errors, I couldn't find any issues within the codes. Here is a snippet of my html file: <!DOCTYPE html> <html lang="en" dir= ...

htmlcss

How to strategically break Bootstrap 5 button groups for different resolutions?

Is there a way to create a line break in a specific place within a button group on a certain screen size? I have a button group with 4 buttons in a row, and I would like to split it into two lines after the first button if there isn't enough space. ...

cssresponsive-designbootstrap-5

Modifying the verbiage in the menu based on location

Could anyone provide some assistance or guidance on how to solve a small issue I'm facing? I would like the text in my navigation to change depending on my position on the site (position1, position2 etc.) Here is a fiddle link for reference: http:// ...

jquerycssnavigationposition

What is the best way to utilize intents and Kotlin to seamlessly share images from our app to another?

I'm facing an issue trying to share a sample picture from my app via WhatsApp or another photo sharing app. I'm not sure why it's not working, and I can't seem to pinpoint the error in my code. Any help in resolving this problem would b ...

androidkotlinandroid-intentintentfilter

A guide to spinning an image in every direction with CSS

I'm working on rotating an image in all directions using CSS and Vue.js. To demonstrate this, I have created a CodePen with the necessary code below. <div id="app"> <v-app id="inspire"> <div class="text-xs-center image-rotation" ...

htmlcssvue.jssass

Utilize jQuery's .append() function to dynamically insert content into your webpage

I currently have tab elements set up like this: <div class="tab-pane fade active in" id="tab-a"> </div> To populate the content of that tab with a JavaScript string array, I am using the following code snippet: var full_list = ""; for (var ...

javascriptjqueryhtml

Adjusting the width of images in Bootstrap is proving to be a challenge

Check out this website. There is an advertisement image below the navigation bar. I am having trouble adjusting its width. I want the image to expand and fill the empty white space. I've attempted using relative and absolute positioning, but the width ...

htmlcsstwitter-bootstrap

Merge the tap and doubletap Ionic events together

I have searched through a few examples, but I have not found anything that solves my problem. Here's what I need help with: I am trying to create an element that has two separate events - one for a single tap and another for a double tap. However, the ...

javascriptjqueryangularjshtmlionic-framework

Exploring the concept of clip-path

Recently, I have been delving into the world of HTML and CSS, exploring clip-paths after stumbling upon them on this captivating website. My interpretation is that utilizing clip-paths, particularly with the polygon attribute, enables one to control which ...

htmlcss

difficulty in re-establishing table rows when android orientation changes

Initially, I called addRow() three times in onCreate to create three rows for the users. They have the flexibility to add or remove rows as needed. However, upon screen rotation, only three rows are displayed, even though more may have been added. Removing ...

androidkotlinandroid-tablelayoutandroid-orientation

Tips for resolving a double click issue with a jQuery slide up/down animation

When I click a button, there is an animation that makes a div slide up and then down again. It functions the way I want it to, but the first time you click it, it doesn't work; you have to click twice for it to respond. Someone recommended using... ...

javascriptjqueryhtmlcss

What is the best method to remove all tab selections from a TabLayout in an Android app with the help of the

I'm currently working on an Android app where I'm utilizing TabLayout for tabs. Instead of using a pager view for fragment on tab selected, I am replacing the fragment with a view based on an event listener. One issue I encountered is trying to d ...

androidandroid-fragmentstabsandroid-tabs

By utilizing the window.history.back() function, it takes me four clicks to navigate back one page

I find it peculiar that my back button is using the JS method window.history.back() to return to the previous page. However, I have noticed a strange behavior with this button. When I click on it before the entire document loads, it functions as expected a ...

javascripthtml

Bootstrap 5.3 does not allow custom background colors to take precedence

Ever since the update to Bootstrap 5.3.1, I've been facing an issue where two custom background colors are not overriding the colors set by Bootstrap, even when using !important. Strangely enough, they were working fine before the update. Here are my ...

cssbootstrap-5

Guide on integrating JSON data into Bootstrap 4's secondary dropdown menu

I have a vision of my desired outcome in the attached image. Each menu item should contain two additional items, 'Dashboard' and 'Battery Trends', each with unique URLs defined as 'navigationurl' in the JSON file. My attempt ...

htmljqueryarraysjsonbootstrap-4

"Troubleshooting jQuery html() Function Issue in Firefox: Dealing with an Unterminated

Trying to insert the following string into a <p> element: (without specified charset) Цена: 4,80 BGN Поддръжка: (directly from .XML file) &#1062;&#1077;&#1085;&#1072;: 4,80 BGN Encountering ...

jqueryhtmlajaxchar

Struggling to align menu items horizontally with CSS? Using the inline property just isn't cutting it

I'm struggling to get my menu to display horizontally, no matter what I try. What am I doing wrong? I think the issue might be with the inline option, but I'm not certain. If someone could help correct my code, I would be very grateful. Thank you ...

htmlcss

Tips for identifying when a video's autoplay feature does not function properly on all web browsers

My search for the most optimal method to automatically play a video in the background led me to discover some interesting findings based on the latest data available. VVC/x266 - Versatile Video Coding: Offers significant reduction in data requirements wi ...

htmlcssfirefoxsafarisvelte