The shadow effect is not appearing on the box

I've been struggling to get my box-shadow to show up for a whole day now with no luck. Even after removing the background image and trying various fixes like -webkit, -moz, and z-index, the shadow just won't display.

Here's the HTML snippet:

<!DOCTYPE html>
<html lang="en" >
   <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <title>Unknown</title>
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
      <link rel="stylesheet" type="text/css" href="css/font-awesome.css">
      <link rel="stylesheet" type="text/css" href="css/basic.css">
      <link rel="stylesheet" type="text/css" href="css/navbar.css">
      <link rel="stylesheet" type="text/css" href="css/font.css">
      <script type="text/javascript" src="js/navbar.js"></script>
   </head>
 <body>  
 <font face ="Alex Brush" size="5">
  <div id="container">
    <div id="paper">
     <font color="#fff">
      <a href="index.html">                                                
        <div id="title"></div>
          <p id="asd">Unknown</p>
      </a>
     </font>
      <div id="navbar">
        <font color="black">
            <div class="topnav" id="myTopnav">
              <div id="sub-nav">
               <div id="mini-nav-head">
                 <a id="responds" href="#home" class="active">Home</a>
                 <a class="icon" onclick="change()"><i class="fa fa-bars"></i></a>
               </div>
               <a id="respondy" href="#contact">Bouquets</a>
               <a id="respond" href="#about">Weddings</a>
               <a id="respond" href="#about">About us</a>
               <a id="responde" href="mail/contact.php">Contact us</a>         
              </div>
            </div>
        </font>
      </div>
    </div> 
  </div>
 </body>
</html>

The CSS (navbar.css):

/*CSS code for navbar goes here*/

The other CSS (basic.css):

/*CSS code for basic styling goes here*/

Any fellow developers have suggestions on how to resolve this issue?

htmlcss

Answer №1

The issue arose when I discovered that utilizing overflow: hidden; within the .topnav class was hindering the display of the shadow effect. However, upon substituting it with overflow: visible;, the shadow effect became visible as intended.

Answer №2

What is the screen size you are currently designing for?

Based on my observation of the code, the box-shadow effect will only be visible when the screen width does not exceed 865px.

@media screen and (max-width: 865px) {
  #responde {
    box-shadow: 10px 10px grey;
    position: relative;
    z-index: 10;
  }
}

If you want the box shadow to be visible regardless of screen size, you can define it outside the media query like this:

#responde{
   box-shadow: 10px 10px grey;
   position: relative;
   z-index: 10;
}

@media screen and (max-width:865px){

}

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

Is there a way to enclose a set of elements that are aligned to the

I am facing an issue with a container div that contains multiple items. The container requires a border, but the problem arises when I float the elements left within the container, as it seems to disrupt the flow of the elements. Adding a border to the co ...

css

Chaos ensues as the HTML contenteditable attribute disrupts the expected structure of the table

Whenever I attempt to click on the edit button to make changes to the content of the Email column, the HTML table structure begins to change in a strange manner. Here is the code snippet causing the issue: <!DOCTYPE html> <html lang="en"> & ...

javascriptjqueryhtmlcsscontenteditable

An intuitive guide on showcasing the dynamically generated variables' values with AngularJS

I am facing an issue with my HTML template code: <p>{{"fieldname_"+lang}}</p> Within the controller, I have defined the following: $scope.lang = "mr"; $scope.fieldname_mr = "Dynamic variable"; My expected result is Dynamic variable, however ...

htmlangularjs

Position the image at the center above the text

I am trying to position multiple images side by side, with each image having a date displayed beneath it. The challenge I am facing is that the length of the date extends beyond the width of the image, and I would like to center the image on top of its c ...

htmlcss

Animating jQuery UI with an initially undefined height

Check out this fiddle: [edit: updated fiddle => http://jsfiddle.net/NYZf8/5/ ] http://jsfiddle.net/NYZf8/1/ (try viewing in different screen sizes to ensure the image fits inside the %-width div) The animation should begin from where the image is cor ...

javascriptjquerycssjquery-ui

Place an element that exceeds 100% in size at the center

How can I center an image that is larger than its parent element? I have set the min-width and min-height to 100% so that the picture will always fill up the parent element. The issue arises when the image does not match the proportions of the parent elem ...

javascriptcss

Error: A local exception occurred indicating an undefined variable

Struggling to troubleshoot the Contact Form. Initially, the message section was not being sent. Now encountering this issue - local.ERROR: exception 'ErrorException' with message 'Undefined variable: content' Contact form : <div ...

phphtmllaravel

When using Jinja2 and Flask, the Bootstrap Tabs only show the content for the first tab and not for the others

Utilizing Jinja2 and Python for HTML generation, along with Bootstrap for CSS and JS, I am attempting to create Bootstrap pill tabs using Jinja2 loops and additional logic. The following code represents my approach: When invoking the render_template funct ...

pythonhtmlflaskbootstrap-4jinja2

"Exploring the interactivity of touch events on JavaScript

Hi there, I'm currently facing an issue with the touch events on my canvas. While the mouse events are functioning correctly and drawing as expected, incorporating touch events seems to be causing a problem. When I touch the canvas, the output remains ...

javascripthtmlcanvastouchoffset

Enhancing Image Upload with Ajax/JavaScript: Generating Multiple Previews

I've been experimenting with an Ajax image uploader that I found on this website. Currently, I have managed to create duplicate preview images: one displayed under the input field and the other elsewhere on the page labeled as "this what you chose". H ...

javascriptjqueryhtmlcssajax

Is there a way to style a div to have a specific minimum height while also keeping the child divs aligned at the top using CSS Grid?

Here is a mockup I created: [https://codepen.io/axlemax/pen/zYKWPge] It resembles the basic layout of Twitter desktop: [https://twitter.com/home] https://i.sstatic.net/fZIVp.png I am facing an issue with the "adcontainer" div (the one labeled as "what&a ...

csscss-grid

Utilize the alignment capabilities of the Bootstrap framework or any other suitable plugin for

I am trying to dynamically display my div's similar to the image below. I am not able to find a solution for this problem on SO or Google yet. https://i.sstatic.net/0QcfF.jpg .box { width: 25%; height: auto; float: left; } .box-1 { backgr ...

csstwitter-bootstrap-4

Is there a way to activate the dashed line around buttons when pressing the tab key?

Can someone help me figure out how to display the "dashed line" that shows up when you tab through buttons? I'm not sure which CSS code is responsible for hiding it. Is it something like a:hover or a:active? (I'm assuming this is related to CSS.) ...

htmlcss

Selecting Images with HTML and JQuery

Every time I click on an image, the text "Window Image" appears instead of the image itself. This is the code where I want to replace the image: <div class="product"> <img id="model" src="images/casement.png" alt="Window Image" /> ...

jqueryhtmlimage

Tips on dynamically updating the data-bs-slide-to value using Bootstrap 5 and Vue.js 2

I have been working on creating a dynamic carousel and I've almost got it to work. However, I am facing an issue with populating the 'data-bs-slide-to' property in Bootstrap 5 automatically based on a given array. Here is the complete code: ...

javascripthtmlvue.jsbootstrap-carousel

Experiencing a 400 error when running tests

I'm in the process of creating a registration form for vendors on my ecommerce website, but I'm encountering a bad request error when making a post request. Despite thorough investigation, I cannot pinpoint the exact cause of this issue. Previous ...

htmlpython-3.xflask

"Internet Explorer naturally selects the submit button when users press the enter key to submit a

In my current application, I have implemented a form with a hidden button to address issues with the numeric keyboard on Android. Essentially, pressing enter or focusing on the invisible button will trigger form submission. Pressing enter works fine in Ch ...

javascripthtmlformsknockout.js

Tips for rendering objects in webgl without blending when transparency is enabled

My goal is to display two objects using two separate gl.drawArrays calls. I want any transparent parts of the objects to not be visible. Additionally, I want one object to appear on top of the other so that the first drawn object is hidden where it overlap ...

javascripthtmlcsswebgl

Trouble with flex wrap in my design template using Material UI

How can I create a responsive template using flexbox wrapping method? <Box sx={{ padding: 0, margin: 0, listStyle: "none", display: "flex", flexFlow: ...

cssflexboxmaterial-ui

Troubleshooting Django: Issue with template extension causing static image not to be found in child template

For my personal project, I decided to learn Django. Initially, I created two separate apps, "API" and "Search". As development progressed, I merged the search functionality into the API app and updated the views accordingly. I also designed a base template ...

htmldjangodjango-templatesdjango-staticfiles