Hi Yigit,

Thank you.

I thought documenting your change might help other customers who are facing the same challenge, as your change was not to my code, but rather Enfold’s code published by the Enfold team in the forum.

There seems to be delta in addressing the iOS icon challenge/fix in the Enfold main Menu vs. the Enfold Fullwidth Sub Menu.

Enfold main Menu
( While this works for the Enfold main Menu on iOS, the CSS does not work on the Enfold Fullwidth Sub Menu )
https://kriesi.at/support/topic/avia-bullet-in-mobile-menu-changes-to-undesirable-icon-on-ios-9-0-2/

Fullwidth Submenu
( Note Josue’s comment on May 23, 2015 at 8:02 am, line 16)
https://kriesi.at/support/topic/how-to-make-full-width-sub-menu-transparent/

His code has,
.responsive #top .av-menu-mobile-active .av-subnav-menu > li a:before{content: “\25B6”; position: absolute; top: 15px; margin-left: -10px; font-family: ‘entypo-fontello’; font-size: 7px;}

Above, in this topic, both you and Ismael also suggested the same code,
content: “\25B6”;

While your new fix shows the actual triangle character
.responsive #top .av-menu-mobile-active .av-subnav-menu > li a:before{content: “►”; position: absolute; top: 15px; margin-left: -10px; font-family: ‘entypo-fontello’; font-size: 7px;}

Thank you for your help,

* {margin: 0; padding: 0;}

body {
background: #f5f5f5;
font-family: arial;
}

section {
background: #fff;
box-shadow: 0px 2px 2px #ebebeb;
}

header {
width: 960px;
margin: 0 auto;
text-align: center;
position: relative;
}

nav li{
display: inline-block;
padding: 40px 30px 40px 0;
}

nav li:nth-child(3) {
padding-right: 80px;
}

nav li:nth-child(4) {
padding-left: 80px;
}

.logo {
background: url(logo.png) 50% 0 no-repeat;
background-size: 32px 59px;
width: 32px;
height: 59px;
position: absolute;
top: 20px;
left: 460px;
}

Böyle bişey buldum yaptım dediğim gibi oldu ama headerın altına gitti yazılar logo fln yok oldu ben yazılım bilmiyorum o yüzden benim için zor oluyor. Neyse belki işe yarar başkası için .)

Hi Rikard,

Sorry but the linked page isn’t saturated with content!

I’m trying to get those 3 images to grow smoothly (~1 sec animation) by 10% of their current size on mousing over them to then decrease to their original size when mousing off. Hopefully this will emphasise that they are clickable when the page is completed.

The reveal animation I’m describing is illustrated by timeline I made containing the 2 elements made up of “text 1” and “img 1”. Left-most being the start of the animation and the right-most being the end of it (font-style and colour will be different, something I can manage with)! The idea is that when hovering over the text, “img 1” would begin to reveal itself from left-right. When hovering off the text, the animation would trigger in reverse to the original state.

Also, you might be able to tell help me out with the background sizing. On my laptop at the moment the background stretches across, but when I’m at home on my larger monitor I’ll see that the background will be too small for the screen. A background that stretches and responds to differing monitor sizes is what I’m after.

Finally, to add another question to the list (it could go on forever) I’m trying to rotate the arrow at the very bottom of the page by just a few degrees because I’ll have an arrow to each of those circular buttons and I don’t want to have each of them separated by 90 degrees. I’d rather not go into inkscape and rotate them in there, thus having to upload 50 arrows to my media library in slightly different orientations if you catch my drift!

I’ll do my best to explain better if you need me to.

Thanks,

J

Hallo,

ich habe Deine beiden CSS Code eingetragen – sind Perfekt und funktionieren an sich sehr gut, wenn man Sie vom Mega Menü anklickt.
Von der Sidebar links funktioniert es auch, außer das die Unterkategorie erst bei einen zweiten Klick angezeigt werden, sonst bleibt die Unterkategorie weiß. Diesen Fehler habe ich bislang noch nicht finden können.

Dann wollte ich wie immer, den CSS Code für Sidebar links Schriftgröße 14px eingeben und den CSS Code das die Linie(n) unterhalb des Textes ausgeblendet werden, wenn man mit der Maus rüber fährt.
Dafür hatte ich folgende CSS Code eingetragen, aber keine Änderung zu sehen.

.sidebar_left.sidebar {
font-size: 14px;
}

und

.sidebar_left.sidebar {
text-decoration: none;
}

Vielen Dank im voraus.

Gruß

Jessica

Thanks again,
I’ve removed what now seems to be unnecessary Quick CSS:

.iconbox .entry-content-header {
  text-align: center;
}
.iconbox .entry-content-header * {
  float: none;
  display: inline;
}

But I’ve kept and amended CSS for those poor people with tiny screens :)

@media only screen and (max-width: 250px) {
.avia-icon-list .iconlist_title { font-size: 10px !important; }
}

All seems to work well.

Hallo,
ich bekomme das mit der Schrift nicht richtig hin. Eigentlich erscheint diese eine Schrift nur als spezielle Überschrift in H1.
Mittlerweile erscheint sie zwar, aber nicht korrekt bzw. nicht in allen Browsern. Bei der mobilen Ansicht ist es auch die falsche Schrift.
Ich habe folgendes gemacht:
1. Die Schrift (keine Google-Schrift) via Webfontkit in verschiedenen Formaten besorgt (woff2, svg, etc.)
2. Font-Face Code im Enfold Child: Stylesheet (style.css) eingetragen (siehe Private Content) – wenn ich es ins Quick CSS einfüge, gehts es gar nicht…
3. Im Quick CSS folgenden Eintrag gemacht:

h1.special-heading-tag {
font-family: ‘xyz’ !important;
}

H1 {
font-size: 65px !important;
font-family: xyz !important;
}

Leider will es aber nicht richtig klappen: Nicht bei allen Browsern und nicht mobil…

Danke für die Hilfe!
Janina

Hi Guenni007,

I did put it in and I could change the font size & weight, but not the spacing..
how do I do this?

thanks!

Thank you, Ismael, that works now.
However the font size should be 11px (and ideally italic) – I added this in the code but it doesn’t work:
.avia-caption {
bottom: -100px !important;
padding:0!important
font-size: 11px!important
}

I also don’t want the grey background – how can I get rid of this?
Thank you very much!

Hi Floaka Editor
That didn’t work. The Special CSS I have for http://www.autostop.com.au is

/* All Mobile Sizes (devices and browser) */
@media only screen and (max-width: 767px) {
.avia-layerslider {
display: none !important;
}
}

#header_meta {
height: 50px;
}

.phone-info {
width: 500px;
}

.phone-info {
font-size: 18px;
}

What have I done wrong?
Any help is appreciated, thanks Mate