Start header behind menu

[mauiman]

Wondering if you can help me with the styling to place my main hero/header image behind main menu. So that it starts at same pixel. Then I will set the menu as partially transparent and see top part of image behind the menu.

[Harry]

Hi,

You can add custom css code

.home #jas-content { margin-top: -121px;}

@media only screen and (max-width: 736px) { .home #jas-content { margin-top: -71px;}}

Best regards

Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

[mauiman]

That’s what I needed. How can I control the opacity?  I have set ubermenu to .8 but can’t find the setting for that part of the header.

Really what I’m trying to do is raise my hero section/image up and s3et the max height to around 600. This way users wont need to scroll up to see the row of white icons across the bottom.

[Harry]

Hi Maumian,

1. You need change header style to header transparent add add custom css code.

.header__mid, .header-sticky .header__mid { background: rgba(255,255,255,0.8);}

and remove custom background for uber menu and remove margin-top of urber menu

https://monosnap.com/file/0jdx6yBlV8XsUdq1CNLS2ULb8gIUO9#

2. To make the banner height around 600px you should change setting uncheck full height row  https://monosnap.com/file/XoE55n6ivnBlQjCiXrzG05OOb7pJOV# and adjust padding in Design Option tab.

 

Best regards

Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

[mauiman]

I think I got it worked out but for reason I did something that moved the top header bar.

 

I tried editing   .home #jas-content { margin-top: -121px;} but it could not really fix.

[Harry]

Hi,

You can change to .home #jas-content { margin-top: -81px;} because you removed margin top of menu.

Regards

Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

[mauiman]

Thanks! Now I have this

 

.home #jas-content { margin-top: -81px;}

@media only screen and (max-width: 736px) { .home #jas-content { margin-top: -71px;}}

Do I need to edit:

@media only screen and (max-width: 736px) { .home #jas-content { margin-top: -71px;}}

??????

[Harry]

Hi,

I checked you site and need change a little

.home #jas-content { margin-top: -81px;}

@media only screen and (max-width: 800px) { .home #jas-content { margin-top: -92px;}}

Best regards

Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

[Author]

Posts