[Resolved] Site Header

[JANE]

We are changing our theme, because the one we have been using isn’t supported any more. The design of our header looks very much like the examples you show, but I can’t seem to find controls to be everything in the right places.

I created a staging site (url in private info below) and I am trying to match our current header (url in private info below).

1. How to move the logo to the top left like the current header.
2. How to align the menu right and reduce the spacing between the menu items so they all fit like the current header.
3. How to make the submenu spaces wider like the current header.
4. How to increase the height of the header so whole header image shows up, like our current header.

Thanks for your help.

[Ying]

Hi Jane,

Let’s work on one topic at a time.

For the site header layout, I would suggest:

1. Set the Navigation location to float right at customizer > layout > primary navigation.

2. Remove the background image from the site header.

3. Create a block element – hook at appearance > elements, add an image block to the element, select after_header hook, set entire site as the location.

Once it’s done, we can have a look at the menu items.

[JANE]

I got lost in the elements. I can choose block or hook, but once I choose Block, it takes me to another screen and I can’t see a place to choose hook. Or if I choose hook, I don’t see where to add an image block. Please clarify.

[Ying]

The image block goes to the content area of the block element, if you watch the video attached in the documentation, you should be able to understand how to add content.

I’ve taken a screenshot for you, so that you can understand it better:
https://www.screencast.com/t/FQPr2XohacX

[JANE]

I just started to look at a video on block elements and it appears that I am not seeing the same choices. Don’t know what to make of it.

[Fernando]

Hi Jane,

1. Have you set the Navigation Location to Float right already, I’m still seeing the navigation on top of the header.

2. What specific choices are your referring to?

[JANE]

Thank you for the screen shot. I did everything and saved the element, but the header image still isn’t showing up on the site.

I’m wondering if there is a compatibility problem. We are using a page builder called Thrive Architect on this site, and we read that it is compatible with generatepress pro, but I’m wondering. Some things in the elements seem to look slightly different, but, as I said, everything is done the way you said.

What can I do now?

[JANE]

I just pressed a few links on the site. It looks like the image is showing on all of the pages except the main page, which is odd. At least it’s some progress.

[JANE]

Then it occurred to me to clear the cache and the image is there. We still have the other things to fix: moving the gettingthru.org image up to the top, making the menu fit, and increasing the width of the submenus. Please advise.

[Ying]

Please do the step 1 I mentioned here:https://generatepress.com/forums/topic/site-header-7/#post-2370488

[JANE]

I did it yesterday. Just checked again, is there.

[JANE]

So now, I’m read to move on to move on to finish item 2 -reduce the spacing between the menu items so they all fit like the current header – and items 3 and 4.
3. How to make the submenu spaces wider like the current header.
4. How to increase the height of the header so whole header image shows up, like our current header.

Thanks again for all of your help.

[JANE]

I found the place for setting the spacing.

[Fernando]

I think we’re seeing a cached version of your site. From our end, the Header still looks the same.

We’re glad you found the settings though and you got it to work. You likely need to clear all caching mechanisms set on your site though.

Let us know if you’ll need further assistance.

[JANE]

We still need to move the logo up so it is directly to the left of the menu like the original site (url for original site, which we are trying to duplicate is below in private info).

I am also having trouble getting the footer menu to show up. I tried to follow the instructions below, but when I got to the Widgets page, I couldn’t find the Navigation Menu widget.

Adding a footer menu
First, you want to create a new menu in Appearance > Menus that will be dedicated to your footer. You can learn how to that here.

Then, go to Appearance > Widgets and drag the Navigation Menu widget into the Footer Bar widget area.

Inside that widget, you can select your newly created menu.

Please help.

[Author]

Posts