Header Menu Position on Different Browsers

Support
#1

Hello,

I have been using pro to create a header with a menu that sits on top of a slider revolution masthead. It works fine on chrome but when I check mozilla the menu appears out of place.

Can you help please?

Cheers,

Tom

#2

Hey @tombo80,

The issue is your use of negative margins.

Spacing behaves differently in Firefox. For your layout, I’d recommend you redesign it because that is tricky to achieve in combination with Slider Revolution and will not look good in different screens (see Secure Note)

Thanks.

#3

Hi Christian,

Thanks for your reply. I have to admit I was hoping for something a bit more workable. Are you saying there is no way this will work across browsers that aren’t chrome?

Thanks
Tom

#4

Hey Tom,

Yes, the issue is with negative margins which behaves differently in different browsers. With that layout, CSS positioning would also be tricky.

Thanks.

#5

Hi,

Ok, thanks I get you. I know you don’t supply support for revolution slider, but do you know of anyway to import the header menu into that? That way I could control it better.

Cheers

Tom

#6

Hey Tom,

We support Slider Revolution. However, there is no way to import Pro menu to your slide because they are separate systems.

This might help https://www.themepunch.com/faq/build-custom-menu/

Thanks.

#7

:frowning:

Yeah, thanks I saw that. It means you have to add and design every menu item, then update separately from the normal system…

I found a menu shortcode creator, but rev slider isn’t displaying anything, any ideas on that?

Cheers

Tom

#8

Update

I think I have it, using the menu shortcode generator and adding the css rev slider suggested here:

https://www.themepunch.com/revslider-doc/text-html-icons/

#9

Hi There,

If you still need help please let us know, I believe you could achieve that you are looking for building a menu in the header builder and setting the bar position to absolute.

Hope it helps!

1 Like
#10

Hi,

That would be the ideal solution. I would still like to explore that option please.

The problem I get is that set to absolute you can define a pixel amount which means that when resizing, it is out of sync with the rev slider. If I could define a % I think it would work…

EDIT: If you use a % and relative positioning it works fine in chrome, problem is mozilla doesn’t pick up the %…

Cheers

Tom

#11

Hi There,

Try using em instead of %

If that does not work, please apply the header to the slider in a test page and provide us so we can test.

Thanks

1 Like
#12

Hi,

I tried setting that in the global css but it doesn’t seem to work properly for me on resize. If you guys could have a go on the test page i created that would be awesome!

Cheers

Tom

#13

Hi there,

It will not work, the slider has it’s only scaling and calculation different from the menu. They will always appear out of sync, it’s best to create a static menu as layers within the slider, rather than placing the header menu on top of it. Revslider handles responsive positioning and text scaling.

Thanks!

#14

Hi,

That is a shame. They actually appear in sync on chrome as I can set the positioning using a % but of course that doesn’t work for Mozilla.

Thanks for your efforts.

Tom

#15

You are welcome Tom.

#16

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