Editing header that comes with the Gym site

[VaporDave]

Hi, I would love to know how to edit the header that comes with the Gym site. It doesn’t show up as a header anywhere that I can find to edit. Thanks!

[VaporDave]

I see that the header that comes with the pre-built Gym site is called an Original Header. However, when I went to the Pro Header builder to try to re-create the Gym header from scratch, I discovered there’s an extreme height limitation to the header bar that doesn’t allow the re-creation of the Original Header in the Gym site. How do I get around this height limitation (max height is 7.5 EM) and/or how do I create a header where the logo is centered on top and the nav links are centered beneath the logo, the way it is in the Gym header? Thanks!

[tristup]

Hi @VaporDave,

Thanks for reaching out.

The easiest way to get a similar header like the original one, just click into the copy option from header list and modify the copied header according to your need.

While building from scratch you can easily change the default value of the header bar by editing the input box specified in the screenshot.

Hope it helps.

Thanks

[VaporDave]

Hi, thanks. Unfortunately the Original Header provided in the Gym theme doesn’t show up in my header list, and therefore cannot be copied. Also, I tried editing the input box for the value of the header, and there are still limitations on that, with the max value for EM being 7.5 and the max value for pixels being 150. The header in the Gym theme is much taller than 150 pixels in height, how is that done given the limitations described above? Thanks.

[VaporDave]

I can’t remember how I got to this point, it wasn’t through the Header options, see attached. Somehow I was able to get the logo centered on top and the nav links below, all at a height much greater than allowed by any of the input options in the Pro Header builder. While this works for now it would be nice to be able to manually modify the Gym theme header (or a copy of it, although since it doesn’t show up in my list of headers that’s not an option).

[VaporDave]

Here’s what my list of headers looks like

[ruenel]

Hello David,

Please be advised that the Gym demo site is just using the default header. This is why it is not appearing in the Pro > Header list. You can tweak the default header by going to Pro > Theme Options > Header > Navbar.

I have checked your site and it appears that you are using the default header. You have currently tweak it and have set the navbar and logo image to display as “stacked”. You can check this setting in Pro > Theme Options > Header > Logo and Navigation. The Gym demo site is using “Inline” by the way.

If you want to customize the default Gym header, it is best that you recreate it in Pro > Header so that you can add any elements from text, icons, menu, etc.

Hope this explains it briefly.

[VaporDave]

Hi, thanks. So, I can’t see or edit the default header in the Pro header editor? I was hoping to be able to load the default header so I could reverse engineer it.

[ruenel]

Hello David,

You cannot edit nor load the default header in the Pro > Header builder. You will have to recreate it in the builder if you want to add or remove something.

Hope this helps.

[VaporDave]

Hi, thanks, that’s unfortunate. If I knew how to re-create it in the builder I wouldn’t need to reverse engineer it, which is a much more intuitive learning process for me. What I really need to know is how to make the nav links turn into the hamburger menu at smaller viewports, I know it’s probably simple but so far with a lot of trial and error I’m still not getting that to happen. Thanks, Dave.

[nabeel]

Hey Dave,

To add a hamburger menu in Pro please follow this thread Mobile Menu no toggle. To learn more about hide/show content based on screen size, please see https://theme.co/docs/hide-or-show-content-by-device-size

Hope this helps!