navigation menu not displaying properly on small screens

Struggling to make my navigation menu fit properly on mobile devices like iPhones and iPads? Check it out. Here are the CSS properties I've set:

#wrapper{
    max-width: 1600px;
    min-width: 320px;
    width: 100%;
    margin: 0 auto;
    position: relative;
}
#header{
    max-width: 1018px;
    min-width: 320px;
    width: 100%;
    margin: 0 auto;
} 

#social-tabs{
    display: block;
    padding: 4px;
    margin: 5px 0px;
}

#nav-menu{
    margin: 0 auto;
    width: 100%;
    max-width: 1018px;
    min-width: 320px;
}

I've tried adding a screen resizer to the site, but I'm still facing issues...

function reSize($target){
    $target.css('width', $(window).width()+'px');
}
$(document).ready(function(){
    $(window).bind('resize', reSize($('#header')));
    $(window).trigger('resize');
});

If anyone can help me figure out what's going wrong, I'd really appreciate it!

javascriptjqueryhtmlcssmobile

Answer №1

If you're attempting to attach the resize handler, there is a better way to do it:

$(window).bind('resize', resize.bind(window, $('#header')));

This approach will result in a more optimized implementation. The code snippet provided invoked the "resize" function when what you really want to do is pass a reference to the function. Another alternative that may be simpler is:

$(window).bind('resize', function() { resize( $('#header') ); });

Nevertheless, even with these adjustments, you could encounter challenges. Dealing with "resize" events may not benefit you on a mobile device considering there is typically no significant resizing happening. It might be wise to explore CSS Media Queries and develop your solution using CSS rather than relying heavily on JavaScript.

(It's also worth noting that "resize" events trigger rapidly on desktop browsers as the browser window is resized interactively. While rotating a phone or tablet triggers just one event, on a desktop computer, dragging the window corner results in numerous "resize" events being fired, causing performance issues for JavaScript handlers updating the DOM.)

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 implementing a callback or action once all divs have been rendered with html2canvas

I am currently looping through a list of divs, converting them to canvas elements, and then adding them to jspdf for further processing. Once this is done, I proceed to save the content to disk. function exportDataTablesAsPDF() { var dataTable ...

javascriptjqueryjspdfhtml2canvas

Locate the parent and child elements within an array

Within the array provided below, there are parent items as well as children. I am currently able to identify parents (depth 0) and their immediate children (depth 1), however I am unsure how to handle deeper nested levels. For reference, you can view the ...

javascriptarraysjson

Is There a Glitch in IE9? Unexplained Expansion of DIV Element

Here is a small code sample that I have: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Test</title> <style type="text/css"> table.Sample { width: 600px; table-layout: fixed; } table.Sample ...

csshtml

Is it possible to condition a particular JavaScript event within an if statement?

I have implemented an edit in place feature that is responsible for saving the new value when an element loses focus. However, the challenge lies in the fact that these elements are part of a table, each having a unique element id followed by the correspon ...

javascriptjqueryajax

What steps can be taken to eliminate the undefined error in AngularJS?

Seeking assistance on resolving the undefined error in AngularJS. I am attempting to fetch data using resolve and utilize it in the controller, but I keep encountering an undefined message. Any insights on why this is happening? resolve: { message: fu ...

javascriptangularjsangularjs-directiveangularjs-scopeangular-ui-router

conceal any externally-provided iframes

There's an iframe on our page causing a display problem, even after attempting CSS modifications. Is there a way to use jQuery to hide an externally loaded iframe? We tested the document ready function, but it seems that the external JavaScript file ...

jqueryhtmlcssiframe

What is the proper way to retrieve a value from a multidimensional array in React?

I am attempting to retrieve a value from the 'coords' array and display it on the webpage. All other components are rendering correctly. However, I am currently encountering an error: TypeError: Cannot read property '0' of undefined ...

javascriptarraysreactjssyntaxcase

Post-render for HTML linkage

Is there a method to execute customized code after Knockout has inserted the html into the DOM and completed rendering? This is required in order to bind a nested view model to dynamically generated html code. Perhaps like this: <div data-bind="html: ...

javascriptdomknockout.js

Encountering a problem with CRUD operations when attempting to edit and save data from a table using

When attempting to edit the information by clicking the radio button, the details are displayed in the appropriate boxes but the existing data in the table is deleted. My goal is to utilize a single array/scope variable for editing, displaying, and deletin ...

javascriptangularjs

The checkbox in Yup does not get validated upon the user's submission

Below is the Yup configuration implemented in my React app: const schema = yup.object().shape({ email: yup.string() .email('E-mail is not valid!') .required('E-mail is required!'), password: yup ...

javascriptreactjsformikyup

The Vue 3 chart.js does not have a defined chart when clicking

I'm currently in the process of upgrading my website from vue 2 to vue 3. As part of this upgrade, I also needed to update vue-chartjs from version 4 to 5. Unfortunately, it seems that this update has caused some issues with my click event functionali ...

javascriptvue.jschart.jsvuejs3vue-chartjs

Adjusting the dimensions of the cropper for optimal image cropping

I am currently working on integrating an image cropper component into my project, using the react-cropper package. However, I am facing a challenge in defining a fixed width and height for the cropper box such as "width:200px; height:300px;" impo ...

javascriptreactjstypescriptreact-hooks

Navigate through each of the pictures within the folder and encode them into base64

I'm currently working on a project where I need to convert images in a folder to base64 and then store them in MongoDB. At first, I successfully converted a single image: var filename = '1500.jpg'; var binarydata = fs.readFileSync(filename ...

javascriptnode.jsexpressbase64

Engage in a Play app featuring AngularJS frontend navigation

Currently, I am using the Play Framework to develop a REST service and I would like the front end to be built with Angularjs in order to make rest calls. I have configured a route provider as follows: angular.module("getAbscencePlans", ["getAbscencePlans. ...

javascriptangularjsplayframework-2.0

Guide to positioning a list to align right within a div

I'm having trouble getting the list to float to the right inside a div. Here is the HTML code: <div class="topdiv"> <header>MakeItWork</header> <ul class="navigation"> <li>Home</li ...

htmlcssfrontend

Is there a way to implement a CSS3 accordion menu on a website?

Is there a way to make an expandable menu using just HTML5 and CSS3? I am interested in showing only 4 menu items with a "view all" option that, when clicked, expands all list items. Can this be achieved without any JavaScript? ...

htmlcssaccordion

Determine whether a specific text is contained within a given string

Can someone help me determine if a specific text is included in a string? For example, I have a string str = "car, bicycle, bus" and another string str2 = "car" I need to verify if str2 exists within str. I'm new to JavaScript so I appreciate you ...

javascript

What is the most effective method for dynamically creating an HTML report from scratch?

I need help figuring out the best way to convert a substantial amount of program output into an HTML report. Right now, I am manually piecing together the report by extracting relevant information from the extensive logging in my large Python program and f ...

pythonhtmltemplatesreport

What is the best way to cancel a setTimeout in a different function within a React JS application?

I'm currently working with the following code snippet: redTimeout = () => { setTimeout(() => { this.props.redBoxScore(); this.setState({ overlayContainer: 'none' }); }, 5000); } In addition, I h ...

javascriptreactjsreact-native

Next.js lacks proper Tree Shaking implementation for MUI

After setting up a react app with next.js, I noticed that the bundle size for the client significantly increased when importing MUI components. Specifically, there was a large module called @mui/base added to the bundle, even though I am only using three M ...

javascriptreactjsnext.jsmaterial-uimodern-ui