Header sticking in place (Wordpress layout)

As a newcomer to HTML/CSS/PHP, I am taking on the challenge of building a website using an existing WP theme called onetone with a sticky header feature. Despite customizing it extensively, I have encountered a frustrating issue with the header.

You can view the site here:

The problem arises when scrolling, as the header has a jerky jump before sticking to the top of the page; this behavior also occurs when scrolling back to the top.

(Please disregard any other errors, as the site is currently under construction)

After pinpointing the issue to a line in a javascript jQuery Parallax v1.1.3 script, I attempted replacing it with another script offering similar functionality. However, the problem persisted, leading me to believe that the unwanted styles affecting the header are embedded within the theme's code itself. Despite my efforts to adjust the CSS and PHP files, I have been unable to resolve the issue.

I have come across similar queries on Stack Overflow, but unfortunately, the solutions provided surpass my current level of expertise. While I grasp the nature of the problem, I find myself unable to rectify it in my specific scenario.

If anyone could offer assistance in resolving this matter, I would greatly appreciate it. I am more than willing to share any relevant sections of code for analysis.

Thank you for considering my request in advance.

jqueryhtmlcsswordpressheader

Answer №1

Looking at your onetone.js file on line 166, the code appears to be:

$('.sticky-header').css({ 'position': 'static' }).removeClass('fxd');

I see that setting the position to static may not be what you intended for a fixed header. You can try removing that and instead adding this to your CSS:

.home-header {
    position: fixed;
}

Answer №2

After some work today, I managed to crack the problem. Simply switch up the CSS code from

.fixed-header .main-header {
    display: none;
}

to

.fixed-header .main-header {
    display: inline;
}

By making this change, you'll activate smooth scrolling across all pages.

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

Image transformed by hovering effect

I've been attempting to add a hover effect to the images in my WordPress theme. The images are displayed in a grid format, created by the featured image on the posts. The grid layout is controlled within content.php <?php /** * controls main gri ...

javascriptjqueryhtmlcsswordpress

Dealing with a dragover conflict in AngularJS when using JqueryUI and encountering unexpected behavior with

While working with AngularJS and JqueryUI, I ran into an issue. You can view a demo here. angular.module("app").directive("draggable", function($timeout) { [...] function link(scope, element, attrs) { element.draggable({ start: function() { ...

jqueryangularjsjquery-ui

Potential effects on the browser when making an AJAX call every 3 seconds

Our goal is to periodically check for updates in the database every 3 seconds using the jquery $.ajax method. While the technology is straightforward, we are interested in potential reasons to avoid making frequent ajax calls, such as browser limitations ...

ajaxjqueryfirefox

Implementing an Onclick function in HTML

I have an HTML code and I am looking to add an onclick event for a button named GET DATA. When the button is clicked, I want to send data for userId and categoryId to a PHP file. Can someone help me implement this functionality in my existing code? Here ...

javascripthtmlajax

What is the best way to divide the results of an array into two separate slides

I have a challenge where I need to split an array with over 50 entries into multiple slides, displaying only 14 entries per slide. I've attempted the following code: <div class="mySlides fade"> <div class='content'> ...

javascriptphpjquerysliderphalcon

ASP repeater exceeding container boundaries

Having trouble with my asp repeater that reads from a database and generates repeatable divs. The issue arises when the h4 spills over the div, particularly when using <%Eval. Any suggestions on how to fix this? Manual input divs don’t seem affected o ...

c#htmlcssasp.net

What is the best method to initialize a JavaScript function only once on a website that uses AJAX

Currently, I am facing an issue with a javascript function that needs to be contained within the content element rather than in the header. This is due to a dynamic ajax reload process which only refreshes the main content area and not the header section. ...

javascriptjqueryajax

Retrieve a child element based on its class name within a specific parent element identified by its

In the current html structure, there is a div with a unique id containing quantity-related elements: <div class="four columns mobile_right flex" id="quantity_1"> <button class="qtyminus" role="button">& ...

jquery

What is the best way to incorporate line breaks into a reportlab PDF created in HTML format?

Currently, I am facing a challenge in generating PDFs using reportlab. The data that needs to be displayed is fetched from a dataframe. However, one field contains a lengthy text that requires breaklines for better readability in the PDF. Below is the sni ...

pythonhtmlreportlab

Remove identical options from the dropdown menu

After hard-coding and adding items to the dropdown list for team size, such as 1, 2, 3, I am encountering an issue when loading it for editing or updating. Duplicate values are appearing in the list: 1 1 2 3 4... How can I remove these duplicate value ...

phpjavascriptjqueryhtml

Struggling to format a responsive CSS background image

I'm facing an issue with setting responsive dimensions for a background image within a div that displays differently on mobile. Currently, I am manually specifying the width and height, but I want to avoid doing so. When I try using 100% for the width ...

htmlcss

AngularJS confirmation directive for deleting items

I am currently utilizing this directive for a confirmation prompt when deleting an app. However, regardless of whether I click cancel or yes, the app still gets deleted. <small class="btn" ng-click="delete_app(app.app_id)" ng-show="app.app_id" ng-con ...

javascripthtmlangularjs

Having trouble verifying the selection option in Angular 6

I've been trying to implement Select option validation in Angular 6, but neither Aria-required nor required seem to be effective. The requirement is for it to display a message or show a RED border similar to HTML forms. Here's the HTML snippet ...

htmlangulartypescriptangular6

Encountering the error "ReferenceError: data not defined" while utilizing JSONP in my code

I'm encountering an issue when trying to display JSON data using JSONP. I have a complex JSON file that is being delivered from a different domain via a URL and my expertise in JSON and ajax is limited. After following a tutorial on JSONP at https://l ...

javascriptjqueryjsonajax

The submit button click does not trigger the execution of ajax code

I'm faced with a challenge when trying to implement an ajax call in my form. My goal is to display a spinner on the screen to indicate that the form is processing and submitting information. However, it seems that the ajax call is not being triggered ...

jqueryhtmlajaxforms

Action triggered by clicking a button for every individual table column button

Managing my visitor records is made easier with a visitor table that allows me to add and display visitors. Each entry in the table includes a set of sign-in and sign-out buttons placed in two columns. Whenever I click the sign-in button, the current times ...

javascriptjqueryajaxhtmllaravel-5

Update the value of a button based on specific conditions being satisfied using jQuery, PHP, and Sessions

I am dealing with a button that has dynamic text based on the form's state. Here is the code snippet: <input type="button" count='<?php echo count($_SESSION['children']);?>' name="children" class="add_child" value="Add An ...

phpjquerysession

make the width of the table cell as compact as can be

I have a table that spans 100% of the width, and I'm wondering how I can set the width of columns 2 and 3 to be as small as possible without causing the content to break. I tried adding a specific width style, but I know this is not recommended for r ...

htmlcss

What could be causing my HTML form to only accept one response at a time?

While conducting my study, I required a Likert scale and came across a well-designed one at https://codepen.io/Buttonpresser/pen/poXVod However, I encountered an issue where selecting an answer for one question would deselect the answer for a different qu ...

htmlforms

Are HTML entities ineffective in innerHTML in javascript?

Take this example: <script type="text/javascript> function showText() { var text = document.getElementById("text-input").value; document.getElementById("display").innerHTML = text; } </script> <?php $text = "<html>some ...

javascripthtml