[Resolved] How do I create a sticky footer bar?

[Yugen]

Hello,

I am having trouble creating a sticky footer bar similar to the ones on https://numerologysecrets.net/ and https://numerologynation.com/

I managed to create a bar but it doesn’t float and messed up everything so I deleted everything as I didn’t want to mess up the site.

Any help is appreciated, thank you.

[David]

Hi there,

use a Hook Element to add your HTML to the the after_footer hook

Example markup:

<div class="footer-notice">
    <div class="notice-inner grid-container">
        <!-- your HTML here -->
    </div>
</div>

Then this CSS based on example:

.footer-notice {
    min-height: 60px;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
}

body {
    margin-bottom: 60px; /* match min height of notice */
}

[Yugen]

Thanks for the help so here’s what I did for the HTML markup and CSS

<div class="footer">
      <div class="notice-inner grid-container">

        <strong><p style="font-size:20px">FREE GIFT:</strong> Numerology reading tailored to your birthday</p>
               <button class="button">Free Reading</button>

</div>
 

CSS

.footer {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  background-color: #B22222;
  color: white;
  text-align: center;
}

body {
    margin-bottom: 60px; /* match min height of notice */
}
.button {
  background-color: Gold;
  border: none;
  color: black;
  padding: 10px 20px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  margin: 4px 2px;
  cursor: pointer;
  border-radius: 4px;
}

.button:hover {background-color: #fdcd00;}

And this is how it currently looks like on my site: https://i.imgur.com/FulynNS.png

How do I make the bar smaller and get the button on the same row as the text instead of below it? Thanks again

[Tom]

Hi there,

You could try this as your HTML:

<div class="footer">
    <div class="notice-inner grid-container">
        <strong><p style="font-size:20px">FREE GIFT:</strong> Numerology reading tailored to your birthday. <button class="button">Free Reading</button></p>
    </div>
</div>

[Yugen]

Thanks for the help!

[Tom]

No problem 🙂

[Rostyslav]

Hello,

How can I create exactly the same sticky bar for the bottom like in this image: https://ibb.co/hW6x8Z1

It should just appear in mobile and tablet view.

Is there any tutorial on how can I achieve that bar with 3 boxes each with text and icon and linked?

(sorry for my bad English)

Thank you!

[David]

Hi there,

there is no specific tutorial – if you want to create a new topic we can give you some guidance

[Author]

Posts