The menu mysteriously vanished into the depths of the darkness

My menu has mysteriously disappeared in Desktop mode, but it shows up correctly in phone mode. I'm quite puzzled and can't seem to figure out what the issue might be. I've checked to see if the "capture" box is covering the menu box, but I'm stuck on how to proceed.

I've been struggling with this problem for the past 6 hours now.

This problem has persisted for 6 long hours and I'm at my wit's end trying to solve it. Any help would be greatly appreciated.

$(".header__icon-bar").click(function(e){

        $(".header__menu").toggleClass('is-open');
        e.preventDefault();

      });

htmlcss

Answer №1

Upon reviewing your code, it appears that you neglected to properly close the @media query.

Therefore, I recommend adding a } at this point: 

.card { width:90%, margin:5%

Answer №2

Let's cross our fingers and hope that this will perform as expected

$(".header__icon-bar").click(function(e){

        $(".header__menu").toggleClass('is-open');
        e.preventDefault();

      });
html,body{height: 100%;}
body{background: #eee;}

/* Code for general styling */
.animate{
  -webkit-transition: all 0.3s ease-out;
          transition: all 0.3s ease-out;
}

.button{display: inline-block;background: #fff; color:#000;padding:15px 30px; border-radius:3px;text-decoration: none;}

.p{line-height: 22px}

/* Styling for the header section */
.header{background: #333}
.header__logo{color: #fff; float:left;display: block;padding:20px;text-decoration: none;}
.header__menu{float:right;margin:0;padding:0;}
.header__menu__item{display: inline-block;}
.header__menu__item a{color:#fff;display: block;padding:20px;text-decoration: none;}
.header__menu__item a:hover{background: #000}

.header__icon-bar{display:block;float: right;padding: 20px;display: none;}
.header__icon-bar span{display: block;height:3px; width:30px;background: #fff; margin-bottom: 5px;}

/* Cover section styling */
.cover{height:70%;
  background-image: url(https://source.unsplash.com/category/technology);
  background-size: cover;
  -o-background-size: cover;
  -moz-background-size: cover;
  background-position: center center;
  position:relative;
}
.cover__filter{background: #000;width:100%;height: 100%;position: absolute;z-index: 0;opacity: 0.5;}
.cover__caption {display: table;height: 100%;width:100%;position: relative;z-index: 1; padding: 0 20px}
.cover__caption__copy{display: table-cell;vertical-align: middle;text-align: center;color: #fff;}

/* Cards section styling */
.cards{max-width: 1200px; margin: 40px auto;}
.card{width: 30%; margin:0 1.5%;background: #fff;float: left;}
.card__image{width:100%; height: auto;}
.card_copy{padding:5px 20px;}
.card_copy h3{margin-bottom:0}

@media (max-width: 767px){
  /* Responsive design for smartphones */
  header{position:fixed; z-index: 100; width: 100%}
  .header__icon-bar{display: block;}
  
  .header__menu{width: 100%;height:0px; overflow: hidden;}
  .header__menu__item{display: block;}
  .is-open{height:300px; overflow: auto;}

  .cover{height:100%;}
    
  .card{width:90%; margin:5%;}
}

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

Tips for horizontally arranging a list with a flexible number of columns

I am attempting to create a horizontal list with 3 columns that automatically moves to a new line when the columns are filled. I have been trying to implement this using PHP but haven't had any success. If anyone could provide some guidance on how to ...

javascriptphphtmlcsstwitter-bootstrap

Unusual display of footer controlled by CSS in certain template pages

I recently made changes to the footer on a template-based website. I noticed that, for some unknown reason, the footer is not appearing at the bottom of the page as it should be. I wonder if the footer functionality is faulty altogether and if I only got ...

htmlcss

"Is it possible to disable the transition animation in mat-sidenav of Angular Material without affecting the animations of

My Angular application features a mat-sidenav that is organized like this: <mat-sidenav-container> <mat-sidenav [mode]="'side'"> <!-- Sidenav content --> </mat-sidenav> <mat-sidenav-content ...

javascriptcssangularangular-material

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 () { ...

javascriptjqueryhtmlcss

What are the steps to create a dynamic navigation bar in React without encountering hydration issues?

My goal is to dynamically show or hide links based on user authorization. Here's my initial approach: const Navbar = () => { const { canDo, ...} = useUser(); //A Zustand store return ( <> <div> <ul> ...

javascripthtmlcssreactjs

How to eliminate the Horizontal ScrollBar in Telerik RadTextBox specifically for IE users

How can I prevent a TextBox control from overflowing and displaying a horizontal scroll bar without using javascript? I have already tried Wrap="true" along with other methods, but to no avail. <telerik:RadTextBox ID="tx_Subj" Runat="server" TextMod ...

asp.netcsstelerik

creating a table displaying data in a horizontal format sourced from ajax/json transformation

I am currently working on a piece of code that retrieves a list of IDs from local storage and compares them to IDs in a JSON file. If there is a match, the corresponding data is displayed in a table. However, I am facing an issue with my table layout as i ...

jqueryhtmlajax

Ways to determine if an element is the initial child

I am currently facing issues while attempting to make my bootstrap carousel dynamic and inject data properly. My aim is to locate the first child of the injected data and apply the "active" class to it. I am utilizing Laravel Blade for rendering my data. B ...

jqueryhtmllaravelbootstrap-4

Disconnecting socket when A-tag with Href is clicked

Currently, I am working on a project that involves using socket.io. In this project, I need to provide users with links to download files. <a href="<path>" >Link Name</a> Interestingly, whenever I click on the link to download the file, ...

htmlhref

The underline feature may not function correctly when applied to Bootstrap 5 navigation links

I am currently working on a website using Bootstrap 5, and I'm facing an issue with creating underlines for the navigation links in the navbar upon hovering. The problem is that the underline is only appearing for the "services" nav link. Here&apo ...

htmlcssresponsive-designfrontendbootstrap-5

Issue with Beautiful Soup/Selenium: unable to locate div element or any content within the body

My task involves extracting item names (such as cotton shirt) and their corresponding prices (¥3,600) from within the <div class="items-box-body"> section. <div class="items-box-body"> <h3 class="items-box-name font-2">cotton shirt& ...

pythonhtmlseleniumweb-scrapingbeautifulsoup

How come the centering of a text input field in an HTML form is proving to be so difficult using the text-align: center property?

Learning HTML has been quite the journey for me. One challenge I have faced is trying to center a search bar on my web page. Despite hours of searching and trying different tutorials, I still haven't been able to make it work. The CSS rule text-align ...

htmlcsstwitter-bootstrapbootstrap-4

The margin of the parent container is influencing the margin of the child element

Purple Working on displaying a rectangle shape in a browser using divs in my React project. Everything works fine, but when I add margin to the parent base and then draw the boxes, there's some space between the mouse cursor and the actual box. The ...

javascripthtmlcssreactjs

Executing various onclick functions - Text Display

I've developed a code that includes onclick events to change the color of buttons and prevent them from being clicked twice. Additionally, I am looking to have data added to a table column/row when a button is clicked. For example, clicking button 3 s ...

javascripthtmlcss

The functionality of jQuery's toggleClass is not functioning properly when clicking on a different thumbnail

My objective: I want to display a set of thumbnails. When a thumbnail is clicked, I want to toggle the hiddenElement class and show a large image inside a hidden div. If anywhere in the DOM is clicked, it should hide the current image or allow the user t ...

javascriptjqueryhtmlcss

What is the method for obtaining the CSS text content from an external stylesheet?

I've spent countless hours trying to achieve the desired results, but unfortunately, I haven't been successful. Below is a summary of my efforts so far. Any helpful tips or suggestions would be greatly appreciated. Thank you in advance. Upon rec ...

javascriptcss

The onLoad event of the <picture /> element is not consistently being triggered

I'm encountering an issue where the onLoad event on the picture element is not consistently firing. I have tried adding the onload event listener to both the picture and image elements, but sometimes they both fire and other times neither of them do. ...

javascripthtmlreactjs

Manipulating child classes using jQuery

I am struggling to display an X icon next to a tab on my page when the tab is clicked, but I am facing difficulties in toggling its visibility. The issue arises when trying to access the span element within the tabs. $('.tabs .tab-links a').on(& ...

javascriptjqueryhtmlcss

The expression `Object.prototype.toString.call(currentFruit) === "[object Date]"` checks if the object referenced by `current

Hi, I'm just starting to learn JavaScript and I have a question about an if condition that I came across in my code. Can someone please explain what this specific if condition does? Object.prototype.toString.call(currentFruit) === "[object Date]& ...

javascripthtmljquerycssjquery-events

jQuery effects move divs' margins consecutively

Check out my current setup I want to achieve a smooth image fade-in effect without any text displacement. Is there a specific alteration needed for the .fade-in element in order to accomplish this? ...

jqueryhtmlcss