X- like responsive menu in Pro

[Plexustech]

I would like to configure the navbar menu in pro to work the same way it natively did in X (with the integrity stack) right out of the box. I want the nav bar to move under the logo the the first jump, then turn to the hamburger menu on second jump, but have the hamburger be a menu dropdown like it is in X. Is this possible?

[ruenel]

Hello There,

Thanks for writing in! When you are using Pro theme and will not create or assign any custom header, the default X header like you have in X will be used. The logo, menu and he hamburger icon and its dropdown will behave the same as what you have in X.

If you will be using custom header, you will have to create two bars to mimic the X default navbar set up.

Hope this helps.

[Plexustech]

Hi Ruenel,

Thanks for the reply. The Pro default header out of the box does not behave the same as X does. Here is a link to a page I built with X:

Home

notice when you shrink the page size down, the nav bar moves over until it hits the left main logo. When it does, the nav bar then jumps to below the logo, but still displays the logo full size. After further shrinking, when there is no more room for the nav, it then becomes a hamburger.

The hamburger also in X creates a nav dropdown in between the logo and the slider, as you can see on my example URL. In Pro, my only options are a right sidebar dropdown (which dims out the page like a lightbox would), a nav dropdown (which acts like a menu subnav), or a nav modal (which is a lightbox).

My other issue is that my image element (top left logo) in Pro is shrinking responsively as the page gets smaller. I have it set to standard (not scaling), and a set pixel width. I want this to stay the same size as the page gets smaller, not shrink out of sight.

The Pro site I’m building is still in development and is on a staging server (it is live if you have the URL pointing to a specific IP). I can private message you this info if you can set your browser or host file to get there.

Thanks for your help.

Chris

[rad]

Hi there,

In header builder, you have to create everything. You have to create elements for each device view, like hamburger menu for the mobile and inline menu for the desktop. Please check this video for a sample https://www.dropbox.com/s/7k7aml9k36hsskl/PRO%20HEADER%20VISIBILITY.mp4?dl=0

You must download the video for better quality. You control your element’s visibility through Customizer’s Hide During Breakpoints. And you can do that to any elements, containers, and bars. It’s in your control.

As for the image and you don’t wish to use the scaling, then you can at least add max-width to the image in the pixel unit, to make sure it will not overflow on the header bar.

Thanks!