How to add a section at the beginning of all pages only in mobile. Left widget?

Support
#1

Hi. We want to test what happens if we add a section at the beginning of all pages with a text similar to the following one:

Do you have questions? Enter you phone here and we’ll call you to answer them! ______

We thought setting a left widget would do it for us, but it seems PRO doesn’t allow it.

So anyway to add a section only in mobile at the beginning?

Note 1: I’ll add that text on the right widget anyway, but we are afraid it will be too hidden in the mobile version. That’s why we thing in an alternative way to show it at the beginning.

Note 2: it should be a way to hide that section in some specific pages, like the landing page.

Note 3. The site is translated with WPML, so the solution should work for two languages / translations :slight_smile:

PS: Our website is http://www.edinventa.com

Thank you!! :slight_smile:

Carlos

#2

Hello @educainventions,

Thanks for asking. :slight_smile:

If you want to display text only in mobile view then you can add a text element. Next, under Customize > Hide During Breakpoint you can hide the element on desktop and let it display only on mobile.

For information on hide during breakout please take a look at following article:

Thanks.

#3

Thank you. Good previous job! :wink:

#4

You’re most welcome!

#5

Hi. I’m trying to do the “header way”, but I’m not being able to configure it properly: the second head bar is above the first one. Why? Both are set in relative position, so I don’t understand why that’s happening our how to fix it.

I’m attaching a screenshot of the following url: https://www.edinventa.com/pro/#/headers/3719/inspector

Thanks again

Carlos

#6

The screenshot failed to upload. Second attempt:

#7

Hello There,

Thanks for updating this thread. Please check your bar heights and z-indexes so that the bar will not overlap with each other. The second bar must have a lower z-index than the first one. The first bar on the other hand must have enough height to display its contents.

Hope this helps.

#8

Sorry, it doesn’t seem to solve the issue. After changing z-index, the first bar is above the second one. The result is that first bar covers the second one.

We want second bar is after first bar. I though it can be achieved with relative position, but it seems we were wrong.

This is how it looks with z-index and height changed:

Thanks

Carlos

#9

Hi There,

Can you please post your login details so that we can have a look.
Just post in a secure note.

Thanks

#10

see secure note

#11

Hi @educainventions,

That’s correct, the top bar should cover the second bar since it’s the main navigation. The problem is the form, it’s larger than the height of the second bar, hence, it overflows to the restricted height.

Based on the inspector, the form height is 172, hence, applying the 172 to your second bar’s height should fix it.

Thanks!

#12

Thanks, it works for desktop screen size perfectly, but not for mobile size.

Any idea about how could I fix it for any screen size?

Thanks

Carlos

#13

Hi @educainventions,

The 172 is just an estimate, you can increase it for smaller devices. The form increases the height too as the content is being squeezed and there is no way we could check its height for every device it’s being viewed.

How about designing the form with minimum height so it will be the same regardless of device? Then use that height in your header bar.

Thanks!

#14

I want to double check, because I expected it would be very easy for you guys:

Is it impossible (or quite hard) to add a bar right next the previous one because the first one is sticky and the second one is not? Is it?

Thanks for confirmation

Carlos

#15

Hi Carlos,

I managed to get a sticky header bar between two other bars as you can see in this video:

So, I believe this is doable, is that what you mean?

Thanks.

#16

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.