[Support request] Customize header

[ken]

Hi Support,

I just bought GP premium to check out what’s possible. Is it possible to customise the header somehow? I checked out https://docs.generatepress.com/article/header-element-overview/, it seems that it always is corrected with the hero page? Is it possible to customise it without the hero page?

What I am aiming for is just a simple header with specific height, box shadowing and search function with the input field shown in the menu already. I tired doing element by element with the free theme but it’s quite troublesome as I have to change the CSS of quite a few elements, wondering if it’s easier with the GP Premium element but I am a little confuse on how I can use it to get a simple customised header.

Regards,
Ken

[ken]

Hi Support,

I have also tried disabling the header to see if i can then use the hero as the header. I activated the disable element function. Do i understand correctly that there’s no disable element function that disable an element (header) from all the pages? Do i have to go to each page to disable it?

My information is based on this.

Besides, I tried disabling the header on my home page by click on the header option under disable in the edit page page, previewing the page still show the header on my page.

Furthermore, the element I created doesn’t show up on the home page although I selected all pages on the location in the element.

Looking forward to your reply.

Regards
Ken

[David]

Hi there,

Header Elements are designed for creating Hero sections or Merging the Site/Header navigation with the content. For what i gather you won’t need a header element for this kind of layout.

Instead you can add a Search Widget to the right of the logo by adding it to the Customizer > Widgets > Header Widget.

Then set your Navigation Location to below header.

If you want something more specific such as Logo | Nav | Search then let me know.

[ken]

Dear David,

Yes, I would like to have the Logo|Nav|search as you mentioned.

I wanted to add an image but it only allows link and not direct upload.

[ken]

Hi again,

However, maybe visiting the site could help since the structure is already in place i just need to do some styling customisation.

[David]

No problems. One quick question. What happens to the Search field on Mobile? Will it still be displayed?

[ken]

Is it possible to disable the search function on mobile?

[ken]

just FYI on the desktop, there’ll also be drop down for the menu and they should have a gradient background color. If this changes anything.

[ken]

sorry for the many comments, I forgot to mention in the last message that I would also like to include a button on the nav bar. Is it also possible using generate press?

[Leo]

You can disable search on mobile with this CSS:

@media (max-width: 768px) {
    .main-navigation .menu-bar-item.search-item {
        display: none;
    }
}

Can you open separate topics for each of your questions?
https://www.screencast.com/t/fkxdc7xMm

It would make it easier for us to track.

Thanks

[ken]

Hi Leo,

It’s all about the same thing, how to customised the header, I am just giving information that might be needed for it. If deem irrelevant can be ignored. The display question is asked by your colleague, David by the way. 🙂 (you would understand if you read the thread throughly).

So my question is how can i customised the header, I am happy if you would be able to answer that (of course I hope not just sending a link but also using the information i have provided. )

Thanks!
Ken

[Leo]

So let’s do one question at a time:

Is it possible to disable the search function on mobile?

Have you tried my CSS here?
https://generatepress.com/forums/topic/customize-header-2/#post-1517960

Adding CSS: https://docs.generatepress.com/article/adding-css/

[ken]

Hi Leo,

thank you for your prompt reply, I think the biggest question here is how i could customise the header. If you could tell me that I should be able to figure out the css part myself. Or are you saying a bottom up approach (that I should try to do each part and asking question for each part of my header would be more helpful) ?

What I am trying to achieve is described here: https://generatepress.com/forums/topic/customize-header-2/#post-1517219

This is david’s reply: https://generatepress.com/forums/topic/customize-header-2/#post-1517394

And my question to his reply is yes, i need a more specific nav to have the format :Logo | Nav | Search.

Thanks!

[Leo]

And my question to his reply is yes, i need a more specific nav to have the format :Logo | Nav | Search.

This should help:
https://docs.generatepress.com/article/header-examples/#example-6

If that doesn’t help, then let’s go with this way:

Or are you saying a bottom up approach (that I should try to do each part and asking question for each part of my header would be more helpful) ?

[ken]

Hi Leo,

Okay, the link wasn’t really helpful and i have implemented the css it’s working for mobile now. What i would need next are:

– header width to be 79px
– vertical align center
– box-shadow: 0px 3px 6px #00000029;
– a button on the menu and
– the search being an input field instead of magnifying glass

Thanks!

Regards
ken

[Author]

Posts