Display issue with ul and li elements in Safari browser causing menu to appear incorrectly

Although I am new to CSS, I managed to create a menu on my website that hovers over the background video successfully. It is a basic menu using a ul with li elements and it appears as intended in all browsers except Safari. In Safari, the menu items stack like a list instead of aligning in a row as they do in Chrome. Below is the CSS code for the menu:

#menu-main-navigation {
    list-style-type: none !important;
    margin: 0;
    padding: 0;
    display: flex !important;
    float: left:
}

I would appreciate any assistance in understanding why Safari is causing this issue. Thank you.

wordpresscsssafari

Answer №1

To make flexbox work in Safari, be sure to include the -webkit prefix:

#menu-main-navigation {
    list-style-type: none !important;
    margin: 0;
    padding: 0;

    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    float: left;
}

For more information, check out Can I Use.

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 is the best way to align three images horizontally using bootstrap?

While working on my JavaScript class and creating one-page web apps, I had the idea to create a central hub to store and link them all together. Similar to Android or iOS layouts, I designed a page with icons that serve as links to each app. I managed to ...

htmlcsstwitter-bootstraptwitter-bootstrap-3

What is the best way to implement a loading cursor when the Submit button is clicked?

Is there a way to incorporate a progress cursor into my code in order to notify the user to wait when they click the Submit button or the Upload Button while uploading multiple files? Below is an example of my form: <form action="" method="post" enct ...

javascriptjquerycsshtmlforms

Ways to observe programmatically produced source code within a web browser

I have a question that is not related to a bug in my code, but rather a general inquiry about how browsers refresh source code. While it pertains to debugging, I believe it is appropriate to ask in this context. My rails app renders partials using ajax, a ...

ruby-on-railsajaxgoogle-chromefirefoxsafari

Alignment of Material-UI dialogue buttons on the left side

I have a Dialog containing three buttons as shown below: https://i.stack.imgur.com/T6o35.png Here is the JSX code: <DialogActions classes={{ root: this.props.classes.dialogActionsRoot }} > <Button classes={{ root: this.props ...

javascripthtmlcssmaterial-ui

Scrolling horizontally to display dynamic columns based on a search query in AngularJS

I am facing a challenge with implementing search functionality in a table that has multiple dynamic columns with a horizontal scrollbar. The goal is for users to be able to search for a specific column name or data, and if a match is found, the scrollbar s ...

htmlcssangularjs

Logging in with the same user across various WordPress websites on separate databases

Need help with coding for a single user login on two separate WordPress domains each using different databases. The sites are: www.site1.com - DB1 www.site2.com - DB2 ...

phpmysqlwordpressauthenticationcontent-management-system

Equal-height columns in a responsive grid system

I'm currently facing an issue with a layout that seems simple I am working on a design featuring 4 headline boxes. In the "desktop" view, all 4 boxes need to be of equal height. The same applies when viewed across 2 boxes in the "tablet" mode. Howeve ...

cssresponsive-designgrid-layout

Adjust the background color of a non-selected Material-UI checkbox

Currently, I am working with a combination of React-Redux and Material-UI to style my project. Within this setup, I have a checkbox component that is placed on a toolbar with a blue background color (#295ED9). So far, I have successfully altered the color ...

cssreactjscheckboxreact-reduxmaterial-ui

Changing the screen size of a panel using asp.net and c#

When my screen size reaches 480px, I want to remove one menu and replace it with another. The solution I'm considering is creating two panels. In this setup, I would set menu1 to false when the screen size is less than 480px and menu2 to true. Conve ...

c#cssasp.nettwitter-bootstrappanel

Adaptive website backdrop

I have created a unique background for my website design, which includes 3 slices labeled as div id top, middle, and bottom. You can view the design in this image. I am interested in making this background responsive. While I have come across examples of ...

htmlcssresponsive-design

Issue on my website specifically occurring on Google Chrome and mobile devices

Hello, I seem to be having a CSS issue. Interestingly, my menu (burger menu) works perfectly fine on Firefox but is not functioning properly on Chrome and mobile devices. When I click the button, the menu doesn't open. Has anyone encountered a simil ...

htmlcssmobile

Clickable links and compliant W3C coding

Recently, I have encountered errors in the W3C validator due to the presence of "name" attributes in some <a> tags in my document. The validator flagged these attributes as obsolete. I am curious to know when and why this happened? Additionally, I n ...

htmlcssw3c

Automatically switch to the designated tab depending on the URL

Is it possible to automatically activate a specific tab based on the URL structure if my tabs are configured in this way? I am looking for a solution where a link on www.example1.com/notabs.html will redirect to www.example2.com/tabs.html This particular ...

javascriptjqueryhtmlcss

What is the best way to create a line break in a flex div container to ensure that overflowing items wrap onto the next line using

Using material-ui popper to display a list of avatars. Trying to arrange the avatars horizontally within the popper. <Popper style={{ display: 'flex', maxWidth: '200px', }}> <div style={{ marginRight: '20px' }}&g ...

javascriptcssreactjsmaterial-ui

Efficiently centering content in a grid layout using automatic fit repetition for optimized responsiveness

I've implemented a responsive grid where each item has its own hidden details section that is revealed upon clicking the item. The structure of the HTML/CSS setup is as follows: <div class="grid"> <div class="item"> ...

javascripthtmlcssflexboxcss-grid

Retrieving the "min, max, step, and value" variables from a plugin and passing them to the quantity box in Woocommerce using PHP

Having the Woocommerce Advanced Quantity plugin allows me to customize the min, max, increasing step quantity, and default quantity for each product. However, my new theme is not pulling these values from the plugin for the quantity box on the shop page. I ...

phpwordpresswoocommerce

HTML/CSS Inactive: Troubleshooting and Solutions

There seems to be an issue with the :active state, if anyone can spot the problem and provide assistance, it would be greatly appreciated. Here is the HTML code: http://pastebin.com/4wCi3L2Z And here is the CSS code: http://pastebin.com/jZvgdDaA Thank y ...

htmlcss

Damaged background in Bootstrap interface modal

https://i.stack.imgur.com/nTAnK.png Is there anyone who can assist me in identifying the issue causing the broken or irregular backdrop in the background of overlays or pop-ups? $scope.Modal = $modal.open({ animation: true, ...

cssangularjsangular-ui-bootstrapbootstrap-modal

The H1 tag is mysteriously displaying padding or margin on the bottom, despite not being set

Despite not setting any padding or margin for the H1 tag, it still appears to have some spacing at the bottom. After applying a margin and padding of 0 to both the h1 tag and the text below it, I am still facing an issue where the text doesn't align ...

htmlcss

Creating an interactive draggable box with jQuery-UI is as easy as pie

Is it possible to make the innerDropzone div draggable in the following code snippet? div.example { width: 560px; height: 750px; display: block; padding: 10px 20px; color: black; background: rgba(255, 255, 255, 0.4); -webkit-border ...

jqueryhtmlcssjquery-ui