Pro Header Customizations

Good morning,

I am still new to Pro, but determined to master it. What I would like to accomplish is probably quite simple, but I cannot seem to figure it out.

There is a second container in my header on http://wordpress-85748-402823.cloudwaysapps.com/. I would like to divide that space into a 1/3 and 2/3 row arrangement. That is to say I would like to add some text on the left taking up 1/3 of the space, and have everything you currently see in the remaining 2/3 of the space, aligned to the left.

Additionally, I had the menu set up so that the active menu item background color was different from the rest of the menu, but I removed those settings and can’t figure out where to add them back in.

Is that possible?

Thank you,
J

Hello There,

Thanks for writing in!

1.) You can divide the bar in 1/3 + 2/3 by setting up two containers inside your bar.

And then you can set the maximum width for each containers to 33% and 66% and the self flex to “Fill Space”.

2.) For the menu interaction, please click the menu and find the “Top Links” then head to the Primary Text Style > Text Color

Hope this helps.

Your feedback was super helpful!

Just about everything works perfectly, except:

  1. How to customize mobile menu button (three green dots)?
  2. How to open mobile menu - not working on any devices.

Thank you,
J

Hi,

Please see screenshots below

  1. Turn off Content Scrolling of your bar

Thank you! Never would have found those settings without your assistance.

J

I spoke too soon!

  1. Is there a way to change the menu toggle from the three little dots to the traditional three bars? Even better if there is a way to have the three bars with the word “MENU” next to it.

  2. For some reason the two buttons visible on larger screens seem to disappear completely on mobile devices, even though there is still plenty of room in the header for those buttons to stay where they are. Please advise?

Thank you!
J

Hello There,

Thanks for updating in!

1.) To change the menu toggle:

2.) Please make sure that each of the buttons is not hidden in all or mobile screen sizes. Click each of the button, go to the “Customize” tab and check the “Hide During Breakpoints” option.

Hope this helps.

Thank you!

J

You’re most welcome!

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.