The azure streak on the mobile dropdown menu

After successfully publishing my website using quarto with R, everything appears fine on desktop and mobile except for a minor issue with drop down menus on iPhone, showing blue lines when clicked.

https://i.sstatic.net/xJRmU.jpg

At the bottom of my .yml file, I have the following setting:

format:
  html:
    css: styles.css
    toc: true

I have attempted adding the following code snippets to my css file, but the issue still persists:

.header-menu-sidebar .nav-ul a {
    outline: none !important;
}
.et_mobile_menu {
  border-top: 2px solid
  ##ff5733!important;
}

If you have any insights or tips to resolve this issue, I would greatly appreciate it! Thank you!

Update

  1. Here is a snippet from my .yml file:

    project:
      type: website
    
    website:
      title: "helloworld"
      navbar:
        left:
          - text: Home
            menu:
              - href: index.qmd
            
        right:
          - text: ABOUT
            menu: 
              - text: Education
    
    format:
      html:
        css: styles.css
        toc: true

  2. And this is the content of my styles.css file:

/* css styles */


.navbar-dark {
    background-color: #222222;
}

Answer №1

After some investigation, I discovered that this issue was specific to Safari only. Thankfully, I managed to resolve it by adding

outline: none;

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 invoke Kendo JavaScript

I'm facing an issue with my source code where I am trying to call kendo.all.min.js. Everything works fine when I call kendo.common.min.css and kendo.default.min.css, but as soon as I try to call kendo.all.min.js, I encounter the following error: http ...

Creating three select tags using PHP and Ajax

Today is my first experience with AJAX, and it's actually easier than I had imagined. I created a select tag that opens another select tag and it works perfectly. Here is the code... test.php <?php require'models/category.php'; $object= ...

Guide to enabling picklist editing in the specified component within an Angular application

Currently utilizing the p-picklist component and looking to customize the displayed data in the target list span. You can find the source code at: Is there a way to enable editing of the product name within the target list? <p-pickList [source]=&quo ...

HTML tags are permitted in the contact form 7 area

Is there a way to include a contact form 7 shortcode in an HTML area that only allows HTML tags? [contact-form-7 id="2358" title="Contact Form 1"] I am trying to incorporate the 3rd slide on my website from this URL: ...

Using Bootstrap's CSS classes, is it possible to modify the background color of a table cell?

I'm currently working with Bootstrap 5.0 CSS and attempting to create a table with customized cell colors using some of my own CSS styles. The color property seems to be working correctly, but I'm running into an issue with Bootstrap not recogniz ...

Analyzing Date Strings Retrieved From a MySql Database

In my MySQL database, I have a relationship that stores dates as varchar along with other attributes. This is how it looks: Answers answerId answer questionId date I am working on a web application where the user can select a &apo ...

Creating an atom without any boundaries: A step-by-step guide

While browsing the Atom forum, I stumbled upon a post discussing scripts for enhancing the UI of Atom. I'm curious about where to place these scripts. Should they go in the Atom init script? Any guidance would be highly valued. Visit this link for m ...

What is the best way to ensure that child elements within a container div are centered when scrolling left and right?

When attempting to handle the 'scroll' event, I noticed that the callback function only records the position of the div as the last position. I am looking for a way to determine if the div is in the center, which is my target. const slide = ...

Playing back an Audio object using JavaScript

I'm facing an issue with replaying an audio sound every time the game starts in my Cocos2d javascript code. The sound plays correctly the first time, but subsequent attempts to play it result in no sound being heard. Below is my code snippet: var my ...

Discovering the technique to display data in PHP only from the database that is specific to the authenticated user

When creating a to-do list, I want the user (not admin) to only see tasks assigned to them. This should be indicated under the assignee column with their name. https://i.stack.imgur.com/WP5C8.png However, currently the user named Lala can see not only th ...

Issue with jQuery not being able to retrieve the data from my CSS property

this is my custom style code: table.table tr td{ padding:30px; border-left: double 1px white; border-bottom: double 1px white; cursor:cell; } and below is the jQuery script I am using: $(document).ready(function () { ...

Showing the number of times a button has been pressed

I have written some HTML code to create a button and now I am looking for guidance on how I can use Vue.js to track how many times the button has been clicked. Here is what I have so far: <div class="123"> <button id = "Abutton&q ...

How come the h2::after element is positioned directly beneath the main h2 element, and with a margin-bottom?

I'm puzzled as to why the margin-bottom property in the main h2 element isn't affecting its "::after" element. Both are defined as block elements, so one margin should provide enough space between them. Even though the "h2::after" element has 0 m ...

Explore our interactive map and widget features that will seamlessly fill your browser window for a

Struggling to make a webpage with a Google Map, Chart, and Grid expand to fill the available space on the screen. Tried various CSS tricks but nothing seems to work. Check out this simplified example in JsFiddle that showcases the issue: http://jsfiddle. ...

Prevent Text Overflow in CSS, Material-UI, and React styling efforts

I am facing an issue where the cardTitle is overlapping the Card when the text is too long. Currently, I am manually setting a static maxWidth, but I would prefer for it to adjust based on the size of the Card. Is there a way to achieve this dynamically? ...

The background image is being cropped outside the item. What steps should I take to display it properly?

I am facing an issue with positioning a background image just outside the lime container. When I position it correctly, any part of the image that extends beyond the container gets cut off. How can I display the whole image even if it is outside the conta ...

Issue with fetching API data and sending it to the Node server

My node backend is all set up and running smoothly for GET requests, but I'm facing an issue with POST requests as the data doesn't seem to be getting sent to the backend. Here's the code snippet: fetch("http://localhost:3000/", ...

Improving the functionality of the JavaScript key press function

I have a small javascript snippet on my website that allows me to navigate the site using the arrow keys on my keyboard. document.onkeydown = function(evt) { evt = evt || window.event; switch (evt.keyCode) { case 37: ...

The Conflict-Free Dilemma of JQuery Cycle

Everything was working smoothly with the implementation of the JQuery Cycle Plugin. However, as I attempted to link a separate JavaScript file for a Menu in the Head Section from this source , <script type="text/javascript" src="js/ddmegamenu.js"> ...

Group data using dplyr functions to provide a summary by subgroups

I'm relatively new to using dplyr and I'm facing challenges in generating proportions with the summarise function. Here is a snippet of my dataset: city = rep(c("A","B"), each = 5) month = c("Jan","Jan","Jan","Feb","Feb","Jan","Jan","Feb","Feb" ...