[Resolved] Creating specific header

Home Forums Support [Resolved] Creating specific header

Home Forums Support Creating specific header

Viewing 15 posts - 1 through 15 (of 31 total)
  • Author
    Posts
  • #684449
    Max

    Dear support team,

    I purchased GP Premium a while ago and am in the middle of building my webpage (mostly in combination with Elementor). I have been using WP for quite a while but am quite inexperienced when it comes to programming/page building, well especially styling or coding. This is my first forum entry here but I believe it will not be my last.

    As for the subject matter: I would like to create a header like this one (pay no attention to the rest of the theme): https://demo.inkhive.com/amora-pro/

    The important parts are the two semi-transparent bars (top and bottom), the background image (a bit larger/higher than the one of the theme) which should feature parallax scrolling and the site’s title which I would like to place either in a central position (like in the header example) or into the top bar (centered). For now I would like to add one global header to the entire webpage (I believe the “Global Locations” function in the Header Section of GP makes the latter requirement very easy).

    I honestly do not know whether it is asking too much to enquire about a solution on here (or how much of an effort it would be to implement it) but it would be lovely if someone were to point me into the correct direction. The plan is to create a global header and to later on be able to simply change the image depending on the specific page/category at hand.

    For now my webpage is private and I have simply experimented a bit with ELementor so there is not much to see. But if it is necessary I can provide access to a moderator from the forum/programmer from GP.

    Thanks for your attention and best regards,

    Max

    GP Premium 1.7.2
    #684673
    Leo
    Staff
    Customer Support

    Hi there,

    Try the following steps to create a header exactly like that.

    1. Set primary navigation to Above Header:
    https://docs.generatepress.com/article/navigation-location/

    2. Create a page hero and follow the steps to merge:
    https://docs.generatepress.com/article/header-element-overview/
    https://docs.generatepress.com/article/transparent-header-and-navigation/

    3. Set secondary navigation to below header:
    https://docs.generatepress.com/article/secondary-navigation-location/

    4. Add this PHP snippet to move it under page hero:

    add_action( 'after_setup_theme','lh_move_secondary_navigation' );
    function lh_move_secondary_navigation() {
        remove_action( 'generate_after_header', 'generate_add_secondary_navigation_after_header', 7 );
        add_action( 'generate_after_header', 'generate_add_secondary_navigation_after_header', 15 );
    }

    Adding PHP: https://docs.generatepress.com/article/adding-php/

    5. Add this CSS to merge with the page hero:

    .secondary-navigation {
        margin-top: -60px /* Adjust this number to match the height of the navigation */
    }

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

    6. Make sure the secondary navigation has a transparent color:
    https://docs.generatepress.com/article/colors-overview/

    Let me know πŸ™‚

    #684821
    Max

    Thanks Leo – I will try that and get back to you ^^

    #684895
    Max

    Hi again,

    I’m afraid that solution did not do the trick. I followed the steps you described but in the end the whole header section became scrambled, the hero image did not get displayed nor did the mentioned semi-transparent bars show up and the title of the site and the subtitle were placed over the first section of any page:

    I tried to add an image here but it did not work – here is the link to the screenshot I made:

    https://photoland.io/i/lgM1s

    Do you have an idea as to what the problem might be?

    #685180
    Leo
    Staff
    Customer Support

    It should definitely as I actually tested the method πŸ™‚

    I’m not able to view your site using the link you provided in the original topic as it requires password and login.

    Can you unlock it so I can see?

    Thanks!

    #685246
    Max

    That is reassuring to know – I really appreciate the effort!
    I unlocked the page so you should be able to see it.
    Let me know if you need anything else ^^

    #685254
    Leo
    Staff
    Customer Support

    So is there an image added for that page hero still?

    If so make sure there is <!--HTML comment--> added in the page hero content part if you don’t have other contents added in there for the image to show.

    Then you can use the top and bottom padding to control the size of the image.

    #685290
    Max

    Yes I had already added an image (as a featured image).
    I added the line of code to the page hero content part (above the tabs “page hero”, “page header” etc.) and added some padding (bottom 200 px and top 200 px). Now the image is visible but as you can see the menu basically looks the same as before – it just includes a transparent background and is now located at the top.
    The question is: How do we get the menu to appear at the bottom of the image in front of a semi-transparent bar while there is another semi-transparent bar lying on top of the image like in the example header I mentioned?

    #685320
    Leo
    Staff
    Customer Support

    Looks like we are getting closer.

    The top menu color can be changed within the page hero:
    https://docs.generatepress.com/article/header-element-overview/#site-header

    As for the bottom menu, I’m currently not seeing the secondary navigation at all.

    Can you make sure you’ve done steps 3-6? All steps above are needed.

    #685354
    Max

    Ok one mistake I made: I set the background to full transparency. Second one: I didn’t have the secondary menu enabled. Other than that I am sure that I have completed all of the steps you had mentioned.

    Now, I tried disabling the primary menu (currently at the top of the page) but that did not work out – instead the semi-transparent bar just became larger and the menu items became sort of scrambled (thus widening the bar). So I enabled it again. This is what it looks like now (see page).

    The CSS I added with Simple CSS. Maybe there is an issue with the specific features within the hero/header tab? Although I currently don’t see where this might be the case.

    #685359
    Leo
    Staff
    Customer Support

    I’m not sure what isn’t working currently? It looks basically like the example you’ve shown:
    https://www.screencast.com/t/XVyNVXgEJEsx
    https://www.screencast.com/t/WNXytFoO1

    #685371
    Max

    All righty – maybe there was a misunderstanding:

    While the bars now look exactly the same way and the menu is underneath the hero, I still have the issue of two menus being enabled. Basically I want the top bar to be empty of any content (or perhaps show social icons at a later point but that is not important at the moment). If I disable the primary navigation, the top bar looks like this (see page)

    #685566
    Leo
    Staff
    Customer Support

    Sorry not sure if I understand.

    Do you simply want a semi-transparent bar at the top of the hero without any content?

    If so we need to go about it using a different method as you cannot have a primary navigation without any menu items in it.

    So yes it is kind of important to decide what you want to add in that bar.

    I suggested the primary navigation way to achieve the example you linked.

    Let me know πŸ™‚

    #685644
    Max

    Yes you are correct: The original idea was to just have a semi-transparent bar at the top. Sorry about not specifically clarifying that at the beginning. Your method is also very useful for future implementation though but for now the transparent bars, the background image (with parallex scrolling) and the lower menu are what I am looking for.

    At this point I want to thank you again for the time you invest here – that is far from self-evident!

    A quick question regarding your suggestion before moving on: Would it be possible to simply add social icons at the top bar using your method?

    #686037
    Leo
    Staff
    Customer Support

    Untested with this but I believe you can use the top bar widget area to achieve the semi-transparent bar and social icons.

    I think you will only need to use primary navigation if you want a navigation search in there πŸ™‚

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