[Support request] Help with creating header/navigation

Home Forums Support [Support request] Help with creating header/navigation

Home Forums Support Help with creating header/navigation

Viewing 15 posts - 1 through 15 (of 39 total)
  • Author
    Posts
  • #2076051
    Saša

    Hi everyone,

    for days now im trying to create header like one on the link. This header i have designed in figma and im now trying to recreate it in generatepress and i dont know even where to start. Can someone please help me?

    Image link (my dropbox)

    #2076073
    Elvin
    Staff
    Customer Support

    Hi there,

    Header layouts as complex as this one can be done within a Block Element – Site Header.
    https://share.getcloudapp.com/rRuN9jkx

    More about Block Element usage here –
    https://docs.generatepress.com/article/block-element-overview/

    A wise man once said:
    "Have you cleared your cache?"

    #2076331
    Saša

    Thank you Elvin. Is it possible that you help me with first steps? I need help building structure because for some reason i cant get it right.

    Here is link of my structure for header but not sure if this is good approach. Also when in add site logo in one of the containers i get error in code.

    Link to my dropbox screenshot

    I would like if you could help me with buildind this header navigation and after building it I will create a video of all steps for future users who have same problem as me.
    Im using generatepress and generateblock for the first time. I want to stay and rebuild all my websites on this theme because its just awesome.

    #2077002
    David
    Staff
    Customer Support

    Hi there,

    before getting into the details and what we can help with – do you have a design for the mobile layout?
    Kinda need to know what happens to those logo links etc….

    #2077142
    Saša

    Hi David,

    yes here is the design for mobile menu. It will be the same for tablet as well. Mobile header link

    thank you for the time you are taking for my request.

    I imagined that this is all primary navigation, I think its easyer that way or am I wrong?

    #2078129
    David
    Staff
    Customer Support

    That makes life easier as we can just enable the Mobile Header and Off Canvas Panel for mobile.
    OK for the desktop header i would:

    1. Add your Logo, Site Title and tag to the customizer > Site Identity.

    2. Add a Menu to the Primary Navigation and set its Customizer > Layout > Primary Navigation –> Location to Float Right.

    3. For the Logo bar create a Block Element, and set the Element Type to Hook and use: inside_navigation
    3.1 Add a Conatainer block first and give it an Advanced > Additional CSS Class(es) eg. above-navigation-bar – we need this for some CSS to position it above the menu in.
    3.2 Build your logos using a GB Grid Block and the core Image Blocks so you can add links…
    3.3 Set the Display Rules to the Entire Site.

    4. Add this CSS using your Custom CSS Class

    .above-navigation-bar {
        flex: 1 0 100%;
    }

    If you want to get the basics setup and share a link i can look at what other changes need to be made. It will probably require some more CSS.

    #2078584
    Saša

    David,

    I did everything you suggested. Here is screenshot of elements link

    Site is on temporarily server here is link to live site. https://saar2.sg-host.com/
    Now I dont know:
    1. how to remove that error im getting on php (see live site)
    2. how to center-center logotipes inside containers so that they look like this (see Link )
    3. how to add menu buttons
    4. how to add menu buttons in top bar
    5. how to change color for site title text (for site tagline I have manage to edit it)

    not sure if i have missed something.

    Hope you will now have more information and time for helping me. Also if you need I can give you access to WP admin.

    #2078621
    Elvin
    Staff
    Customer Support

    1. how to remove that error im getting on php (see live site)

    I don’t see any errors. Can you provide a screenshot of what error you’re seeing?

    2. how to center-center logotipes inside containers so that they look like this (see Link )

    I’m not sure what you mean by this. Were you pertaining to the striped background color? if yes, this will need a custom CSS.

    3. how to add menu buttons

    You can add menu items on Appearance > Menus. But making them appear as buttons will require CSS.

    Here’s a brief explanation – https://docs.generatepress.com/article/adding-buttons-navigation/

    4. how to add menu buttons in top bar

    On Appearance > Widgets, you can look for the Top bar area as shown here – https://share.getcloudapp.com/Blud50Nr

    5. how to change color for site title text (for site tagline I have manage to edit it)

    On Appearance > Customize > Colors, under Header, you should see an option for the site title as shown here – https://share.getcloudapp.com/6quEeW5k

    A wise man once said:
    "Have you cleared your cache?"

    #2078826
    Saša

    Elvin, im sorry but I think that you did not read messages from David to me so your explanantions are not tied to conversation that me and David started futhermore they dont help. (BTW. center-center is horizontal and vertical aligment- check out header design i have provided) and here is link to error im seeing LINK Not sure why im seeing this error because my wordpress install is fresh and I dont have any third party plug-ins. Now I really need David to help me.

    David, I did everything you suggested, can we now continue? 🙂 also can you please read message I have send above.

    P.S. not sure if I need to mention that i have child theme installed. Just because of future updates and perserving custome CSS.

    #2078944
    David
    Staff
    Customer Support

    The Block Element you have looks to include a Theme site identity / logo block. Can you remove that.
    The only content you want in the Block Element are these:

    2022-01-13_11-38-19

    #2078950
    Saša

    not sure what you mean by “looks to include a Theme site identity / logo block”. Should I add all 4 images in one container? i have done this as you suggested like this: “3.2 Build your logos using a GB Grid Block and the core Image Blocks so you can add links…”

    I have added main logo for site in container as site logo block, are you referring to that?

    #2078976
    David
    Staff
    Customer Support

    This:

    2022-01-13_12-03-32

    You don’t need that as we’re using the theme elements and it looks as those blocks are creating the error.

    All you want in the Block Element is a:

    A Single Container Block
    — Grid Block of 4 coloums
    —- and the images as seen below in that grid:

    2022-01-13_11-38-19

    #2078994
    Saša

    Im confused because you are refering to (number one) and number 2 is what you are pointing see link. link

    Can I hire you for custom work? 🙂

    #2078999
    David
    Staff
    Customer Support

    Best thing to do is delete your current Block Element. And start again.
    The new Block Element only needs this content:

    A Single Container Block
    — Grid Block of 4 coloums
    —- and the images as seen below in that grid:

    2022-01-13_11-38-19

    #2079003
    Saša

    Ok 🙃. Done. What is next? How to get rid of old navigation?

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