- This topic has 38 replies, 3 voices, and was last updated 2 years, 3 months ago by
.
-
Posts
-
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?
Customer Support
Hi there,
Header layouts as complex as this one can be done within a Block Element – Site Header.
https://share.getcloudapp.com/rRuN9jkxMore about Block Element usage here –
https://docs.generatepress.com/article/block-element-overview/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.
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.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….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?
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.
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.
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
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.
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:
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?
This:
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: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? 🙂
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:Ok 🙃. Done. What is next? How to get rid of old navigation?
- You must be logged in to reply to this topic.