[Support request] Header modifications and transferring wix site

[David]

Hi,

I am trying to replicate a wix header to wp using generatePress because of speed issues with wix. I am using the wired template.

https://chris9919.wixsite.com/ddtm

https://flyingducks.digital

I am struggling to get the header right using the customized features (mobile header) and the breakpoint slider is also not showing for wired template. So creating things like centering the logo and having the call to action button do not seem obvious to me.

Do I have to hack it?

thanks

David

[Fernando]

Hi David,

What menu are you wanting to use? Would it be an Off canvas panel menu or a regular dropdown menu?

The menu icon in the reference link isn’t working.

[David]

Hi Fernando,

wp site + generate press = https://flyingducks.digital

For mobile the hamburger is working for me even after clearing cache (reveals menu).

On desktop it is not showing because “mobile header” doesn’t display a breakpoint slider for wired theme.

wix site https://chris9919.wixsite.com/ddtm is the one I am trying to recreate the header.

Looks like I can change some design elements using css but I thought the would be a more intuitive way of creating the header for desktop and mobile like with the block editor for page and post design.

thanks,

David

[David]

So it would be offcanvas for desktop and mobile with call to action in different positions on the header depending on screen size.

[David]

Hi there,

you can set the Mobile Menu Breakpoint in the Customizer > Layout > Primary Navigation.
This applies to ANY mobile menu including the Mobile Header.

[David]

Hi David,

Great, thanks for that. How do I add elements to the header such as the call to action button that I can show and hide based on the screen width? I think I can use css to centre the logo etc but I need to add divs to the header for the button.

Is there a way to do that or should I be updating html in the theme file editor?

thanks,

David

[David]

To add the button, you can use a Block Element – HooK:

https://docs.generatepress.com/article/block-element-hook/

1. Go to Appearance > GeneratePress and Activate the Elements module.
2. In Appearance > Elements -> New –> Block Element
By default the Element Type will be the Hook.

3. in the Element editor, add your button.
4. Set the Hook in the sidebar settings to: menu_bar_items
5. Set the Display Rules to Entire Site.

Once you have that in place i can assist with some CSS to center logo etc. if you need.

[Author]

Posts