[Resolved] elements header messes with page formatting

[Satish]

Hi,

i have enabled two element headers on my website. one is a menu which is shown just below my logo and mobile menu hamburger button (right now hidden on desktop) and second is “inner page headers” which shows the page title on top of the content.

Now i have three questions
1. on my front page on mobile the “menu header” element is visible as there is no “inner page header” on the front page. But as soon as i enter a page, the inner page header takes over and the menu header element becomes invisible. I would like both of them to show. menu header first and inner page header second. how can i achieve that

2. as soon as any of the header element is enabled, the formatting of my sider main navigation gets disturbed. i want it to be like this
i want it to be like this

whereas it turns to this as soon as a header element is enabled (whether menu header or inner page header)
it turns to this

3. the menu header element i have added is actually a code from ecwid. the code is for horizontal menu which turns into a slide out menu on mobile. i have enabled it only on mobile. now the name of the menu of mobile is “Menu” and i can’t find where i can change it. second the formatting of the menu is different from rest of the website. is it possible for me to change the formatting inside the website maybe assign it to a class so that it inherits the style of website? third i want the slide out to be from right side instead of left side. how can i change that since it is a code given by third party. the code is as follows
<div id="my-categories-"></div> <div> <script type="text/javascript" src="https://app.ecwid.com/script.js?&data_platform=code" charset="utf-8"></script> <script type="text/javascript"> xCategoriesV2("id=my-categories-"); </script> </div>

[Satish]

i added two images in the message above by using tag but they are not visible in the message. so i also added external links

[Tom]

Hi there,

1. There can only be one Header Element per-page. It isn’t possible to have two on the same page. Perhaps the menu should be added as a Hook Element?: https://docs.generatepress.com/article/hooks-element-overview/

2. I’m not sure I’m seeing this. Those look like two different pages – can you explain the issue a bit more?

3. I’m not seeing the word “Menu” anywhere on mobile – did you change this? Anything that’s coming from a third-party like that will likely be very hard to change (at least on the HTML side of things).

[Satish]

Hi Tom,

1. I tried using hooks instead of inner page headers. But I can’t use page hero and template tags while using hooks. Or can I? If its possible please let me know.

2. Here is the screenshot of the “Contact Us” page on my website before and after enabling header element. Please look at the formatting of the left sider main navigation. It looks like some padding issues around the sider once the header element is enabled.

This is how I want it

This is how it looks

3. “Menu” is visible on my mobile. Attached screenshot

here

[Tom]

1. That’s correct, it isn’t possible to use the Header Element options within Hooks. However, Header Elements are limited to one per page.

Perhaps you can add the content from your other Header Element into the inner page Header Element?

2. I’m seeing the issue everywhere at the moment. Is there a page where I can see it the way it’s supposed to be?

3. Ah, that text is coming from the script you’re using. You’ll need to ask their support team if it’s possible to change the “Menu” text.

[Satish]

Hi

I have removed the menu header element for the time being. Now my home page side primary navigation has the formatting that i am looking for. Inner pages still have the disturbed formatting

[Tom]

In the Element you disabled, make sure the navigation location is set to “Default” in the Site Header tab. It looks like it’s been changed to something else.

[Satish]

solution works well. Thanks

[Tom]

You’re welcome 🙂

[Author]

Posts