Viewing 15 posts - 1 through 15 (of 15 total)
  • Author
  • #542801

    Hi Guys!

    Is there any chance of creating a border around a full width site by using CSS (incl header and footer)?

    That would be brilliant!




    Hi Christian,

    Could you provide us with a link to the site in question so that we can take a closer look please?

    Best regards,


    Hi Rikard

    Many thanks for your reply. This one:

    It would be terrific to create this type of effect, a 20px white border around the whole site at the edge of the browser:

    Thanks so much.




    Please add following code to Quick CSS in Enfold theme options under General Styling tab

    @media only screen and (min-width: 990px) {
    html {
        border: 20px solid white;

    And go to Enfold theme options > Header > Header Behaviour and choose not to display sticky header.



    This border is exactly what I am looking for however, is there a way to have the sticky header still stick to the very top of the page (therefore removing the top and side border only around that sticky header?).


    Further to my post above, I’d like the result to be like this:



    Hi antdesign01,

    Thanks for contacting us!

    Please go to Enfold theme options > General Layout and set “Fixed Frame” :)

    Best regards,


    Thanks Yigit, I’ll try that.


    OK, this was perfect and far easier than what I was trying to do… sometimes we overlook the simplest methods in search for something complex.

    Thanks Yigit.


    Sorry… I jumped in too quick. The scrolled (sticky) menu doesn’t sit hard up on the edge of the browser like the example. I’d like it to sit on the browser edge, not the border of the site, but only when scrolled. Ill keep searching for a solution, but this isn’t quite right yet.


    Hi @antdesign01,

    Please add following code to Quick CSS field in Enfold theme options > General Styling tab

    .html_header_top.html_header_sticky #header.header-scrolled {
        z-index: 601;
    .html_header_top.html_header_sticky.html_av-framed-box .header-scrolled #header_main { margin: 0; }
    #top .header-scrolled .container.av-logo-container {
        width: 100%;
        padding: 0;

    Best regards,


    Hi Yigit,
    That’s much closer – it works from the width perspective, but the top of the menu is still adhering to the 10px margin from the fixed frame setting. Is there a way to overcome that?

    Love the theme by the way, it’s by far my favourite to work with.



    Please add following code to Quick CSS field in Enfold theme options > General Styling tab as well

    .html_header_top.html_header_sticky #header.header-scrolled { top: 0; }

    You can change “0” to “-1px” in case you would like to hide top border as well :)

    Glad you like Enfold :)

    Best regards,


    That’s it! Thank you – perfect. Very happy with that result.



    You are welcome! :)

    For your information, you can take a look at Enfold documentation here –

    If you have any other questions or issues, feel free to start a new thread under Enfold sub forum and we will gladly try to help you :)

    Best regards,

    P.S.: Please consider reviewing Enfold on ThemeForest if you have not already – :)

Viewing 15 posts - 1 through 15 (of 15 total)

The topic ‘Border around whole site’ is closed to new replies.