How can I set up a sticky header notification specifically for advertising our promotions?

I am looking to implement a sticky notification that can be easily closed by the user.

Here is what I have accomplished so far:

.top-head {
  border-bottom: 1px solid rgba(0, 0, 0, 0.12);
  background: #FFFFFF;
  width: 100%;
  float: left;
  height: 50px;
  padding: 10px;
}

.header {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 1030;
    border-bottom: 1px solid rgba(0, 0, 0, 0.12);
    background: #FFFFFF;
    height:50px;
    padding: 10px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        <link rel="stylesheet" href="//stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
        <script src="//stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

        <div class="top-head fixed-top">
        <span>Get $5 off when you spend $10. Enter FIVEOFF at checkout.</span>
        <span class="float-right">x</span>
        </div>
    <div class="header">
    Logo
    </div>

UPDATE: In addition, I have included the header in order to address the issue more effectively.

javascriptjqueryhtmlcss

Answer №1

you have the option to utilize this method.

as an instance:

$(document).click('.top-head float-right', function() {
  $(".top-head > span").addClass('remove');
});
.top-head {
  border-bottom: 1px solid rgba(0, 0, 0, 0.12);
  background: #FFFFFF;
  width: 100%;
  float: left;
  height: 50px;
  padding: 10px;
}
.top-head span.remove {
  display: none;
  }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="//stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="//stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

<div class="top-head fixed-top">
<span>Get $5 off when you spend $10. Enter FIVEOFF at checkout.</span>
<span class="float-right">x</span>
</div>

Answer №2

You have the option to utilize boostrap alerts along with a button that includes the close icon:

#tophead {
  border-bottom: 1px solid rgba(0, 0, 0, 0.12);
  background: #FFFFFF;
  height: 50px;
  padding: 10px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>


<div id="tophead" class="alert alert-success alert-dismissible fade show" role="alert">
    <span>Get $5 off when you spend $10. Enter FIVEOFF at checkout.</span>
    <button type="button" class="btn close" data-dismiss="alert" aria-label="Close">
        <span aria-hidden="true">×</span>
    </button>
</div>

Alternatively, you can attach a click event handler to your span:

$('div.top-head.fixed-top span.float-right').on('click', function(e) {
    //$(this).closest('div.top-head.fixed-top').hide();
    // or, if you need to remove it
    $(this).closest('div.top-head.fixed-top').remove();
});
.top-head {
    border-bottom: 1px solid rgba(0, 0, 0, 0.12);
    background: #FFFFFF;
    width: 100%;
    float: left;
    height: 50px;
    padding: 10px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>


<div class="top-head fixed-top">
    <span>Get $5 off when you spend $10. Enter FIVEOFF at checkout.</span>
    <span class="float-right">x</span>
</div>

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

A guide on how to efficiently retrieve all images stored in a specific directory

I attempted to showcase all the images from a single directory using jQuery, but unfortunately it is not functioning as expected. My folder setup includes an 'images' folder and a 'js' folder. I followed this question on Stack Overflow ...

javascriptjqueryhtml

Switch input value when tabbing

I'm currently developing a small web application to track the work hours of team members. Everything seems to be functioning properly, except for one issue. When I navigate to a fieldset, a new page opens with a form to edit the time for that specific ...

javascripthtml

Having trouble loading an image with texture loader in Three.js? The issue may be related to the size and scale of the plane geometry

Can someone please assist me with loading images using TextureLoader? I am encountering a major issue where I am unsure how to add images to a mesh in a 1:1 scale and calculate PlaneGeometry. My goal is to display the loaded image in its original size with ...

javascriptthree.js

"Vibrant hues in a flask with interactive colorbox

I am currently using Jquery colorbox in conjunction with Flask. Upon the user clicking on an icon, a URL is submitted by the script to display a form within the colorbox. Once the user clicks the save button, the form is submitted and the colorbox is close ...

jqueryajaxflaskcolorbox

What are the steps to keep a web application from closing on Android when the back button is pressed?

I am currently working on a HTML5 web application and packaging it with Cordova (phonegap) 1.7. My goal is to customize the behavior of the Android back button so that instead of closing the application by default, it navigates back using window.history.b ...

javascriptandroidcordovaback-button

Is it possible to use jQuery to apply CSS styling to a div that is dynamically called by Javascript

I currently have the following HTML code: <div> <script type="text/javascript" src="someUrl"></script> </div> Once this script runs, it generates a nested div with links inside like this: <div> <div> <a hre ...

jqueryhtmlcss

Crafting Components without the Need for Scrollbars

I've been facing an issue when using document.createElement() in JavaScript to create multiple elements, they don't flow down vertically on my page. Instead, once the page ends, the elements start piling up horizontally. Does anyone have a soluti ...

javascripthtmlappendchildcreateelementcreatetextnode

Guide to placing the cursor at a specified position within an editable content div

I am struggling with a div <div id="user_status" class="status expanddiv" onkeyup="username_Search('New','user_status');" contenteditable="true" data-text="What's on your mind?..."> Some Text will be inserted here. </div ...

javascriptjquery

Rails partial successfully loads after AJAX request has been made

After making an ajax call, I am rendering a partial: Show.js.erb $("#notice_feed").html("<%=j render 'shared/notice_feed' %>") _notice_feed.html.erb <ol class="notices" id="notice_list"> <%= render @notices %> </ol> ...

javascriptjqueryruby-on-railsajax

transfer a product attribute value to a different product attribute within the Magento platform

There is an attribute called Weight : Attribute Code: weight Scope: general Catalog Input Type for Store Owner: Text Field Values Required: yes Apply To: Simple Product, Bundle Product Allow HTML Tags on Frontend: yes Also, there is a General Weight attr ...

javascriptphphtmlxmlmagento

The styles for the React calendar are not being properly applied to the calendar component due to CSS overriding

Having trouble overriding the default Calendar.css file in NextJS while creating a calendar component. Even after adding my own custom styles, they aren't being applied. Deleting the css file contents doesn't change the format either. Only when c ...

cssreactjsnpmnext.jsreact-calendar

Applying VueJS filters to refine object values

Is there a way to verify if the value of "startAt" is present in an object and return its corresponding ID? Here is the object in question: [{ "id": "1234567", "createTimestamp": "2020", "name": { "action": "", "allDay": false, "categor ...

javascriptarraysvue.jsobjectvuejs2

Is it feasible to adjust the width of a character?

Is there a way to determine the width of each character in a text area, either through setting or retrieval? <Field style={{ width: "60ch", height ...

cssreactjs

Can someone provide an explanation for this JavaScript function: What is the purpose of $this = $(this)

A user named "mu" kindly provided me with the following code snippet, which I found quite interesting. However, as a newcomer to this topic, I have a few questions that I'm hoping someone can help clarify. Given the code snippet below: function() { ...

javascriptjquery

Tips for Saving JSON Response from Fetch API into a JavaScript Object

I am facing an issue trying to store a Fetch API JSON as a JavaScript object in order to use it elsewhere. The console.log test is successful, however I am unable to access the data. The Following Works: It displays console entries with three to-do items: ...

javascriptjsonapifetch-api

A visual element positioned centrally within a row, directly beneath a paragraph tag

Every solution I attempt fails to work correctly, at times I achieve centering the image but then the figcaption ends up crammed into a small corner. <!DOCTYPE html> <html lang="en> <head> <meta charset="UTF-8> <link r ...

cssbootstrap-5

Adjusting the hue of a mat-form ripple based on certain conditions

I am currently developing an angular application and using mat-form-field in the following manner. <mat-form-field appearance="fill"> <mat-label id="title">{{ title }} </mat-label> <input formControlName ...

cssangulartypescriptangular8mat-form-field

Looking to access all parent elements of the <li> tag when it is clicked?

Currently, I am working on designing dynatree and the nodes are structured within ul and li tags. However, I am encountering an issue where I am unable to retrieve the parents of the clicked li element. Below is a snippet of my HTML code: <ul class="b ...

javascriptjqueryhtmlcss

Implementing JSON data retrieval in Django through jQuery

i have implemented a jQuery functionality to send json data containing arrays of elements as shown below $('#brand_category').click(function(event){ category = $("input:checkbox[name=category]:checked").map(function() { return t ...

javascriptjqueryjsondjango

Challenges with exporting dynamically generated divs using jspdf in an Angular 2 project

I have been utilizing the jspdf library to print div elements in my current project. But I recently discovered an issue where dynamic content within a div is not being printed correctly. Specifically, when incorporating simple Angular if statements, jspdf ...

javascripthtmlangulartypescriptjspdf