Hi Ismael,

Thanks for the link. I’ll investigate more this option cause I was not able to get it so far.

A last path of investigation for this topic: is there a way to specify a submenu backgroud image?
For example, if I take the 2nd item of my navigation menu (.av-main-nav li.page_item.page-item-33), is there a way to apply a backgroud image on its ul.children as a whole? … Or even individually to each of its subsequent menu items (in this case li.page_item.page-item-190 and li.page_item.page-item-210)?

Thanks once more for your help,

Steph.

Thanks a lot Yigit, both for the result and your quick reply!
Do you know a way to have this divider line displayed only on a portion of the bottom border (not throughout the full submenu width), as shown on the image I posted above?

Thanks in advance and wish you a great day,

Steph.

Hi Ismael!

Thanks a lot for fixing the problem.
I now understand where I was wrong.

The topic can now be closed.

Wish you a nice day.
Steph.

Thank you for the trick to get thepage ID Ismael!
I now have exactly the same code as you posted on Sept. 10 (with pages ID being 59 and 31 respectively).
I doesn’t help to make the code work though …

I’ll keep on trying variants to see if I can make it work.
If you see another way to achieve the same goal with a different code, please let me know!

Thanks a lot,
Steph.

Hi Ismael!

Thanks a lot for your answer / help.
Your code lines seem quite logical to me but for some reasons, it still does not work.
Here is a screen capture of Header.php file with lines highlighted in yellow: http://i.imgur.com/ebCQz1P.jpg
I assume these lines are correctly located in the Header.php file (as per you first reply to this topic).
With is_page(), I’m applying this image on all pages of my site.
I don’t know how to get the page ID number of my static pages (I only have their permalink names).

The screen capture of code lines of my Quick CSS are as highlighted in: http://i.imgur.com/Ret07ay.jpg

Just in case it is significant, the image IMET1 I’m targerting in http://idetox.voyage/wp-content/uploads/2015/09/IMET1.jpg
is 18Kb.

Hope the screen captures might help you find out what’s wrong.
Regards,
Steph.

Hi Ismael,

Your explanation is very clear but I can’t get it to work!
Below is a summary of what I’ve done following your advice (to get just 1 image for all pages):

a.) In header.php, I’ve added the follwing: <div class=”custom-background-image container_wrap”></div>

b.) Then in Enfold>General settings I’ve added the following Quick CSS code line:
.custom-background-image { background-image: url(http://idetox.voyage/wp-content/uploads/2015/09/IMET1.jpg); }

IMET1.jpg is the file name of my image in my library.
I’ve tried also to write background-image: url(IMET1.jpg) and then background-image: url(“IMET1.jpg”)
But that too doesn’t work.

I must be missing a very simple stuff to get it correct and working but your help is very much appreciated!

Regards,
Steph.

Hi Ismael,

Thanks for your reply.
I’ve added your suggested line codes in Header.php file

What would be the Quick CSS code lines I should add to select and apply the image in this container on top of Header?
And is there a way to apply a specific image in this container for each of my parent pages?

Thnaks in advance!

Regards,
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.

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.

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.

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,

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.

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 Rikard,
Now you should be able to access the page.
Sorry, I forgot to remove the maintenance mode.
Thanks,
Steph.

Hi Rikard,

Thanks for your reply.
Here is the link :

Thanks for your advice.
Steph.