Navigation Modal not showing properly

[89Flay]

Hi there, I was trying to put a modal menu on top right corner of my page (so external from the column) and searching in the forum I found this code that worked good:

   $el {
  position: fixed;
  top: 50px;
  right: 0px;
}

Unfortunately the problem is that is not showing any menu, see pic here attached.
What is the problem here? I followed the themeco.docs here: https://theme.co/docs/navigation-modal but it seems not working.

Please let me know.
Kind Regards
Flavio

[89Flay]

I’ve got another question regarding that navigation modal. Currently I’ve it in a section and when I scroll the page through the second section that button disappear underneath it. How is possibile to make it always above evertyhing?

Thanks again.
Kind Regards,
Flavio

[tristup]

Hi Flavio,
Thanks for reaching out.

Sometimes it’s not possible to check the issue only through the screenshot(s). We didn’t find the site URL at your user dashboard to examine. Can you please share your site URL and credential to check and guide you.

Please provide the following site details in a secure note.

– Link to your WordPress site
– WordPress Admin username / password

To create a secure note, click the key icon underneath any of your posts.

Thanks

[89Flay]

Hi @tristup, thanks for reaching me out.
I’ve put the details on the previous post.

Thank you.

[tristup]

Hi Flavio,

I have tried to create, what you are trying to do without any custom CSS code. Please find the steps I followed during this:

1. Created a Page with the same page template

2. Added background image to the section.

3. Set the row Global Container off to make the row full width.

4. Added a single column with Text Align value right.

5. Added right padding 25px to the column

6. Added Navigation Modal to the column.

You can see the output in the screenshot as well as the page: http://www.flaviopellegrini.it/test-by-themeco/
I would suggest you follow the above steps or replicate what settings have been made into the test page.

Hope it helps.
Thanks

[89Flay]

Thanks @tristup, I tried with your settings and seems working for the modal menu being displayed.
But what I’m trying to achieve though is also:

• the menu toggle be always visible in top right corner when you scroll down the page. I did that (as you see on the page http://www.flaviopellegrini.it/folio/waterdrop/) using the code $el { position: fixed; top: 50px; right: 0px; }, but it disappear behind the section below once reached.
• to have the main top photo (the one that I put under “Background Lower Layer”) with the same heigh of the page , and to do that I added a “Padding Top&Bottom” set with “45vh”.

Any Idea on how to do that?

I tried to replicate what you did on the page http://www.flaviopellegrini.it/folio/133-days-in-wroclaw/ , but if I put he code $el { position: fixed; top: 50px; right: 0px; } on the modal menu it seems crashing it and not letting display correctly the menu.

Please let me know.
Thank you.

[ruenel]

Hello @89Flay,

Your custom element CSS is almost correct. It’s just that it created a conflict to the modal popup. Since you only want to display the toggle icon to the upper right corner while the modal popup should display in the same location, you will have to update your CSS and include the toggle icon class. Therefore, your final code will be:

$el.x-anchor-toggle {
  position: fixed;
  top: 50px;
  right: 0px;
}

Be advised that you will be the one to maintain the code. Be sure to check any custom CSS whenever there are theme and plugin updates. The code above serves as an example to get your modifications started.

Kindly check your page now.

[89Flay]

Hello @ruenel,

thank you for your help, that worked!

Do you know how to fix the toggle going behind the section below? As I mentioned before I would like it staying always visible when you scroll the page.

Please see the picture below.

Thank you in advance.
Kind Regards.

[tristup]

Hi Flavio,

The z-index attribute of the above section needs to be set with a higher value of the below section z-index value. But that will make the top section above the lower one and the background will be covered.
Header customization is the only way to achieve what you want. Regretfully X theme does not have that option right now.
You can get more information on how header can be used here: https://theme.co/docs/header

To get customizable headers, I would suggest you to upgrade into Pro theme, please go through the process here: https://theme.co/docs/converting-from-x-to-pro

Thanks

[89Flay]

Hi @tristup,

Thanks for reaching me out again.

Oh gosh…well that’s unfortunate…I don’t want to upgrade to Pro right now.
Is there any other way to bypass that?

[89Flay]

Well…I think I’ve made it!

Looking at the behavior of the modal menu disappearing behind the section below… I thought that “Sections” are like some sort of layers that stand on top of each other…for that reason it was disappearing behind it…therefore I thought to bypass that behaviour by moving the “Navigation Modal” to the last “section” of the page…and voilà…that fixed the problem!

I hope that can help someone else with the same problem.

Kind Regards.
Flavio

[marc_a]

Hi Flavio,

We are glad that you are able to fix your issue. If you have any other concerns, feel free to reach us.

Thank you.