Topic: adding text or image above primary navigation menu in header

zen_moves
November 15, 2023 at 10:14 am

Hello, I want the header area to appear as follows: 1) left side: logo, 2) right side: text or image on top and primary navigation underneath. (I’m doing separate posts for two questions I have about this.)

My question for this post is: how do I add text (or an image) above the primary navigation items (which I plan to adjust so they appear lower on the page–aligned with the bottom of the logo)?

Notes:
1. The content I plan to insert there is a call to action and a phone number. I’m not sure if it’s better to insert text or an image with the text. I’d prefer to use text since its easier to modify but I may want to have a different background color behind the text, so if that’s an issue, then I can use an image.
2. I found some answers in searching but I’m not sure if they are current and what is the best way to do this.
3. I want to keep the resulting design responsive in terms of looking good on desktop and mobile.

Thank you.
David
November 15, 2023 at 3:30 pm

Hi there,

can you share a link to your site ?
zen_moves
November 15, 2023 at 3:35 pm

Hi. [site link moved to private info] (It’s a work in progress.)
David
November 15, 2023 at 3:45 pm

Ok, and the image / CTA / whatever it may be above the primary navigation. What should happen to this on Mobile ?
zen_moves
November 15, 2023 at 4:00 pm

That’s a good question. The idea is to have those three items (logo, nav, image/CTA) up top in a way that looks good on both desktop and mobile. In terms of mobile display, the image/CTA could appear in between the logo and the menu icon, but that might be tight. It might look better on mobile if the logo is on the left, the menu icon is on the right, and the image/CTA is under them. (Or maybe there is some other, better way I haven’t thought of.)

What is important is that the image/CTA will have phone number, and if someone clicks on the phone number on their phone, it should pull up the phone number in their calling app. I don’t know if this means it’s better to use an image or text.
David
November 15, 2023 at 4:15 pm

Ok.
So in that case you could use a GP Block Element – Hook to add your image/CTA content.

1. in Appearance > GeneratePress activate the Elements module
2. in Appearance > Elements -> Add New –> Block
2.1. By default the Element type will be a Hook:

https://docs.generatepress.com/article/block-element-hook/

Set the Hook to: before_header_content

2.2 Set the Display Rules to Entire Site

2.3 In the editor build out the content you want.

This will be positioned inside the header, in the wrong place, but once I can see it there, I can provide some CSS to position it.
zen_moves
November 15, 2023 at 4:57 pm

David, thank you! I appreciate the help!

I added the element (it’s not appearing on my phone) and content but I have questions about styling the content. Should I ask those here or in a separate topic?
Fernando
November 15, 2023 at 5:38 pm

Hi Zen,

Can you try replacing the hook with after_logo or menu_bar_items?

As for the Content styling, yes, kindly open a new topic.
zen_moves
November 15, 2023 at 5:48 pm

Hi Fernando,

Thank you.

after_logo looks like it’s in the same place as before_header_content
menu_bar_items makes it look like a menu item (instead of above it) — i left it like this for now

I’ll do another post for the styling but the menu_bar_items option changed the styling, so I’ll wait until the hook issue is figured out until I get to styling.
Fernando
November 15, 2023 at 6:04 pm

I see.

But with after_logo does it appear on mobile?

Also, to clarify, do you want this CTA beside the logo or after the menu?
zen_moves
November 15, 2023 at 9:59 pm

It appears on mobile with menu_bar_items but not with after_logo or before_header_content

On mobile, I’d probably like the CTA to appear just underneath the logo and menu icon (i.e. logo on left, menu icon on right, CTA centered underneath). I say “probably” because another option is to have the CTA in between the logo and menu icon, but that might look too crowded. (Sometimes I try things multiple ways and go with what looks best.)

On the desktop, I’d like the CTA to appear above the nav menu on the right side of the header (on the left: logo; on the right: CTA and menu, with CTA above menu).
Fernando
November 15, 2023 at 10:13 pm

I see. Let’s keep it at menu_bar_items.

On Tablet, may we know how you would like to position it? Would it be the same as Desktop?
zen_moves
November 16, 2023 at 10:19 am

Thank you. Sounds good. BTW, I discovered that on phone/tablet, the CTA appears in landscape mode with after_logo and before_header_content. But I decided to adjust the mobile menu breakpoint to 1024 so that the site should appear the same in landscape and portrait mode on both phone and tablet (please let me know if a different number is better).

Here’s what I’m thinking:
1) Desktop: CTA above nav menu items
2) Mobile/Tablet: CTA centered below logo (on left) and menu icon (on right)
Is it possible do that (i.e. different location for CTA for mobile and desktop)?

(I figured out that I can do #2 with after header. But that doesn’t solve #1. Plus, the CTA shouldn’t appear twice on desktop.)
Fernando
November 16, 2023 at 5:22 pm

Can you revert it back to menu_bar_items? I’ll check if it’s possible to have that design responsively with one Block Element. Otherwise, you’ll need two, with the other just hidden depending on the view.
zen_moves
November 16, 2023 at 5:32 pm

Yes. Done. Thank you.

Fernando

November 16, 2023 at 6:50 pm

Try adding this CSS through Appearance > Customize > Additional CSS:

@media (min-width: 1025px){
    .inside-navigation.grid-container {
        flex-direction: column-reverse;
        align-items:flex-end;
    }
}

nav#mobile-header .site-logo.mobile-header-logo {
    margin-right: unset;
    order: -2;
}

nav#mobile-header .menu-toggle{
    order: -1 !important;
}

nav#mobile-header .menu-bar-items {
    width: 100%;
    line-height: 2;
}

Viewing 16 posts - 1 through 16 (of 26 total)

1 2 →

You must be logged in to reply to this topic.

Are you a GenerateCustomer?

Just browsing?

adding text or image above primary navigation menu in header