Header and Page Title Issues

Support
#1

I’m not sure why, but my header is covering up some of my page and sidebar in my interior pages. This is not a problem on the home pages. What do I need to do to have space between the bottom of the header and the page title/sidebar area? Example: https://kloosterfamilydentistrycom.stage.site/dental-services/

Also, I’m trying to create a banner title area under the navigation instead of the one that currently exists within the text area. A header like on this X example: http://demo.theme.co/gym/facilities/

I would like this on all pages throughout the site other than the home page. I’m not sure how to go about doing this. I would like it to be done dynamically either through each page or as an addiiton to the header below the navigation. I’m not sure which way to go about it.

#2

I’m not sure if you can see the staging site so here is a screenshot of the header overlapping the page.

#3

You can also see where the current page title is in the above screenshot. I would instead like to use a page title like the example with the page title centered with a background image above the main page area.

#4

Hi @vaughanmatt,

I tried to check the page you are working on but your site requires login access to be viewed:

However, based on the screenshot you have posted, it seems that you have set the Initial Position of the bar to absolute.

Try editing the bar settings then set the Initial Position to relative:

As for the page title, please access the Preference area of the builders then enable the Dynamic Content.

Then add a Headline or Text element then you should see the option for the Dynamic Content and you can set Post Title to it.

Hope this helps.

#5

So this did fix the header spacing issue - thank you. But I’ve changed the setting to Dynamic as you mention above and i am still not seeing the little icon to add a title as shown in your screenshot when I add a text or title module. Can you please help further.

#6

Hello Matt,

You will have to create another bar first. Insert a container and a text element.
And then you need to click “Edit Text”.

And you will find the little icon in the lower right of the screen.

#7

Ok. So I have added it now and see the little icon and have attempted to add a title bar. I’m still unsure of how to make it look just like the example I shared above in the X Theme Facilities template. I don’t see how to adjust the size of the bar, center the appropriately sized title, etc. Also, when I add it in the header as a 3rd bar. It completely covers up my navigation. The header I have attempted this on is called “Holly Springs” I want to create this correctly so I can use it on all my interior pages.

#8

Hello Matt,

I have edited your header. I change the position of the bar to Absolute and changed the font format of the headline.

Please check it now.

#9

Hi - I can see what you’ve done, but it looks nothing like the example from here that I am trying to mimic. How am I able to create somethign exactly like this? http://demo.theme.co/gym/facilities/

#10

Hi Matt,

The difference I am seeing in terms of structure is the page title. Do you intend to use sidebar for that page?
If not, please select NO CONTAINER PAGE template.

Current page title is part of the default template you are using. If you change it to NO CONTAINER, it doesn’t have a page title. You need to add another section on your page and then add it. In case you want this setting to be sitewide, you can add another bar on your current header, then add HEADLINE ELEMENT and the use DYNAMIC content to pull page title automatically.

In case you still want the sidebar, please choose a page template with sidebar. Then add the page title directly on the header to make it fullwidth using HEADER and then Dynamic content.

Hope this helps.

#11

A better page example is below. I want to use the “Interior Pages” header on all pages on the site other than in 3 locations (including the home page). I want the interior pages each to have the page title underneath the navigation like the Facilities example I shared. The screenshot shows where I would like it go. I do intend to use a sidebar for all these interior pages.

#12

This is the actual page I am showing as the example: https://kloosterfamilydentistrycom.stage.site/about/

#13

Hi Matt,

Thank you for the clarification.
1.) Edit this Interior Pages header
2.) Add another bar below the navigation. Set INITIAL POSITION to relative under Setup tab
3.) Add 1 container
4.) Add headline element. Under Setup Tab > Text > Click Edit Text > On the popup on Lower right part click the icon : choose TITLE from Dynamic options.
5.) Inspect the bar, set your desired background and height. Then on FLEXBOX tab > Set Align Vertical to CENTER.

Hope this helps.

#14

Hi Lely -

Almost there! I don’t see where I can change the width of the header and I have selected FLEXBOX tab > Set Align Vertical to CENTER from what I can tell and the text is still not centered. After that I should be all set!

#15

Hey Matt,

In your Bar > Container settings, please make sure that there is no maximum width, horizontal should align to center and the self flex should be “Fill Space” or “Fill Space Equally”.

Hope this helps.

#16

Ok. That worked great but now I am seeing another issue. The dropdown navigation is going behind the Page Title bar. How do I make sure it is on top of that bar?

Also, on one header the entire bar is highlighted when hovered over and on the other it is just the word, I would like the entire bar to be highlighted and am having a difficult time figuring out where the difference is.

#17

#18

#19

The above images are comparing the Interiors Header and Holly Springs header if that is helpful.

#20

Hi Matt,

Please inspect your 3rd bar (banner) and adjust its z-index, making it less-than than the z-index of Bar 2 (menu bar), try 9998.

More details about z-index

Hope it helps,
Cheers!