Archived topic
Custom Text in Header
22 replies · Started by Brian on February 10, 2021
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!
Hi 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 hook
And set the Display Rules > Location to Entire Site.
Once its there let me know and ill provide some CSS to position and style it.
Haha, 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 :D
Well i am glad to hear that - great feedback is always appreciated.
Your welcome !
Murphy'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!
So 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.
Thank 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!
Not 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.
I 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.
Try 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 );
}
}
That 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.
Never 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!
You can remove the Menu text altogether if you want - by simply deleting the Mobile Menu Label in Customizer > Layout > Primary Navigation.
I 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 ;)
doh sorry the label is the one in the Off Canvas panel settings