[Resolved] Border around elements (except home page)

Home Forums Support [Resolved] Border around elements (except home page)

Home Forums Support Border around elements (except home page)

Viewing 15 posts - 1 through 15 (of 22 total)
  • Author
    Posts
  • #2055119
    Geoff

    Hello,

    I’d like to do a border around the Top Bar widget, header image and navigation, shown in this mockup:

    https://share.getcloudapp.com/5zunWj1P

    In addition, I’d like to turn the border off on the desktop home page and all of the pages on the tablet and mobile versions of the website.

    The website is https://dev.furrynation.com/

    Thank you,

    Geoff

    #2055133
    Elvin
    Staff
    Customer Support

    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.

    #2059997
    Geoff

    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

    #2060051
    Geoff

    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!

    #2060307
    David
    Staff
    Customer Support

    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

    #2060612
    Geoff

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

    #2060622
    Geoff

    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.

    #2060917
    David
    Staff
    Customer Support

    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;
    }
    #2061269
    Geoff

    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.

    #2061390
    Elvin
    Staff
    Customer Support

    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.

    #2061644
    Geoff

    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!

    #2062235
    Elvin
    Staff
    Customer Support

    (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

    #2062361
    Geoff

    That’s perfect — thanks so much!

    #2062362
    Elvin
    Staff
    Customer Support

    No problem. Glad you got it sorted. 😀

    #2076090
    Geoff

    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!

Viewing 15 posts - 1 through 15 (of 22 total)
  • You must be logged in to reply to this topic.