[Resolved] Changing Layout and Page Builder

[DJ]

Hello, I’m in need of assistance to update my site. Currently I’m using the Pivot layout from the site library, but I’m trying to figure which layout this site is using https://kghawes.com/ and how to mimic it. In building my site initially Pivot was the closet layout I could find to what I envisioned. The site I referenced https://kghawes.com/ has more of the elements in which I’m looking for. In trying to mimic this site do I need to switch to Elmentor or can I continuing using Beaver because I’m somewhat familiar with it? Please advise of which layout this is or if its custom or if I can recreate it with Beaver Builder/Elementor using a different layout.

Thanks

DJ

[David]

Hi there,

your example Site is created using Elementor.
And it doesn’t look like they have used a GP Site Library to start with.

I reckon you could ‘copy’ it in Beaver Builder ….

[DJ]

Thanks for the info. Do you have any templates from the site library that you could recommend in giving a foundation to build upon?

[Leo]

We don’t have a template in the library quite like that unfortunately.

[DJ]

OK No worries. I’m going to stick with the Pivot template and make some adjustments. Now, I believe I have an idea of where to make some adjustments to get the desired look, however I’m not sure how to add a secondary logo header with social buttons to the right and maintain the menu header at the top as you scroll the page, similar to https://kghawes.com/. Now my current site is somewhat similar to this, but not as functional as https://kghawes.com/. Please advise on how I would do this and move my logo header over to the left so I could add a few more menu options.

Thanks

[Tom]

Hi there,

To achieve that look, you would:

1. Set your navigation location to below the header
2. Add a widget to the Header widget area in Appearance > Widgets
3. Enable the sticky navigation, and add a sticky navigation logo: https://docs.generatepress.com/article/sticky-navigation/

Hope this helps 🙂

[DJ]

Thanks! This worked great. However, I’m still in need of some assistance of figuring out how to separate the header image from where the logo and social buttons will be. I would like a white background where my logo and social button will layover and then below will be a dark grey/black row where my menu options will be and below that my image. Please advise.

[Tom]

Hi there,

That should happen by default. Can you show me where you applied my changes above?

[DJ]

No problem. Here you go. Images of what I changed. Let me know if you need anything else on my part.

Site – https://imgur.com/wuaYtBi
Step 1 – https://imgur.com/WVVIB6K
Step 2 – https://imgur.com/M2qDk21
Step 3 – https://imgur.com/jCinwDB

Going for this header and menu look. – https://imgur.com/POkaPXs

[Tom]

Couple things there.

1. You’re using a merged header, likely coming from a Header Element in “Appearance > Elements”. If you draft that Element, the background color will come back.

2. Make sure the navigation is set to below the header and aligned left.

[DJ]

Thanks Tom!I used what you proposed. It didn’t work at first so I went into Elements and adjusted the Global Header and Home Header to No Navigation, then enabled my Secondary Menu and set it to below header to get the look I wanted. Now I can play around with the color schemes.

[Tom]

Awesome, glad I could help! 🙂

[Author]

Posts