Slider under Menu - Issues on Chrome & Firefox

richard25
165 Posts
richard25 posted this 08 June 2017

Hi

On the website under construction below

http://www.johningham.co.uk/index.php

I have placed the slider under the menu using a slider minus top margin. I then set the menu, logo and social media icons with a z index of 5 and the slider with a z index of 0 so they were on top of the slider.

However on Chrome the transparent menu background will not show and in Firefox the slider is not showing behind the other items at all.

Have I actually done this using the correct procedure?

Maybe there is a better way of getting this effect?

Maybe Ive done it the right way but it just needs tweaking?

I have attached a screenshot of how it looks in Themler

Cheers

Hi On the website under construction below http://www.johningham.co.uk/index.php I have placed the slider under the menu using a slider minus top margin. I then set the menu, logo and social media icons with a z index of 5 and the slider with a z index of 0 so they were on top of the slider. However on Chrome the transparent menu background will not show and in Firefox the slider is not showing behind the other items at all. Have I actually done this using the correct procedure? Maybe there is a better way of getting this effect? Maybe Ive done it the right way but it just needs tweaking? I have attached a screenshot of how it looks in Themler Cheers

Last edited 08 June 2017 by richard25

slider margin firefox z-index negative-margin
SliderBehindItemsIssue-01.png
Vote to pay developers attention to this features or issue.
8 Comments
Order By: Standard | Newest
DouzanStudio
138 Posts
DouzanStudio posted this 08 June 2017

You need to set the position to relative beside the high z-index value for the Horizotal menu.
I did it in chrome inspector and it's showed up!

position.jpg

You need to set the position to relative beside the high z-index value for the Horizotal menu. I did it in chrome inspector and it's showed up! !position.jpg!

Last edited 08 June 2017 by DouzanStudio

position.jpg
richard25
165 Posts
richard25 posted this 09 June 2017

Many thanks that has sorted Chrome

Any clues on why Firefox and Edge are not displaying the background?

Cheers

Many thanks that has sorted Chrome Any clues on why Firefox and Edge are not displaying the background? Cheers

Last edited 09 June 2017 by richard25

Support Team
Support Team posted this 09 June 2017

Hi,

FF and IE do have issues rendering the negative margin values. Please consider using the top value instead of the margin-top for your slider with the negative value.

Sincerely,
Hella

Hi, FF and IE do have issues rendering the negative margin values. Please consider using the top value instead of the margin-top for your slider with the negative value. Sincerely, Hella
richard25
165 Posts
richard25 posted this 09 June 2017

Hi

Ive done that thanks and it has solved the issue. However how do I address the gap under the slider?

Cheers

Hi Ive done that thanks and it has solved the issue. However how do I address the gap under the slider? Cheers
richard25
165 Posts
richard25 posted this 09 June 2017

Chrome inspector is saying below will fix it. Is this correct and if so which setting is it in Themler?

stretchtobottom-1 {
margin-top: -182px;
}

Cheers

Chrome inspector is saying below will fix it. Is this correct and if so which setting is it in Themler? stretchtobottom-1 { margin-top: -182px; } Cheers
Support Team
Support Team posted this 09 June 2017

Hi,

Set the same negative top value for the content area.

Sincerely,
Hella

Hi, Set the same negative top value for the content area. Sincerely, Hella
richard25
165 Posts
richard25 posted this 09 June 2017

Hi

Getting there. Ive done that and also had to move footer up as below

Footer(All Templates) /Settings arrow icon
Select Arrange Tab
POSITION Top -182px

But now have gap under footer. How do I address that please?

Cheers

Hi Getting there. Ive done that and also had to move footer up as below Footer(All Templates) /Settings arrow icon Select Arrange Tab POSITION Top -182px But now have gap under footer. How do I address that please? Cheers
Support Team
Support Team posted this 13 June 2017

Hi,

I don't understand. You added Footer negative margin to move it top and now you want to remove the space below the footer created by this negative margin.

Themler Header has the option called "Overlap neat section". It creates the effect you want on the Home page. Did you try it?

Thank you,
Olivia

Hi, I don't understand. You added Footer negative margin to move it top and now you want to remove the space below the footer created by this negative margin. Themler Header has the option called "Overlap neat section". It creates the effect you want on the Home page. Did you try it? Thank you, Olivia
You must log in or register to leave comments