Suggestions for resolving the issue of my header being truncated on mobile browsers?

I am facing an issue with my header and need assistance in fixing it. The problem occurs when scrolling down, as it cuts off a part of the header, but returns to normal when scrolling back up. I suspect the hamburger menu might be causing this issue because clicking on it seems to worsen the cut-off. You can view the website by following this link: . Additionally, here is a gif demonstrating what happens: Link to the picture of what happens!

This issue only occurs on mobile devices. I have used inspector tools to troubleshoot the problem and have also tested it on a phone.

Below is the code for the header:

<header id="headerrr" class="fixed-top lode">
    [Header Code Here]
  </header><!-- #header -->

The CSS styles related to the header are as follows:

[CSS Styles Here]

And lastly, the JavaScript functions concerning the header are:

[JavaScript Functions Here]

I have identified the sections involving the header. Any assistance or advice would be greatly appreciated. I have already attempted removing the JavaScript code without success. Thank you for your help!

javascripthtmlcss

Answer №1

Implementing the on scroll shrink effect on the header

There are two possible solutions for this issue

  1. Either remove the header-scrolled CSS or adjust the height of header-scrolled based on the main height specified in the headerrr CSS 
     #headerrr.header-scrolledd {
    height: 60px;   
   transition: all 0.5s;
  }

The main height of the header is 80px. By adding the header-scrolled CSS through JavaScript, the height becomes 66px when scrolling down, causing a shrink effect. To prevent this, adjust the height of header-scrolled to be 80px.

Alternatively, the second method is to eliminate the JavaScript handling the header

// Header scroll class
$(window).scroll(function() {
 if ($(this).scrollTop() > 100) {
   $('.header').addClass('header-scrolled');
   $('#headerrr').addClass('header-scrolledd');
   $('#headerr').addClass('header-scrolleddd');
 } else {
   $('.header').removeClass('header-scrolled');
   $('#headerrr').removeClass('header-scrolledd');
   $('#headerr').removeClass('header-scrolleddd');
 }
});

if ($(window).scrollTop() > 100) {
 $('.header').addClass('header-scrolled');
 $('#headerrr').addClass('header-scrolledd');
 $('#headerr').addClass('header-scrolleddd');
}

Removing this block of code will eliminate the onscroll functionality for the header, preventing it from shrinking

You have the choice between these methods, but my recommendation would be to eliminate both the header-scrolled CSS and JavaScript code altogether

Answer №2

After implementing this CSS fix: 

html, body {width: auto!important; overflow-x: hidden!important}
, the issue was resolved.

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

Combining inheritance and isolated scopes: a comprehensive guide

I've encountered a situation where I need to sort an HTML table. Here is the code snippet: <table> <thead> <tr> <th custom-sort-one order="'Name'" >Name</th> </ ...

javascriptangularjs

An issue has occurred due to an illegal mix of collations (greek_general_ci,IMPLICIT) and (utf8_general_ci,COERCIBLE) when performing the operation 'like'

Although this topic has been extensively covered, my issue presents a slightly different challenge. I have set the default charset to utf8 in both the connection made to mysqldb in my Python code and my HTML files. conn = pymysql.connect(host='my ...

htmlmysqlinpututf-8collation

Perform an action in Django when a button is clicked using HTML onclick event

How to integrate HTML form on Django to perform actions using buttons? Check out the HTML code snippet below: <form name="bookappointment" class="form" method="POST> {% csrf_token %} <br> <input type ...

pythonhtmldjangodjango-rest-frameworkdjango-forms

The compatibility between Polymer JS and Rails Turbolinks is problematic

Currently, I am facing a challenge in integrating PolymerJs with a Ruby on Rails project that has Turbolinks enabled. The issue arises when I click on a link - the new page loads correctly but my Polymer components do not reinitialize. They appear as if no ...

javascriptruby-on-railspolymerturbolinks

Flexible design for your website content wrapper

When I display the content on my website, it sometimes overlaps the footer because the wrapper does not adjust its size based on the content. I set the height to an absolute value and now I need to find a more flexible option to prevent this issue. I' ...

htmlcssresponsive-design

tainted ajax outcome

Check out this HTML page I am using: <html> <head> <title>AJAX Example</title> <meta http-equiv="Content-Type" content="text/html"; charset="iso-8859-1"> </head> <script language="JavaScript" src="ajaxlib.js"> ...

phphtmlajax

Switch between the table data elements in an .hta document

The response provided by Dr.Molle in a previous post here was accurate, but it only functioned with <div>. I am required to utilize <table>. Though I found a script that works flawlessly outside of my VBScript, it does not work when embedded in ...

javascripthtmlvbscripthtml-tableshow-hide

The animation in an AngularJS directive only functions properly when utilizing $timeout

I can't seem to figure out why the animation is not working as intended in the code below: app.directive('openMenu', ['$animate', '$timeout', function($animate, $timeout) { return { link: function(scope, elem ...

javascriptangularjsanimation

Tips for importing a JavaScript file from a URL and initializing a class in a React component

I am looking to incorporate the PitchPrint app into a React website. They offer a tutorial for vanilla HTML/JS integration here. Following their instructions, I included script tags with links to jQuery and their app file in my index.html file. I then crea ...

javascripthtmlreactjs

Pair two arrays based on a specific key value

I'm currently facing a challenge where I need to associate two arrays of objects, and I could really use some help with this. Explanation : One array contains various reference products const array1 = [ {name: peanuts, referenceKey: 0}, {name: almon ...

javascriptarrayssortingmultidimensional-arrayassociative-array

What is the process of embedding base64 encoded data into an image in Javascript after retrieving the data from Azure Blob Storage?

I am attempting to insert an image by utilizing the base64 data pattern, rather than a URL link. Initially, I retrieve the data from Azure Blob storage using the Azure Node.js SDK: Azure Node.js SDK After downloading the data as a string, I am unsure of ...

javascriptnode.jsazurebase64azure-blob-storage

Unexpected error occurs when modifying HTML5 video source using JQuery on Internet Explorer

Currently, I am working on developing a web application using asp.net, Bootstrap, and JQuery. While testing it on LocalHost, I encountered an issue that needs debugging. The navigation bar of my application has a dropdown menu with links to tutorial video ...

javascriptjqueryhtmltwitter-bootstrapvideo

Ways to efficiently incorporate data into App.vue from the constructor

My app initialization uses main.js in the following way, import App from './App.vue'; const store = { items: [{ todo: 'Clean Apartment.', },{ todo: 'Mow the lawn!', },{ todo: 'Pick up ...

javascriptvue.js

Show the button only when the text is updated

Is there a way to display a button only when the quantity of items in the cart changes, similar to the eBay shopping cart feature? I was able to implement it but it's not functioning as expected. Here is the link to what I have so far. Does anyone kno ...

javascriptphpjqueryhtmlshopify

Using Paypal API in PHP to create a payment form

<?php $action=$_REQUEST['action']; if ($action=="") { ?> <center> <form name="_xclick" action="https://www.paypal.com/cgi-bin/webscr" method="post"> <input type="hidden" name="cmd" value="_xclick"> <input type=" ...

phphtmlformspaypal

Simulated function invocation just one time

I am testing the functionality of two functions in the same file. One of the functions is supposed to call the other, and I need to verify that this interaction occurs. import * as strings from './strings'; const generateUuidSpy = jest.spyOn(st ...

javascriptmockingjestjs

The content on my HTML webpage exceeds the width of the screen on mobile devices and certain PCs

I've exhausted most of the solutions available online, yet I haven't been able to resolve the issue. The content on my webpage is appearing wider than the screen size on mobile devices and some PCs URL: html, body,{ max-width: 100%; ...

htmlcssresponsive-designoverflow

Verify whether a pop-up window has been opened

Situation: Greetings, I provide a sensitive service to my clients. However, some of them are generating advertisement popups (using JavaScript) on their websites where my service is integrated, causing issues for us. My service involves a .js file hosted ...

javascriptjquerypopup

Tips for resolving the issue of 'defineExpose' method being undefined in Vue3

Struggling to pass a method from child to parent; unfortunately, the defineExpose() method seems to be malfunctioning. Could anyone provide guidance on what might be going wrong? For additional context, feel free to check out my previous question <scri ...

javascripttypescriptvuejs3vite

Javascript navigation menu failing to accurately display all pages

As I continue to enhance my website at , I have encountered an issue with the menu functionality. The menu is dynamically generated through JavaScript, scanning a folder for pages and populating them into an array. While this system functions smoothly ove ...

javascriptphpdebuggingmenuslideshow