Header bar over main image

75 Posts

Krav posted this 23 April 2016

Hi,
Could you help with 2 hopefully simple questions please?

I have a main image at the start of my website and a Header Bar (Fixed on Scroll) which houses a logo, contact info and Menu icon. At the moment, the main image butts right up to the bottom of the Header Bar. What I'm looking for is that the image sits underneath the Header Bar at the start, enabling me to make the Header Bar background 25% transparent, so when I scroll you can see the main image move underneath.

How can I do this? (Is it to do with the Z-index?)

Also, the Menu icon: what I would like is for the menu to be vertical when hovered over or clicked. So it is like a vertical side bar perhaps! But naturally when at tablet or phone size it is not so long and more in keeping with the reduced format.

Any suggestion for this one are welcome?

I've included the .zip so that you can see the image/header bar

Thanks in advance

Kind regards
Krav

Hi, Could you help with 2 hopefully simple questions please? I have a main image at the start of my website and a Header Bar (Fixed on Scroll) which houses a logo, contact info and Menu icon. At the moment, the main image butts right up to the bottom of the Header Bar. What I'm looking for is that the image sits underneath the Header Bar at the start, enabling me to make the Header Bar background 25% transparent, so when I scroll you can see the main image move underneath. How can I do this? (Is it to do with the Z-index?) Also, the Menu icon: what I would like is for the menu to be vertical when hovered over or clicked. So it is like a vertical side bar perhaps! But naturally when at tablet or phone size it is not so long and more in keeping with the reduced format. Any suggestion for this one are welcome? I've included the .zip so that you can see the image/header bar !Image-and-Header-bar.jpg! Thanks in advance Kind regards Krav

header fix-on-scroll position

Image-and-Header-bar.jpg

Untitledzz.zip

Vote to pay developers attention to this features or issue.

5 Comments

Order By: Standard | Newest

Support Team posted this 25 April 2016

Hi,

Open the options for the section that contains the menu and logo and set the position to absolute and the z-index to 5.
As for the menu, there is no such direct option, but you can try to set it to go to responsive mode from the desktop view, so it will drop down.

Sincerely,
Hella

Hi, Open the options for the section that contains the menu and logo and set the position to absolute and the z-index to 5. As for the menu, there is no such direct option, but you can try to set it to go to responsive mode from the desktop view, so it will drop down. Sincerely, Hella

75 Posts

Krav posted this 25 April 2016

Hi hella,
Thanks for the reply, I'll try what you have kindly suggested.

Regards
Krav.

Hi hella, Thanks for the reply, I'll try what you have kindly suggested. Regards Krav.

Support Team posted this 26 April 2016

You are welcome. Please let us know if you need our further help.

Sincerely,
Hella

You are welcome. Please let us know if you need our further help. Sincerely, Hella

10 Posts

chrisb posted this 18 May 2016

I have the same issue. How can I make the Header transparent so that the background image is visible continuously?

On Krav's first point - if it hasn't been resolved - it's possible to create a vertical drop down menu in Wordpress by inserting a Secondary widget section and adding a custom menu in Wordpress itself.

Cheers.

Chris

I have the same issue. How can I make the Header transparent so that the background image is visible continuously? On Krav's first point - if it hasn't been resolved - it's possible to create a vertical drop down menu in Wordpress by inserting a Secondary widget section and adding a custom menu in Wordpress itself. Cheers. Chris

Support Team posted this 18 May 2016

Hi,

What issue with the transparency do you have? You can attach your theme for investigation.
As for the menu, I have suggested to make the menu go to responsive in the desktop view as well. Or yes, you can add the custom widget area and use your own menu.

Sincerely,
Hella

Hi, What issue with the transparency do you have? You can attach your theme for investigation. As for the menu, I have suggested to make the menu go to responsive in the desktop view as well. Or yes, you can add the custom widget area and use your own menu. Sincerely, Hella

You must log in or register to leave comments