Is there a way to use CSS to move the main header navigation, including the logo and links, on my website up when scrolling down in order to hide the top black bar header that contains contact information? The website in question is atm.truenorthmediasolutions.ca. Thank you for your help!
$(window).scroll(function() {
if ($(this).scrollTop() > 200) { //ensure to use `this` instead of `document`
$('.fixedelement').css({
'display': 'none'
});
}
});
sourced from here
<script type="text/javascript">
$(document).ready(function () {
$(window).scroll(function() {
if ($(this).scrollTop() > 10){
$('.et_pb_section_0_tb_header, #et-main-area').addClass("stickyheader");
}
else{
$('.et_pb_section_0_tb_header, #et-main-area').removeClass("stickyheader");
}
});
});
</script>
css
.stickyheader .et_pb_row_1_tb_header{ display:none;}
.stickyheader .et_pb_row_0_tb_header.et_pb_row{padding-top:0!important; top:0!important;}
.stickyheader .et_pb_image_0_tb_header {top:12px;}
#et-main-area.stickyheader .et_pb_section_0_tb_body,
#et-main-area.stickyheader .et_pb_section_1_tb_body{top:100px;}
Is there a way to increase the distance between these two columns? <div class="row "> <div class="col-md-6 shadow"> ... </div> <div class="col-md-6 shadow "> ... </div> </div> ...
I am currently working on a piece of code that consists of two main functions. When 'Add more' is clicked, a new value is added to the observable array and a new text box is displayed on the UI. Upon clicking Save, the values in the text boxes ...
Here is my Vue script: <script> export default { ... methods : { login() { // uri -> http://my-app.test/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="472b28202e2978222a262e2b7a332234330720 ...
Hello Everyone, I am attempting to achieve the same layout as demonstrated in [original image] where the "browse collection" div and the "request brochure" div are aligned with the four items above them. My approach involves using Bootstrap, and I assume ...
I'm currently developing an angular tree structure that contains a large nested array. nodes : public fonts: TreeModel = { value: 'Fonts', children: [ { value: 'Serif - All my children and I are STATIC ¯\ ...
My current method of fetching data from MySQL is as shown below: $catmapper = new Application_Model_Mapper_BusinessCategoryMapper(); $result = $catmapper->getBusinessCategory(); To display the results, I use a for loop to iterate through and wrap each ...
Creating a navigation menu with 4 blocks can be a bit tricky, especially when trying to show one block at a time upon click. Here is my code attempt, but unfortunately it's not working as expected. I would greatly appreciate any help or suggestions on ...
Currently, I am working with MUI version 5.15.0. I have a component called Chip, and my goal is to display the icon after the label on the right side. I attempted to use the CSS rule - .MuiChip-icon{ order:1 }, but it resulted in too much spacing. Additio ...
I am facing a challenge in fetching an element from the netlify dashboard. The code I have currently grabs the base element that the web developers have set, indicating that it gets updated with javascript. However, I am having trouble accessing this updat ...
My current code includes multiple ajax requests from various JavaScript files. I am looking for a way to identify specific ajax requests and interrupt their execution in order to prioritize a newer one. Is it possible to detect and stop ajax requests based ...
I'm looking to create a dynamic layout where an input field is accompanied by a list in a div, positioned either above or below depending on available space. This setup needs to account for the fact that the input field could be located anywhere on th ...
Looking to experiment with a different landing page? Take inspiration from this example. Here's the HTML snippet, for more details check out the full code on Codepen. <link href='http://fonts.googleapis.com/css?family=Lobster' rel=&apos ...
Is there a way I can streamline my if/else statement to avoid code repetition in my header component? Take a look at the example below: export class HeaderMainComponent { logoAlt = 'We Craft beautiful websites'; // Logo alt and title texts @Vie ...
I've created an "aquarium" using HTML and CSS, Now, I want to make the entire page responsive so that the elements shrink and grow based on the browser resolution. The first step is determining how the container should be structured. Is it acceptabl ...
It appears that prettier is not formatting the code as desired. Here is my current ESLint configuration: "eslintConfig": { "root": true, "env": { "node": true }, "extends": [ &q ...
Currently, I am developing a Django CMS plugin that includes a model choice field dependent on another field in the form. To update the choices in the model choice field based on the trigger field selection, I am using AJAX. However, when submitting the fo ...
Upon loading my Bootstrap 5 webpage, the toggle button successfully moves the navbar and body section to show or hide the full sidebar. However, an issue arises where the body section goes behind the sidebar when using the toggle button. Below is a portio ...
I am trying to align the edit and delete buttons with the image and premise name on the same line. Both buttons should be placed on the right side and have the same size as the card. Currently, the layout looks like this: https://i.sstatic.net/sNikU.png ...
I attempted running the following code snippet var buttonElement = $('<button>Button</button>'); $('body').append(buttonElement); buttonElement.hover().css('background-color', 'red'); Unfortunately, the ...
In my test.php file, I have implemented a code where ajax sends a request from index.php to this page. Within this page, I have created an array, converted it to JSON, and returned it as follows: <?php $arr = array( "status"=>200, "result"=>array ...