Border around elements (except home page)

Hi Geoff,

For this to work, you must have the Navigation back inside the header on Appearance > Customize > Layout > Primary Navigation by setting the navigation location to either "Float left" or "Float right".

You then move the widgets on the Top Bar widget area to the Header widget area.

We then re-layout ALL the elements with custom CSS.

And then add the border once they're all wrapped into one element (the header).

Alternatively, you can also try creating 2 Hook elements.

For the first hook element, try adding this HTML line on its code area:

<div class="bordered-header"> and then set the hook to generate_before_header with a priority of 1.

On the second hook element, try adding this HTML line on its code area:

</div> and then set the hook to generate_after_header with a priority of 11.

We then style the bordered-header class with:

.bordered-header { margin: 0 auto; border: 2px solid #ffffff; }

Note: You can try this alternative first as it's the easier one.

Thanks so much for this! It's really close to what I need. Two questions: what CSS do I add to limit the bottom border from going the full width, and how do I put a bit of space between the menu and the border? This is what I used with the hooks you outlined:

.bordered-header { border: 2px solid #ffffff; padding-top: 30px; padding-left: 40px; padding-right: 40px; }

The website is dev.furrynation.com

Also, how do I turn off the border in mobile view? I tried this and it doesn't work.

#mobile-header .bordered-header { border: 0px }

Thanks so much for your help!

Hi there,

can you add the the 2 x Hooks that Elvin offered - so we can relook at the CSS for the changes you require

Sorry, I wasn't clear. The hooks were the first thing I did.

Also, via hooks, I set the border to not appear around the header elements on the home page (forgot to mention that, too). But it appears on all of the other pages.

Ah ok.
So your bordered-header CSS - set a max-width and some auto margins like so:

.bordered-header {
    border: 2px solid #ffffff;
    padding-top: 30px;
    padding-left: 40px;
    padding-right: 40px;
    max-width: 1200px;
    margin: auto;
}

Sorry, that didn't work. The bottom border is supposed to be a part of the box surrounding the navigation/header/top bar, and your CSS didn't turn off the border on mobile view.

If it's simply turning off the border on mobile view, we can wrap the CSS in @media rule so it only gets added on tablets and desktops.

Like this:

@media (min-width:769px){
.bordered-header { border: 2px solid #ffffff; padding-top: 30px; padding-left: 40px; padding-right: 40px; }
}

As for wrapping the top bar up to the menu inside a border, the hook elements I've suggested has to be added.

I've checked the page but it doesn't seem to be added yet.

As I mentioned before, the hooks are intended to be turned off on the home page. Please look at the other pages, like this one:

http://dev.furrynation.com/photos-video/

The bottom border extends the length of the header element, and I'd like it to complete the box around the padded header elements. Also, if I add any bottom padding, it breaks the shape of the box.

(The bottom border remains after applying your mobile CSS.)

Thank you!

(The bottom border remains after applying your mobile CSS.)

This occurs because the site still has the old one. The site should keep only the one w/ the @media rule. :)

The bottom border extends the length of the header element, and I’d like it to complete the box around the padded header elements. Also, if I add any bottom padding, it breaks the shape of the box.

Replace the CSS with this one. (And only keep this one)

@media (min-width: 769px) {
    .bordered-header {
        border: 2px solid #ffffff;
        border-bottom: none;
        padding-top: 30px;
        padding-left: 40px;
        padding-right: 40px;
        padding-bottom: 30px;
    }

    .bordered-header nav#site-navigation {
        border-bottom: 2px solid #ffffff;
    }
}

Result - https://share.getcloudapp.com/o0uZpGnw

That's perfect -- thanks so much!

No problem. Glad you got it sorted. :D

Hi everyone,

My client noticed a glitch with this -- if the web browser's type is reduced (via Zoom), the border around the header elements loses its shape -- https://share.getcloudapp.com/qGurd5Qq

Is there a CSS fix for it?

Thanks!