Fixed Borders

By | July 23, 2016
 
 
 
 

Had a question about how to recreate the fixed borders as seen on this page. It’s not too difficult, all you need to do is first fix the header at the top (and add some Javascript if you want to scale down the menu after the user scrolls down the page), and then add three other empty <div>s to form the left, right, and bottom borders, making them fixed as well. You can either add the empty <div>s using a simple text widget, or add them to one of your main templates.

On this post, I’ve just added them directly into the post like this:

<div class="leftpageborder"></div>
<div class="rightpageborder"></div>
<div class="bottompageborder"></div>
<div class="toppageborder"></div>

Note that instead of making the header fixed, I just added an additional <div> for the top border. Maybe later I’ll get around to fixing the header.
Then add the following CSS:

.leftpageborder, .rightpageborder {
    position: fixed;
    height: 120%;
    width: 30px;
    top: 0;
    background-color: #0090d3;
    z-index: 1006;
}

.leftpageborder {
    left: 0;
}

.rightpageborder {
    right: 0;
}

.toppageborder, .bottompageborder {
    position: fixed;
    width: 100%;
    height: 30px;
    left: 0;
    background-color: #0090d3;
    z-index: 1006;
}

.toppageborder {
    top: 0;
}

.bottompageborder {
    bottom: 0;
}

body {
   padding: 30px;
}

Note that I made the borders blue so they stand out from the background. Also note that I added 30px of padding to the <body> element to account for the borders.

7 thoughts on “Fixed Borders

    1. CrouchingBruin

      Hi, Jonny. Can you please post a link to your site? It’s hard to tell what the problem might be from looking at an image.

      Reply
      1. Jonny King

        Hi, link is:
        http://garthenorsocks.jonnyking.co.uk/
        It’s a staging site in the process of being updated, so all a bit messy, but the homepage is the only one with the border. I will be adding it to each, probably with page templates, do you agree?
        I’ve also changed it back to blue, just to make it clearer.
        Thanks very much for your help,
        Jonny

        Reply
        1. CrouchingBruin

          When I do a view source on your site, I see this:

          Are you using something like Page Builder to build your pages? The problem is that there is this CSS rule:
          .wpb_wrapper > div {
          margin-bottom: 24px;
          }
          So there’s a 24px margin begin put at the bottom of each border element. The easiest way for you to fix the bottom border is to change this rule:
          .bottompageborder {
          bottom: 0;
          }
          To this:
          .wpb_wrapper .bottompageborder {
          bottom: 0;
          margin-bottom: 0;
          }

          Reply
          1. Jonny King

            This has worked perfectly! Thank you so much for this. Do you have any idea how to add the 30px padding to the footer too? Currently the bottom of the copyright text is cut off.
            Also, is there a simple way to disable this effect for mobile, or to reduce the size?

            Thanks so much for your help, everything I’ve been trying just doesn’t seem to be going right. I normally manage to work things out with trial and error, but this has been a bit tricky!

            Thanks again,

            Jonny

          2. CrouchingBruin

            Do you have any idea how to add the 30px padding to the footer too? Currently the bottom of the copyright text is cut off.

            You can add this rule:

            @media (min-width: 991px) {
            body[data-footer-reveal="1"] #footer-outer {
            bottom: 30px !important;
            }
            }

            Note that this will shift your footer up on every page (including those without borders), so if you only have borders on your home page, you should use this instead:

            @media (min-width: 991px) {
            body[data-footer-reveal="1"].home #footer-outer {
            bottom: 30px !important;
            }
            }

            Also, is there a simple way to disable this effect for mobile, or to reduce the size?

            It looks like there is already a CSS rule in place that hides the borders at mobile widths:

            @media (max-width: 991px) and (min-width: 768px)
            .vc_hidden-sm {
            display: none !important;
            }

            The border elements are contained inside a DIV with a class of vc_hidden-sm, so they automatically disappear when the screen goes under 991px in width (which is why I used a width of 991px in my rules above; you don’t want the copyright to float 30px above the bottom of the window when there’s no border).

  1. Ahmet

    Hello,
    Thank you for information but i have tried a lot of examples but i could not do to bottom border what i want.
    My website is 99.lunafim.com
    Im using full screen slide sections and i want to full body border, how can i do that?
    I added some where 4 div(s) but no luck.
    Thnx

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *