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

Home Forums Support How do I create a sticky footer bar?

  • This topic has 5 replies, 3 voices, and was last updated 3 months ago by Tom.
Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #1333727
    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.

    #1333828
    David
    Staff
    Customer Support

    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 */
    }
    #1336154
    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

    #1336788
    Tom
    Lead Developer
    Lead Developer

    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>
    #1337090
    Yugen

    Thanks for the help!

    #1337740
    Tom
    Lead Developer
    Lead Developer
Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.