- This topic has 21 replies, 3 voices, and was last updated 2 years, 2 months ago by Elvin.
-
AuthorPosts
-
December 20, 2021 at 7:59 pm #2055119Geoff
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
December 20, 2021 at 8:34 pm #2055133ElvinStaffCustomer SupportHi 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 togenerate_before_header
with a priority of1
.On the second hook element, try adding this HTML line on its code area:
</div>
and then set the hook togenerate_after_header
with a priority of11
.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.
December 26, 2021 at 11:04 am #2059997GeoffThanks 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
December 26, 2021 at 1:17 pm #2060051GeoffAlso, 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!
December 27, 2021 at 1:31 am #2060307DavidStaffCustomer SupportHi there,
can you add the the 2 x Hooks that Elvin offered – so we can relook at the CSS for the changes you require
December 27, 2021 at 6:58 am #2060612GeoffSorry, I wasn’t clear. The hooks were the first thing I did.
December 27, 2021 at 7:06 am #2060622GeoffAlso, 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.
December 27, 2021 at 9:34 am #2060917DavidStaffCustomer SupportAh 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; }
December 27, 2021 at 8:21 pm #2061269GeoffSorry, 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.
December 27, 2021 at 11:53 pm #2061390ElvinStaffCustomer SupportIf 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.
December 28, 2021 at 6:25 am #2061644GeoffAs 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!
December 28, 2021 at 4:22 pm #2062235ElvinStaffCustomer 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; } }
December 28, 2021 at 8:42 pm #2062361GeoffThat’s perfect — thanks so much!
December 28, 2021 at 8:44 pm #2062362ElvinStaffCustomer SupportNo problem. Glad you got it sorted. 😀
January 10, 2022 at 7:14 pm #2076090GeoffHi 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!
-
AuthorPosts
- You must be logged in to reply to this topic.