[Resolved] Border around entire site

[Oskar]

Hello, I’d like to have a border or frame around the entire site and I’ve followed the tutorial how to add a site wrapper. But it conflicts with the transparent header (merge with content). So I removed that and added css to add padding to the body and head. Not sure if it’s the right way. But I’d like to have the same border also for the sticky navigation. I have not yet found a way to do this. Is it possible for only the top and sides?

Also I cannot for the life of me get the logo and the colours of the text in the header to change? I have emptied cache, removed logo and added again etc. It’s not changing. Tried another browser but seems like the header settings are stuck. Any idea how I can get this to update? I’m working on a staging site: https://www.seaside-collective.com/stg_cc1dc

[Fernando]

Hi Oskar,

Let’s tackle the first issue here, and tackle the second one after. Or, if you want, you can raise a separate topic for that.

For reference, do you have a sketch or a link to a site with a similar design?

[Oskar]

Hi Fernando, Thank you. You can go to the main domain. We are replicating the site to the Generate press theme which is now on staging.

[Fernando]

What you did is alright.

How about adding this CSS to incorporate the spacing to the sticky nav as well:

nav#sticky-navigation.is_stuck {
    width: 96% !important;
    margin-left: 2%
}

[Oskar]

Thanks so much! That’s what I needed for the sticky menu.

[Oskar]

Sorry Fernando, one more thing. On larger screens the header is not centered, it’s more to the left. How do I get it centered?

[Ying]

Try change this CSS:

.header-wrap .site-header {
    margin-left: 2%;
    margin-right: 2%;
}

to:

.header-wrap .site-header {
    margin-left: auto;
    margin-right: auto;
}
@media (max-width: 2000px) {
    .header-wrap .site-header {
        max-width: 96%;
    }
}

[Author]

Posts