- This topic has 22 replies, 4 voices, and was last updated 3 years, 1 month ago by David.
-
AuthorPosts
-
February 10, 2021 at 10:06 am #1653437Brian
Hi all,
Apologies in advance for the stupid question, but I can’t for the life of me figure out how to add a simple line of text to the center of the site header for this site: https://mikava.coffee
Just for reference, I basically just want this added to the center of the header on all pages:
<span style=”color: #ee2737;”>Free shipping on orders over $50 in the US</span>
Your assistance in this simple matter is very much appreciated.
Thank you!February 10, 2021 at 10:12 am #1653445DavidStaffCustomer SupportHi there,
never a stupid question π
You can use a Hook Element:
https://docs.generatepress.com/article/hooks-element-overview/
Add your HTML to the hook content but give it a CSS Class which we’ll need to style and position it.
eg.
<span class="header-nice">My header notice text</span>
Select the
generate_insisde_navigation
hookAnd set the Display Rules > Location to Entire Site.
Once its there let me know and ill provide some CSS to position and style it.
February 10, 2021 at 10:17 am #1653448BrianHaha, thank you so much. And agreed on stupid questions of course, but that fact didn’t help me not feel like an idiot to have to ask ;P
I’m good with the CSS styling, so no worries there.
Thanks again!!PS. You all have the BEST support in WordPress land. I build a lot of sites for clients and have to use hundreds of different plugins/themes as a result, and no one has compared to you all here π
February 10, 2021 at 10:24 am #1653455DavidStaffCustomer SupportWell i am glad to hear that – great feedback is always appreciated.
Your welcome !
February 10, 2021 at 10:45 am #1653479BrianMurphy’s Law strikes again π I’m styling it just fine, but can’t move it to the center of the header. Can you help with that? Also, it currently disappears in mobile view, but I know my clients will want it there (despite how crowded and/or small it will look), how can I keep it visible on any screen size? Ideally, it will appropriately adjust its size as necessary to fit somewhat nicely.
Thank you!February 10, 2021 at 2:33 pm #1653687DavidStaffCustomer SupportSo this CSS:
/* Auto center shipping note */ .shipping-note { margin-left: auto; margin-right: auto; } /* This CSS to account for the different widths of logo and the menu bar toggle-cart */ #site-navigation .navigation-branding { margin-right: calc( 163px - 48px ); }
Then the simples option to keep it visible on Mobile is to disable the Mobile Header in Customizer > Layout > Header.
February 11, 2021 at 3:44 am #1654151BrianThank you! Last issue, on mobile now, no matter how small I adjust the shipping-note text size, the header ends up two lines. The cart and menu toggle only move up to the top next to the logo if I reduce the text to 0 (hide it). Any way to force all items into the same line?
I have the mobile adjustments set with @media(max-width: 768px) {…Thanks!
February 11, 2021 at 6:44 am #1654346DavidStaffCustomer SupportNot currently seeing it on Mobile. Can you remove the Mobile header so i can take a look. Might be possible to position the shipping notice above the logo/icons on small screens.
February 11, 2021 at 7:11 am #1654567BrianI hadn’t published the changes yet as it doesn’t look good in the customizer. I’ll publish them now so you can see what I mean. Ideally, it will look the same on mobile as desktop, with the shipping notice just smaller in the center of the other items.
Also, I just noticed now that on both mobile and desktop the header changes slightly when it’s sticky. On mobile, the cart jumps up, but nothing else. And on desktop, the shipping notice slides a bit to the right. Not sure what’s causing that. Thoughts?
Thanks.February 11, 2021 at 7:57 am #1654649DavidStaffCustomer SupportTry updating the CSS i provided above to:
/* Auto center shipping note */ .shipping-note { margin-left: auto; margin-right: auto; } /* This CSS to account for the different widths of logo and the menu bar toggle-cart */ @media(min-width: 600px) { #site-navigation .navigation-branding, #sticky-navigation .navigation-branding { margin-right: calc( 163px - 48px ); } }
February 11, 2021 at 8:04 am #1654661BrianThat fixed the sliding around on scrolling perfectly, but the mobile header is still just a bit off. In the customizer, it looks great, but on an actual mobile version of the site, the menu toggle goes to a second line.
February 11, 2021 at 8:08 am #1654667BrianNever mind, found a fix π I just removed the “Menu” text by reducing it’s size to 0. That gets everything on one line. Of course, this is a bit of a odd fix, so any other suggestion to clear that and make sure it looks right on all devices is much appreciated π
Thanks so much for your help!February 11, 2021 at 8:50 am #1654712DavidStaffCustomer SupportYou can remove the Menu text altogether if you want – by simply deleting the Mobile Menu Label in Customizer > Layout > Primary Navigation.
February 11, 2021 at 10:46 am #1654875BrianI had actually already deleted that from before, but now that I’m not using the mobile menu, the text had come back. It is fine as it is, just certainly not best practice to have text hidden by setting its size to 0px π
February 12, 2021 at 4:00 am #1655555DavidStaffCustomer Supportdoh sorry the label is the one in the Off Canvas panel settings
-
AuthorPosts
- You must be logged in to reply to this topic.