Best way to structure header?

[ohiocannabis]

So I have a couple of headers I need to finalize.

I’ve ironed out the header on

Mr. PowerWash - Mr. PowerWash

This is the structure I created for it to work correctly on desktop to mobile:

Then for my other main site I have this for the structure:

Ohio Hemp CBD Products Shop - OhioCannabis.com

The header on Mr Powerwash populates correctly on the website, but I feel there are rows or columns missing in the structure like I have setup on OhioCannabis.com

Now Ohiocannabis.com’s header does not populate correctly yet, I still need to optimize it for mobile and that’s what this thread is about. But I feel that because I have columns and rows, it has better structure than MrPowerwash, but just needs optimized for mobile.

So which structure is correct for these headers, with or without rows and columns?

[tristup]

Hi John,

Thanks for reaching out.
There is no best way as such, it depends on you and your requirements. In OhioCannabis.com the row structure worked, but it breaks on the smaller screen. You can adjust that by adjusting the width for the Row and Column for specific breakpoints, or you can create a different Bar which is only visible on a smaller screen. You can hide and show the Bars using the Customize > Hide During Breakpoints option as shown in the given screenshot.

Adjust Width in specific Breakpoints :

Hide During Breakpoint:

Hope it helps.
Thanks

[ohiocannabis]

Ok so I created a new Bar for my Mobile Header and added the proper Elements (I think)

I’ve also added the Collapsible Menu Element, but it’s not giving me the burger icon and is instead just a list of links in the header.

Also, I’ve created additional Rows within the Bar, but it’s not rendering properly in corner stone, or on mobile for some reason.

The mobile at least stacks the 2 rows on top of each other, but everything is bleeding off the screen.

I’ve adjust the various Elements using the Hide Breakpoints feature, and I think I have them all set right. Just need that burger icon to start populating and stay centered in the header as the bottom Row within that Container

What am I not doing right?

Ohio Hemp CBD Products Shop - OhioCannabis.com

I’ve added a Secure note with login if it helps you dig around a bit.

Thanks!

[christian]

Hey John,

Unlike previously, mobile navigation elements such as the Navigation Collapsed is no longer enclosed in a burger/modal setup out of the box. You now need to insert the Navigation Collapsed element inside a Modal or Off Canvas element. You can learn the setup in this video: https://youtu.be/zgAMBLRxG_w

You can also learn from the resources below:

• https://theme.co/docs/mega-menu
• https://theme.co/docs/modal

Hope that helps.

[ohiocannabis]

Ahh ok I watched that video thanks.

I realized what I was looking for was the Navigation Dropdown Element

It gave me the burger menu

Is there any reason to not use this Element? I just need a simple collapsible menu and this works great.

But I do kind of like how the Off-Canvas Element gives you the sidebar menu, so I may use that one in the end.

But how do I center the Navigation Dropdown on the screen? Right now it seems to favor the left and gets cut off.

Also, what about the other images I have in the first Bar in my menus? They aren’t populating correctly and are both bleeding off of the screen.

I thought I created the Rows correctly so that News | Media | Lifestyle was under the OhioCannabis.com logo, but they just seem to smush together on the same Row for some reason and then bleed off the screen?

How do I make them first the mobile screen, stacked on top of each other like I set them to do in my Section?

[ruenel]

Hello John,

You use the Navigation Dropdown element mainly for navigation purposes that usually displays the menu navigation as a dropdown. If you want to add more items in the dropdown like a navigation + images + rows or columns, it is recommended that you use the Dropdown element instead.

One thing also to remember is that the Dropdown Navigation or the Dropdown element is best to use for medium and large screens. If you want to center the dropdown, please check out these old threads:

• Mega menu dropdown not centering
• Inline menu element dropdown position

Hope this helps.

[ohiocannabis]

Ok great thank you! I will read through those and fix my menu. I just need a simple navigation menu, so I think I’ll keep with the Navigation Dropdown for now.

What about my 2 images not centering properly in my header even though I have the Rows & Columns as well as the Break Points set correctly?

I’ve added an updated password to this secure note.

Thanks!

[ruenel]

Hello John,

You need to do the following:
1.) In your Bar element settings, set the Height to auto.

2.) In your Container settings, set a Maximum Width of 100%

3.) You also need to change the Flex direction to “Column” in smaller screens. You can click the the word “Direction” to launch the Responsive Element styling.

You can check out my video demonstration here:

Center the images in your header

Hope this helps.

[ohiocannabis]

Ok thanks for that info & video!

I made all of the suggested edits and things are better, but they’re still not populating correctly for some reason.

I have also purged my Cache in Kinsta and still seeing these issues.

So not only is the images not populating in a Column format, for some reason the Navigation Dropdown Menu isn’t showing on the main home screen.

But yet when you click on a product, the Navigation Dropdown Menu appears.

Why isn’t the Navigation Dropdown Menu appearing on the main page?

The Header images on a Product page seem to populate in the correct Column format, but are still bleeding out of the Header itself.

What do I need to do to contain it in the Header and have it populate correctly?

Also, in Mobile Landscape mode, the Navigation Dropdown Menu is populating really weird, like a combination of an Inline Dropdown or something.

How do I fix that?

You are free to save whatever changes you make in my WP Dashboard/Cornerstone. I trust your edits.

Thank you!

[ruenel]

Hello John,

I think you are having some caching issues because on my test I am seeing this:

Header Rows Collapses Correctly on my test

Please log in to your Cloudflare account and purge your site cache. Clear your browser cache too or use private browsing mode with another browser like Brave, Chrome, Firefox or MS Edge and then test your site again.

Kindly let us know how it goes.

[ohiocannabis]

Hmm weird, things seem to be populating correctly today

I have Kinsta, which has cloudflare integrated. I have found the Clear Cache within Kinstas Dashboard under Sites

Is there an additional location I need to purge within my Kinsta dashboard for cloudflare?

[ohiocannabis]

Kinsta support has helped me located the Clear CDN Cache, so I think I am gtg for now, thanks!

If I have any more Header issues, I’ll post back here.

Thanks again!

[tristup]

Hi John,

Glad to know that it is resolved now.

Thanks