The HTML/CSS navigation bar is displayed on top of a fullscreen video player in the web

I've scoured the internet but I'm still unable to find a solution to this issue. While watching videos in fullscreen mode, the html navigation appears over the video in IE, Chrome and Firefox, but not in Safari on both Mac and PC platforms. The website in question is . Please take a look at the showreel page or excerpts.

As someone who is relatively new to this, I'm unsure if this is a CSS problem or an issue with VideoJS. Any suggestions on how to resolve this would be greatly appreciated.

Thanks in advance.

htmlcssfullscreennavbarvideo.js

Answer №1

The issue lies within the z-index property on line 80 of DB.css:

#nav li {
    margin:0;
    padding:0;
    position:relative;
    float: left;
    list-style:none;
    line-height: 30px;
    z-index:3000; /* this particular line is causing the problem */        
}

It appears that in Firefox, removing this line resolves the issue. It's unknown if the same applies to other browsers.

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

Applying CSS to Dynamic JavaScript Elements: A Guide to Styling Without In-line Code

I'm a beginner in web development and I've been experimenting with applying styles to dynamically generated div elements using JavaScript. So far, I've only been able to manually add inline styling through this function: function applyStyle( ...

javascripthtmlcss

What is the best way to zip two arrays of different lengths so that they can be looped through in a Django

Two arrays are at my disposal: First array: ['Tan','Goh','Tio'] Second array: [['Honda','Toyota','Proton'],['Toyota'],['Proton','Lambo']] Is there a way to merge ...

pythonarraysdjangohtml

The color of the letters from the user textbox input changes every second

My task is to create a page where the user enters text into a textbox. When the user clicks the enter button, the text appears below the textbox and each letter changes color every second. I am struggling with referencing this jQuery function $(function() ...

javascripthtmljquery

Apply CodeMirror theme and plugins using an HTML attribute

On my website, I have implemented a CodeMirror text area from . <form><textarea id="code" name="code" codemirror-type='lineNumbers: false, styleActiveLine: true, matchBrackets: true;'>CODE HERE</textarea></form> I added ...

javascriptjqueryhtmlcodemirror

There are no errors with PHP and it fails to insert any entries into the database

I am struggling to save secq (secret question) and seca (secret answer) in the database. Even though I don't encounter any errors during the registration process, the values of the variables are successfully passed through POST when echoed. Despite ...

phphtmldatabase

What are some ways to modify the appearance of the post title table using CSS?

In this snippet of HTML code- <table style='min-width:60%;height:25px;'> <tr> <td><b><data:post.title></b></td> <td id='date-and-author' style='position: relative;bo ...

htmlcsshtml-table

Problem with loading images on an HTML webpage

https://i.sstatic.net/aQ0oD.png After refreshing the page, I'm encountering an issue where the image is not loading. However, if I switch tabs from MEN to WOMEN and back again, the image will display without any problem. Even making changes in the CS ...

jqueryhtmlcssruby-on-railsruby-on-rails-4

How can the 'selected' attribute be assigned to 'select/option' tags depending on the option value?

In my code, I have a select input with various options and values. I want to set the 'selected' attribute for the option that corresponds to a specific value X. Here is an example: // If x=3, I want the option with value=3 to be marked as 's ...

javascripthtml

Difficulties encountered when trying to interact with buttons using JS and Bootstrap

I'm working with a Bootstrap 5 button in my project and I want to access it using JavaScript to disable it through the attribute. Here is the code I've been testing: Script in Header: ` <script> console.log(document.getElementsByName(& ...

javascripthtmlbootstrap-5

Issue with Firefox hover effect not applying transform:scale

I'm experiencing some difficulties with the border colors when using transform:scale on my element. I want to find out if there is a known solution to this issue. Removing the scale animation resolves the problem and the borders return to normal. I ha ...

htmlcssfirefox

The previous and next buttons are displaying side by side rather than being positioned at the outer edges

I am having an issue where the prev and next buttons are displaying next to each other instead of at the edge of the div. Can someone please assist me in fixing this problem? Below is the provided HTML code: <div id ="moreOption_80322271" class="m ...

htmlcss

Insert text within the switch component using Material-UI

Looking to customize Material UI's Switch component with text inside? Check out the image below for an idea of what I'm going for. https://i.stack.imgur.com/KadRZ.png Take a look at my code snippet: import React from 'react'; import S ...

javascripthtmlreactjsmaterial-ui

Conceal the sidebar once user is logged in

I need a dynamic webpage; upon loading the login page, the sidebar should be hidden and the login page should occupy the full width of the page. Once the user successfully logs in, the sidebar along with all components should be displayed. I've attemp ...

javascripthtmlangulartypescriptbootstrap-4

Ui Bootstrap (angularjs) sidebar is not functioning properly

I am encountering an issue with a sidenav that I am in the process of creating for one of my projects. The goal is to develop a side menu that shifts the content to the right when opened and returns it to the left when closed, essentially functioning as a ...

javascripthtmlangularjscssangular-ui-bootstrap

Exploring the integration of Selenium WebDriver with a Polymer website and its Shadow root functionality

When I use Google Chrome console, I can easily click on a Shadow root element using the following code: document.querySelector('html /deep/ next-tab').querySelector('a').click() However, when I tried to do the same thing with web-driv ...

javahtmlselenium

Cookies cannot be used in browsers other than Chrome, nor can HTML5 local storage

Currently, I am developing a javascript tool that is designed to save a user's selections locally and then reload them when the page is revisited. While this feature works perfectly in Chrome, it seems to be non-functional in IE8 and Safari. I have e ...

javascripthtmlcookiescross-browserlocal-storage

Unlimited scrolling with external JSON data in AngularJS

I am struggling with implementing an infinite scroll in angularjs using a JSON file from an external site. I want the infinite scroll to trigger when the posts variable reaches 10, then call my function, increment the URL by +1, and load a new page. Here i ...

htmljsonangularjs

Guide on crafting a scrollable and touch-responsive grid using CSS and JavaScript

I am seeking guidance on creating a grid with a variable number of columns and rows. It should be contained within a separate div and should not interfere with other objects or alter the parent's size. The grid needs to be square and I am currently u ...

javascriptcsslaraveltailwind-csslaravel-livewire

Fixed top bar and navigation menu, with a body that can be scrolled

My current goal is to achieve the following layout: <div style="position:absolute; background-color:Transparent; left:0px; right:0px; height:100px; z-index:2;"> <div style="background-color:Silver; width:1000px; height:100px; margin:0 auto;"& ...

csslayoutheadermenu

The creation of numerous DOM elements in D3

I'm currently utilizing the Tableau JS API to develop animated charts with D3.js. Within a Canvas(DOM) element, I am generating the necessary charts using the getUnderlyingData() function. This function is triggered whenever there's a change in f ...

javascriptjqueryhtmld3.jstableau-api