The desktop menu disappears off the screen when attempting to hide it on a mobile device

My website has two menus, one on the left and one on the right, along with a search bar. When the user activates the menus, they smoothly slide in from the edge of the screen as intended. However, I encountered an issue where the right menu slides off the screen when the search bar is clicked on the desktop version. This functionality works properly on mobile devices though. To make it easier for you to review, I have kept my CSS very basic and included only two media queries in the code. Can you please help me understand what could be causing this problem? Here's a link to the Jsfiddle with the code: 

[code]
https://jsfiddle.net/54rzcv7f/5/
[/code]

Please ensure that you select "No wrap in body" on the JavaScript tab while testing the code. Thank you for your assistance.

javascriptcss

Answer №1

Latest Update:

I suggest utilizing classes for this situation. As the right menu needs to shift different distances depending on screen size, adding and removing a class would be the most effective approach.

Javascript Solution:

input.addEventListener('focusin', function() {
    message.classList = "searchFocus";
});
input.addEventListener('focusout', function() {
    message.style="";
    message.classList = "";
});

CSS Implementation:

@media screen and (max-width:450px) and (min-width:321px){  
    .searchFocus{
        transform:translate(105%, 0%)!important;
    }
}
@media screen and (max-width:1920px) and (min-width:451px){ 
     .searchFocus{
         transform:translate(52%, -90%)!important;;
     }
}

You may encounter some odd behavior like menu expansion followed by resizing, but that is not related to focus. To address this, consider using a similar JavaScript method to clear inline styles when the screen size surpasses a certain threshold, such as 451px.

I hope this explanation proves helpful!

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

Sending input data without a form

Currently, I am in the process of developing a website game and facing a challenge with implementing a feature I refer to as "dialogue". Initially, I attempted to address this issue by using a form element, but encountered a problem where pressing enter o ...

javascripthtmlforms

Unpredictable Redirection when URL is Clicked using PHP or Javascript

Looking to send users to a random URL from a specific list? For instance: With 3 URLs available - Google.com, Facebook.com, and Yahoo.com <a href="<?php $sites[array_rand($sites)] ?>">Click here</a> Upon clicking the link, users will ...

javascriptphpjqueryhtmlajax

Sharing information between sibling modules

Currently, I am faced with the challenge of transmitting data between two sibling components within the following component structure. The goal is to pass data without changing the relationships between these components. I prefer not to alter the componen ...

javascriptangulartypescriptangular7

Learn how to toggle a React component with the help of Redux Toolkit

I'm facing an issue with toggling a React component using Redux Toolkit. I am unable to access the value of "toggle" as the useSelector in Redux Toolkit is returning "undefined". The code seems to be not functioning properly. I would appreciate any s ...

javascriptreactjsredux-toolkit

What could be causing the embedded dropdown to automatically select the initial option every time?

I am encountering an issue with a page that includes an html table rendered using node with express and ejs. The table contains a select dropdown in one of the cells, and it populates correctly with the right values. However, regardless of which option I ...

javascriptjqueryhtmlmysqlnode.js

Tips on aligning a span element at the center of an image without losing its mouseover

<div class="pic"> <img src="image.jpg" height="250"/> <span class="text" style="display:none">text here</span> </div> <scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"> </scrip ...

javascriptjqueryhtmlcss

Having trouble selecting the first element with cursor on Jquery TokenInput?

I'm currently using a Bootstrap (v5.1.3) card that features an autocomplete field powered by jQuery's TokenInput. Everything seems to be functioning properly, except for the fact that I'm unable to access the first element of the field usin ...

javascriptjquerycssbootstrap-4

Creating a stylish look for a selection of multiple menu options

option:active { color: red; } option:focus { color: green; background: green; } option:checked { color: yellow; background: yellow; } <select multiple> <option>One</option> <option>Two</option> <option&g ...

javascriptcsstwitter-bootstrap

Troubleshooting: The CSS nested menu does not adjust its width automatically

Within my nested menu, everything is functioning correctly except for the third hierarchy level. I have the code and the result available here: http://jsfiddle.net/wvsL9/ If you hover over the menu "PRODUCTS" and then "PRIVATE", you will notice that the ...

cssmenu

Revise website design to adjust dynamically according to screen dimensions

Currently, I am working on a school project with a website created by former students. Unfortunately, I have limited knowledge of HTML and CSS which has made it challenging for me to ensure the site is mobile-friendly. There are issues such as text overflo ...

htmlcssiframeresponsive-design

What are some alternative methods for concealing certain content in my gallery without using java script?

Currently, I am utilizing a JavaScript "show more, hide less" button on my page. However, I am facing an issue where I can't use the same button multiple times on the same page. I tried changing the ID, but it didn't work for me. I suspect I may ...

javascriptcssshow-hidebootstrap-5

Firefox is mistakenly interpreting a pasted image from the clipboard as a string instead of a file, causing

I am facing an issue where I am attempting to extract images from a contenteditable div using the paste event. The code works perfectly in Chrome but does not function as expected in Firefox. I have implemented the following code: $(window).on("paste& ...

javascriptjqueryfirefoxcross-browserclipboard

Steps to eliminate the gap between the link element and toggler in Bootstrap 4

Incorporating the code below will create a navigation bar with a cart icon in Bootstrap 4, indicated by the images. The expanded view showcases the cart next to the search section on the right. When viewed on smaller devices in collapsed mode, it should al ...

htmlcsstwitter-bootstrapbootstrap-4

The POST request to the localhost API endpoint resulted in a 404 Not Found error

Whenever I try to send a POST request to "/api/auth/signup" in my JavaScript application, I keep getting a 404 Not Found error. My goal is to create a MERN application for a Modern Real Estate Marketplace. This is the code snippet causing the is ...

javascriptexpress

Updating your Heroku app (Node.js) from a GitHub repository - a step-by-step guide

I attempted to deploy my React app using the following process: git status git remote add origin <repo link> git commit -m "node js" git add . Unfortunately, this method did not work for me. Can anyone provide guidance on how to update a ...

javascriptnode.jsreactjs

Passing a complex variable type in TypeScript to a function without the need to redefine the type

I'm fairly new to working with TypeScript and I've encountered this issue several times. When using tools like Prisma to retrieve data, I often come across values with incredibly complex types. These values contain many attributes, which is perf ...

javascripttypescriptprisma

Transmit data from an Arduino board to Highcharts for visualization

I've been attempting to transfer data from my Arduino to Highcharts via Ethernet by following these two tutorials: 1. Arduino Ethernet Shield Web Server Tutorial 2. Highcharts Live Data Tutorial Since I'm fairly new to JavaScript, can someone ex ...

javascriptarrayshighchartsarduino

Guide on embedding a hierarchy triangle in an email with HTML

I am looking to include a hierarchy triangle in an email generated by my webpage. This triangle should reflect the data from the page, including the number of activities, appointments, proposals, and deals. Specifically, I want it to display: Top of the tr ...

cssemailhtml

problem with saving session data

I am attempting to access data from another page using session storage. On my initial page, named home.html function go_to_faq(qnum){ window.open('FAQ.html', '_blank'); sessionStorage.setItem('key2', qnum); } <a s ...

javascripthtmlcsssession-storage

Executing a validator using JavaScript: A step-by-step guide

Snippet of my code: <asp:ListBox ID="lbRD" runat="server" DataSourceID="RDSqlDataSource" onchange="JSFillDetail();" DataTextField="Description" DataValueField="ID" Width="188px" Height="200px"/> <asp:TextBox ID="txtDescription" runat="server" /& ...

javascriptasp.net