I run a Shopify store with a header navigation bar that I want to be sticky at the top when the screen is resized to mobile size. Currently, the sticky navigation bar works on desktop view but disappears when the screen size changes. I would like the header bar to remain fixed at the top in a similar way as shown in the example below:
https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_sticky_header
Can anyone advise me on how to make it sticky for mobile size?
The code snippet provided by w3 schools is compatible with mobile devices. It seems that the issue you are experiencing (without access to your Shopify site) could be due to having two navigation bars in your theme, and only applying the code to one of them. Try adding the code to the other header as well, even if it's not visible on the page, adding the class should not create any problems.
if (window.pageYOffset >= sticky) {
header.classList.add("sticky");
mobileheader.classList.add("sticky");
} else {
header.classList.remove("sticky");
mobileheader.classList.remove("sticky");
}
My goal is to display a variable number of Bootstrap cards on an HTML page. The number of cards should depend on user data in the database, meaning that I need to create these cards dynamically with jQuery. One issue I encountered is that Bootstrap cards a ...
I need help working with this list element <li class="list-group-item d-flex justify-content-between align-items-center"><span class="product_name" style="font-size:24px; color:#870FD1" data-price= "121.34"& ...
I am experimenting with adding tooltips to my forum posts. Short tooltips work fine, but longer ones are causing issues by cutting off text. Changing the position property from relative to absolute fixes this problem, but causes the text to overlap. Here ...
I have an application that pulls data from a database and displays it with associated metadata that dictates the display style. Let's simplify it and say the only metadata is the size of the square it should appear in. For example: dataArray : { ...
I found a helpful example on how to change link colors for the current page here. Here is the script I added: <script> // current page highlight $(document).ready(function() { $("[href]").each(function() { if (this.href == window.l ...
I'm currently learning about javascript and jquery, attempting to implement various scripts. I successfully executed the following script: jQuery(document).ready(function($) { var scroll_start = 0; var startchange = $('#homepage-header' ...
Currently, I am dealing with two CSS classes: .dragbox and .removebutton. The .dragbox represents a div, while the .removebutton is a button nested within the div. On my page, there are multiple dynamically generated instances of .dragbox. I am seeking ...
I'm facing an issue with my code snippet: <div class="row"> <div class="w-100 col-auto col-lg-5 w-auto p-3 p-lg-5 m-4 rounded-sm bg-dark text-white shadow-lg"> <h3>This is a very very very long Text</h3> </ ...
Need help positioning a footer at the bottom of the page? Using the class fixed-bottom causes the footer to overlap the content when scrolling. <div class="sticky-top"> <qipr-header></qipr-header> <qipr-sidenav>&l ...
Despite searching extensively on Google, I have not been able to find a solution to this frequently asked question. My challenge is to consistently position the footer at the bottom of the page, even when there is minimal content present. Below is an exce ...
Hello there! I have a question regarding Bootstrap 3 grid. I need it to have a width of 1500px with a gutter width of 30px. Which breakpoints should be adjusted accordingly for this setup? ...
I have a query that spans across two areas - CSS styling and JQuery functionality. The primary concern I have is related to my code snippet below. When the user clicks on the circular profile image, ideally, the "profiledrop" div should become visible. ...
Seeking a solution to the issue of making the "IN PC" item visible only on computer screens and not on mobile phones. This menu item continues to display on mobile devices, despite efforts to resolve the problem. Any insights on where the problem lies and ...
Check out this amazing parallax effect: https://codepen.io/samdbeckham/pen/OPXPNp <div class="parallax"> <div class="parallax__layer parallax__layer__0"> <img src="https://github.com/samdbeckham/blog/blo ...
The first image is from IE9 and above, while the second one is from IE8. In IE8, the right side goes down because it's displaying in mobile view (Check the top menu) Here is the header code I am using: <meta charset="utf-8"> <meta h ...
Notice the difference in styling between an input element and a div element: .test { filter: drop-shadow(0 20px 13px rgb(0 0 0 / 0.03)) drop-shadow(0 8px 5px rgb(0 0 0 / 0.08)); border: 1px solid black; height: 20px; } <input class="test" /> ...
While working on creating a typewriter animation effect for my website using only CSS that I discovered through some online research, a question popped into my mind - is it possible to set different colors for each text in the animation? I have included t ...
My Wordpress site uses a Bootstrap 3 layout where the loop displays posts using 2 different templates. Type 1 <div class="row"> <div class="col-md-4"> <h1>title</h1> <h3>sub</h3> </div> ...
Whenever I hover over my divs, I want them to change color. However, the code doesn't seem to be working as expected when I try to do so. I suspect that the issue might be related to the z-index property used in the class that I am trying to hover ove ...
Hey, I've encountered a strange issue. I just realized that when I go to my store, the "add to cart" button is overlapping with the product info URL. To better illustrate this problem, please see the images below: https://i.sstatic.net/mkQ8h.png Whe ...