Mobile-style menu with full desktop height

I am currently working on developing my first custom WordPress theme from scratch.

My goal is to design a mobile-style menu that can also be displayed on desktop screens.

To achieve this, I have used jQuery to implement the sliding effect. You can view and inspect the code on this website:

However, I am facing an issue where the menu does not adjust its height according to the page. Despite trying various CSS codes (such as absolute/fixed positioning, different display options), I have been unable to resolve the issue.

I have also attempted to make the menu scroll if the page's height is shorter than that of the menu.

If necessary, I am willing to modify the HTML structure in order to fix this problem.

Below are some excerpts of the code related to the header:

 [Code excerpt]

In addition, here is the relevant CSS:

 [CSS code]

And finally, the HTML snippet pertaining to the header section:

 [HTML code]

Your assistance in resolving this issue would be greatly appreciated!

jqueryhtmlcsswordpress

Answer №1

Instead of relying on $(window).height(), try using window.innerHeight to accurately determine the current desktop height.

Similarly, you can utilize window.innerWidth to obtain the desktop width.

For a layout similar to, simply set the menu position to fixed and dynamically adjust the height with window.innerHeight.

Consider this scenario: your menu has a width of 300px. When clicking the menu icon, add left padding of 300px and smoothly slide the menu from left to right.

If adding left padding causes content alignment issues, insert window.innerWidth in the content holder and apply css property box-sizing: content-box;.

I hope these suggestions provide some assistance.

You may also want to explore WDES Responsive Mobile Menu for a plugin solution.

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

Which method is best for extracting content from a WebView - using Regx, implementing JQuery, or utilizing HTML parsing?

Criteria for Acceptance I am working with a website in a WebView that is not under my ownership. I want to be able to trigger native button clicks based on the content of the page. Tasks at Hand I need to determine if the HTML content contains specific UR ...

jqueryobjective-cuiwebview

Encountering a type error while executing ajax script in django

Currently, I am facing an issue with using jquery ajax to fetch json data on my webpage within the Django framework. Despite my efforts, I am unable to render the json data successfully. When attempting a simple console.log(data) as my initial step, nothin ...

pythonjqueryajaxdjango

Applying styled numbering to elements using nth-child selector in

I have a div with multiple p tags inside. My goal is to assign them numbers using CSS. The number of p tags may vary. By using the :nth-child() selector and the ::before pseudo-element, I can achieve something like this: div p:first-child::before { ...

htmlcsscss-selectorspseudo-class

Implementing Google Fonts into Next.js with the combination of Sass, CSS, and Semantic UI React

I have set up my next.config.js file with the following configuration: const withSass = require('@zeit/next-sass'); const withCss = require('@zeit/next-css'); module.exports = withSass(withCss({ webpack (config) { config.module. ...

cssreactjssassnext.js

I am looking to navigate between tabs on a multi-part form in order to submit all the form data

My current form consists of five questions, each on a separate tab. What I am trying to achieve is the following: When the user submits the form data on the fifth tab An Ajax request sends the form data to a background script for processing Simultaneousl ...

phpjqueryhtmlajaxtwitter-bootstrap

Is it possible to size a child div to be larger than its parent without using absolute positioning?

I'm trying to figure out a way to have one or two divs on a page that are larger than their parent div without having to overhaul the entire website structure. I originally considered using position absolute, but that would mess up the container heigh ...

htmlcsscss-position

Scaling down the screen for a smaller display

Having trouble achieving a specific effect and could use some assistance. My goal is to create an action where, upon clicking on the nav element (for simplicity, I've set it to be triggered by clicking anywhere on the body), the following should occur ...

javascriptjqueryhtmlcss

The functionality of Nativescript squared buttons is not functioning as expected

I recently developed a Nativescript app using Angular, incorporating customized buttons. However, I have encountered an issue where I am unable to achieve perfectly squared buttons with the desired appearance. Here is my CSS code: Button { font-size: ...

cssnativescriptangular2-nativescript

Is there a way to spin these hexagons around?

Hey there, I need some assistance with a problem. I have to rotate these three hexagons slightly, about 15 degrees or so. The catch is, it needs to work in Internet Explorer only. I've been struggling with this all day and it's getting ...

htmlcss

Code snippet for Item Title within Woocommerce

Can anyone assist me in finding the shortcode for displaying product names in WooCommerce? I'm looking to include the product name in the subject line of certain emails, but my search efforts have been unsuccessful so far. Any help would be greatly ap ...

phpwordpresswoocommerce

Manipulate images in real-time and insert custom text using JavaScript/jQuery

Within my possession is an image depicted above. My objective revolves around dynamically altering the values present at the occurrences of L, A, and B; to achieve this, I must eliminate or conceal L, A, and B while substituting them with numerical equiv ...

javascriptjqueryhtmldynamic-textdynamic-image-generation

Upon successful completion of the Ajax call, refresh the page without causing any blinking

Hey there, I'm facing an issue with my website, I've implemented ajax to fetch data from my API, and upon successful retrieval, I need to reload the page to display the information, However, sometimes the page blinks before reloading, while oth ...

javascriptphpjqueryajax

Choose the parent element along with its sibling elements

How can I target not only an element's siblings but also its parent itself? The .parent().siblings() method does not include the original element's parent in the selection. $(this).parent().addClass("active").siblings().removeClass("active"); I ...

javascriptjqueryparent

Guide on how to include jquery-ui css file in Vue3

I am new to TypeScript and VueJs. Recently, I decided to incorporate jquery-ui into my project using Vue3, TypeScript, and Electron. After some trial and error, I was able to successfully set up the environment. However, when I attempted to use the jquery ...

jquerytypescriptvue.jselectron

Developing a innovative and interactive nested slider using Jssor technology

Trying to implement a dynamic jssor nested slider to showcase albums and images from a mySQL database. Everything works fine with a single album, but when there are two or more albums, the display gets messed up. I'm still learning JavaScript and JQue ...

javascriptjquerymysqljssor

Learn how to dynamically incorporate multiple Bootstrap collapse elements in PHP

I've encountered an issue with my code that contains both HTML and PHP. The problem arises when there are multiple elements in a collapse, as only the first element works properly. This is due to the fact that each element has the same id named "colla ...

javascriptphpcsstwitter-bootstrap

Display excerpts of code within an Angular application within the HTML segment

I'm currently developing a tutorial page using Angular where I intend to display code snippets in various programming languages such as 'Java', 'TypeScript', 'C#', and 'Html'. Although there is a snippet called ...

htmlangular

Tips for minimizing the dimensions of images in a slideshow within a gallery

Check out this website: The slideshow images on there are too tall. Can someone assist me in lowering the height of the images? I want both images to be displayed at the same height. Thank you in advance. ...

cssslideshow

Insert a variety of pictures into divs that share the same class

Can I target div elements with the same class in CSS and apply unique styles to each? Here is my HTML: <div class="image"><br/>a</div> <div class="image"><br/>b</div> <div class="image"><br/>c</div> ...

htmlcss

Uniqid in React fails to generate unique IDs

Currently working on creating my first react project and developing a todo list. I have incorporated the uniqid generator into my todo object, but it seems to be returning an empty id rather than a random one. Oddly enough, if I move the todo state outsi ...

javascripthtmlcssreactjs