Create a gap between Header and main content that shows Body image backgroud

Hi Elliot!

Thanks for your quick reply.
I tried to elaborate the deisgn I would like to get in the following image :

Hope this image is clear enough!

Thanks in advance,
Steph.

Hi Rikard,

Thanks for your reply.
Here is the link :

Thanks for your advice.
Steph.

Hi Guys,

I can’t imagine my request being too difficult for you to answer.
Please let me know if the image posted on August 26th is not clear enough.
Thanks again for your help,

Steph.

Hi Ismael!

Thanks for your reply.
It indeed creates the gap under the header when the header is not sticky.

I have a fullscreen slider on my home page and it also creates a gap here, showing the backgroud image.
What would be your suggestion to have this gap on all my pages BUT my home page with this fullscreen slider?

Second question : in the Header configuration of having the Logo above and menu below, how can I have a transparent backgroud where my logo image sits (so that it shows the Body backgroud image below) and a non transparent background color for the menu?

Thanks in advance,
Steph.

Hi Andy,

Thanks for the code to avoid the margin on home page. It works just perfect!

As for the second question: my logo is already in a transparent PNG format as it shows on my home page http://idetox.voyage/
(Actually both the logo and the menu below it are transparent and set as such in “Header visibility and transparency” of the page configuration).

I would like to have the same transparency of the area where the logo sits (but not for the menu strip just below it) on all the other pages.
Right now for example, if you look at the sample page http://idetox.voyage/testmenu1/ You’ll see that both the logo area backgroud and the menu backgroud below it are grey. I would like the grey background color to stay but the background of the logo area above to be transparent (not grey) so that is shows the body backgroud image below. At leat if possible …

I hope my description is clear enough …

Thanks in advance for your guidance,

Steph.

Andy, please let me know if the following mockup is clear enough: http://i.imgur.com/fKt2UNP.jpg

Thanks!

Steph.

Thanks for your quick reply Andy, your code worked very well!
I played a little bit with the values to adjust the different heights and postions to fit well with current design/data and reached the following:

div#header_main {
height: 50px;
margin-top: 70px;
}
strong.logo {
top: -60px;
}
nav.main_menu {
top: -43px;
}

The only thing I can’t adjust with these values is the height of the gap between the header menu and the main content area.
There seems to be a constant value of someting like 20px between the border of the menu and the Main content area border.

View post on imgur.com

If I try to go below by increasing the height (of the div#header_main), it squeezes my main content area on the right side as show with this image http://i.imgur.com/L4XMSGm.jpg
If I also increase the height of the header of the same amount (in Enfold > Header), then it does not happen because the gap value is kept the same.

Thanks in advance to let me know if I did miss something to adjust this gap.

Steph.

Hi Andy,

With this one I can increase the gap between the header menu and the main content area.
I now see that my formulation yesterday was not clear enough because I actually would like the opposite: decrease this gap (if possible)

I then tried decreasing the pixel value of margin-bottom (in div#header-main) and I can’t go below 36px.
If I go below 36 px (with all other values kept the same), I get the same squeezing as shwon in http://i.imgur.com/L4XMSGm.jpg
With 36px, the gap height is the same as if I remove the code line margin-bottom: 36px

All my apologies for not being explicit enough on my intent.
Thanks in advance for your advice,

Steph.

Andy,

To compare the 2 situations:

– The page with the minimum gap between header menu and main content area (not “squeezed”) is as shown at https://idetox.voyage/testmenu1/

– The page with the main content area being “sqeezed” on the right side of my boxed layout is as shown in image http://i.imgur.com/L4XMSGm.jpg
On this image, we can see that there is no longer a gap between the header menu and the main content (squeezed) area.

The mockup I would like to achieve is as shown on http://i.imgur.com/ALh99gj.jpg

Thanks in advance!
Steph.

Andy,

I had already tried this before and it did not work (leading to this squeezed main content area on the right side of my boxed layout)
I’ve tried it again but on another browser than IE and it works perfectly on Chrome, Opera!
Thanks a lot for your patience.

If you have any idea on why it does this issue on IE (and Edge browser), and how this can be avoided, please let me know.
You can see the difference yourself between Chrome and IE at: https://idetox.voyage/testmenu1/

Thanks again,

Steph.

You’re right, that seems a bit surprising …
I did clean up the cache and several hard refresh on IE and didi not help!
Below is all the Quick CSS code I have for my site.
Let me know if you see any coding lines appart from yours that might trigger this weird stuff with IE and Edge browser:

.home #main {
margin-top: 0px;
margin-bottom: 0px;
}

div#header_main {
height: 50px;
margin-top: 70px;
margin-bottom: 10px;
}
strong.logo {
top: -60px;
}
nav.main_menu {
top: -43px;
}

#top .av_header_glassy.av_header_transparency #header_main {
border-color: rgba(255,0,255,0.25);
background-color: rgba(0,0,0,0.5);
border-radius: 5px;
}

Thanks you!
Steph.

Hi Andy,

I’m using IE 11.
Thanks for your link, I’ll investigate it to see how I can make the design comply with this browser.

I greatly appreciate all the help/support you provided me to move forward with my design.
I think we can now close this topic.
Let me know how to proceed I case it should be done from my side.

Thanks again!

Steph.