[Support request] Customize header

Home Forums Support Customize header

Viewing 15 posts - 1 through 15 (of 38 total)
  • Author
    Posts
  • #1517219
    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

    #1517282
    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

    #1517394
    David
    Staff
    Customer Support

    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.

    #1517413
    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.

    #1517414
    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.

    #1517557
    David
    Staff
    Customer Support

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

    #1517590
    ken

    Is it possible to disable the search function on mobile?

    #1517603
    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.

    #1517801
    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?

    #1517960
    Leo
    Staff
    Customer Support

    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

    #1517973
    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

    #1517980
    Leo
    Staff
    Customer Support

    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/

    #1517995
    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!

    #1518027
    Leo
    Staff
    Customer Support

    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) ?

    #1518058
    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

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