That sounds good.
and I think I should do the same with the layout for desktop right? Hiding it for mobiles…
Which would be the css code in that case?

Thanks

• This reply was modified 8 years, 11 months ago by cipriana.

HI Rikard,
Thanks for the suggestion. Unfortunately, it moved the entire logo down 20px. I want the top of the logo to remain at 0px but to have the bottom of the logo overlapping the yellow line, which is the lower border of the header.
This is what the new css created:
http://hot26tt.com/wp-content/uploads/Screen-Shot-2017-04-24-at-6.45.06-AM.jpg
Any suggestions??

Hello Nikko,

ok, now work, but when you upload a image on Plesk uploads folder created same image with different dimensions. e.g. if i have upload a image (desktop-pc.jpg), on uploads folder i will see that has created many images with all dimensions like
desktop-pc.jpg, desktop-pc-845×321.jpg, desktop-pc-845×684.jpg, desktop-pc-80×80.jpg, desktop-pc-768×312.jpg, desktop-pc-710×375.jpg, desktop-pc-705×286.jpg, desktop-pc-495×400.jpg, desktop-pc-450×183.jpg, desktop-pc-450×450.jpg, desktop-pc-36×36.jpg and some others dimensions. Why? I uploaded only 1 image, why it has created 20 images with all dimensions?

I deactivated all plugins and it doesn’t change anything.

Thank you.

Hi Rikard
Thanks for your time. My CSS now looks like:

#header .av-main-nav .current-menu-item > a > .avia-menu-text {
border:1px solid rgba(55, 55, 55 ,1);
margin-left:5px;
padding:5px;
background-color: rgba(255, 255, 255, 0.75);
}
.main_menu ul:first-child > li > a { font-size: 17px; font-weight:normal; }
.av-main-nav ul li {
width: 140% !important;
}
.html_header_top .header_color .main_menu ul:first-child >li > ul {
border-color:transparent !important;
}

The border on the drop-down still persists, though.

It’s close, works great on mobile, just a bit off on browsers.

Thanks Mike,

I still need help on this.

I added this:

“Turn on Custom CSS Class field for all ALB Elements

December 3, 2013/in CSS Snippets, PHP Snippets /by Devin/Last Updated: April 9, 2014
Once enabled, the following function adds a new field to each of your Advanced Layout Builder element’s pop up menu.

First Add this line of PHP to your functions.php file so that the custom class field is enabled:”

add_theme_support('avia_template_builder_custom_css');

In the full width easy slider I added this @media only screen and (min-width: 990px) { .only-mobile { display: none !important; }}

In the video, I added this @media only screen and (max-width: 990px) { .only-desktop { display: none !important; }}

Nothing changed. Thanks for your help on this.

I have been wanting to have more mobile friendly images, etc. for a long time. This will be great once I learn how to do it!

Hey Sarah,

#top h1 a:hover { text-decoration:underline; }

was perfect! I wanted to do it to “R/GA” only.

Thanks for the quick help!
Chris

Hi there,

I’m having a more urgent problem. My mobile device is not displaying the top slider correctly. The slider and text are being overlapped by the boxes below it, so the buttons can’t be seen. Help please

Hi Rikard,

I found a CSS code snippet that has the hover effect that I want except text is not centered (https://tympanus.net/Development/HoverEffectIdeas/index.html). I’m struggling on which element(s) to apply the CSS styling to within the theme. In the caption or image or both?

Here’s the CSS code snippet:

figure.effect-lily img {
width: -webkit-calc(100% + 50px);
width: calc(100% + 50px);
opacity: 0.7;
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
transition: opacity 0.35s, transform 0.35s;
-webkit-transform: translate3d(-40px,0, 0);
transform: translate3d(-40px,0,0);
}

figure.effect-lily figcaption {
top: auto;
bottom: 0;
height: 50%;
text-align: left;
}

figure.effect-lily h2,
figure.effect-lily p {
-webkit-transform: translate3d(0,40px,0);
transform: translate3d(0,40px,0);
}

figure.effect-lily h2 {
-webkit-transition: -webkit-transform 0.35s;
transition: transform 0.35s;
}

figure.effect-lily p {
color: rgba(255,255,255,0.6);
opacity: 0;
-webkit-transition: opacity 0.2s, -webkit-transform 0.35s;
transition: opacity 0.2s, transform 0.35s;
}

figure.effect-lily:hover img,
figure.effect-lily:hover p {
opacity: 1;
}

figure.effect-lily:hover img,
figure.effect-lily:hover h2,
figure.effect-lily:hover p {
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}

figure.effect-lily:hover p {
-webkit-transition-delay: 0.05s;
transition-delay: 0.05s;
-webkit-transition-duration: 0.35s;
transition-duration: 0.35s;
}

Any help to integrate this effect into my page would be greatly appreciated.

Thanks
Lyse

That’s brilliant Mike, I’ve had a quick test and it works.

Thank you very much for your help – Enfold support is top notch.

Kind Regards,

Tim