[Resolved] Custom Text in Header

Home Forums Support [Resolved] Custom Text in Header

Home Forums Support Custom Text in Header

Viewing 15 posts - 1 through 15 (of 23 total)
  • Author
    Posts
  • #1653437
    Brian

    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!

    #1653445
    David
    Staff
    Customer Support

    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.

    #1653448
    Brian

    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 πŸ˜€

    #1653455
    David
    Staff
    Customer Support

    Well i am glad to hear that – great feedback is always appreciated.

    Your welcome !

    #1653479
    Brian

    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!

    #1653687
    David
    Staff
    Customer Support

    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.

    #1654151
    Brian

    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!

    #1654346
    David
    Staff
    Customer Support

    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.

    #1654567
    Brian

    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.

    #1654649
    David
    Staff
    Customer Support

    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 );
      }
    }
    #1654661
    Brian

    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.

    #1654667
    Brian

    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!

    #1654712
    David
    Staff
    Customer Support

    You can remove the Menu text altogether if you want – by simply deleting the Mobile Menu Label in Customizer > Layout > Primary Navigation.

    #1654875
    Brian

    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 πŸ˜‰

    #1655555
    David
    Staff
    Customer Support

    doh sorry the label is the one in the Off Canvas panel settings

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