Forum Replies Created
-
AuthorPosts
-
Ok have changed the code for the burger menu.. It also works. The client wants 2 lines. was not able to talk hi out of it. He insists he likes it better with 2 lines.
yes – but on the opened hamburger with the original css rule the hamburger only get one line (looks like a slash)
with my code the burger got on closed burger menu 2lines and on opened burger too.you did not change the burger setting – it is still one line on opened burger menue.
enter on your quick css now the rules of: https://kriesi.at/support/topic/header-layout-in-mobile-view-needs-help/#post-1478652
container width is all up to you / your customer – but i just asked if this is what he likes to have.
You should clarify this somehow before you have then to rewrite a whole series of css rules.PS : please refresh after merging switch off the cache. On performance – “Delete Old CSS And JS Files?”
btw: https://kriesi.at/support/topic/burger-menu-12/
Why? – Look at opened burger menue.maybe this is better instead:
(remove that display none for burger after container and add this rule instead).responsive:not(.av-burger-overlay-active) .av-hamburger-inner:after { display: none; }
there are older css rules inside that are not needed – so i could not find where f.e. the after pseudo-container of the hamburger is gone.
this is what it seems to get your style:
#top #header #header_main .container.av-logo-container .inner-container > * { align-self: center } .html_header_top.html_header_sticky #top #wrap_all #main { padding-top: 300px !important; } @media only screen and (max-width: 989px) { .responsive #top #header #header_main .container.av-logo-container .inner-container { height: inherit; position: relative !important; flex-flow: row wrap; justify-content: center; padding: 0; } .responsive #top #header #header_main .inner-container .logo { flex: 1 1 100% !important; order: 3; max-width: 100%; height: unset !important; } .responsive #top #header #header_main .inner-container .logo a { align-self: flex-start } .responsive #top #header #header_main .inner-container .main_menu, .responsive #top #header #header_main .inner-container .widget { flex: 1 1 48%; height: 120px !important; align-items: center } .responsive #top #header #header_main .inner-container .main_menu { order: 2; } .responsive #top #header #header_main .inner-container .widget { order: 1; } .html_header_top.html_header_sticky #top #wrap_all #main { padding-top: 350px !important; } #top #header #header_main .container.av-logo-container .inner-container .logo a img { max-height: 200px; } }
Sorry – it was carnival here in the Rhineland (Germany) until yesterday, and that’s basically a public holiday week.
Next: it would be nice if you could disable merging in the Enfold settings until all your goals are met. It’s hard to review and give advice without using devtools.
Do you / your customer realy want that narrow content width vor desktop view?
It’s hard enough to reconcile this, but with such a narrow content area, as you’ve noticed yourself, very long menu items quickly become two-liners.hm – ich dachte es so gemacht zu haben. Egal – jetzt geht es. Vielen Dank !
wie gesagt – ich kann ganz gut mit den dev tools umgehen, und dein Hamburger war bei 1000px aktiv und die Lupe war auch nicht da.
Egal:schwarzer balken unten.
Gehe in die Einstellungen von Socket: General Styling – Socket dort wo du #111111 hast ändere es auf dein #ffffffMenü Farben:
#top #header .av-main-nav > li > a .avia-menu-text, #top #header .av-main-nav > li > a .avia-menu-subtext { color: var(--enfold-main-color-primary); } #top #header .av-main-nav > li > a:hover .avia-menu-text, #top #header .av-main-nav > li > a:hover .avia-menu-subtext { color: var(--enfold-main-color-secondary); }
bei dem Headerlayout würde ich dir raten, bei 990px den Hamburger zu setzen.
Main Menu – General – Menu Items For Mobile …
Lupe entfernen: Main Menu – General – Append Search Icon To Main Menu (uncheck)danach geht es dann weiter…
ist jetzt nicht so eilig. Ich schaue mal ob ich es anders hinbekomme.
Deine Reihenfolge entfernt mir den main content – meine Reihenfolge die Footer Page.Es wäre schön, du richtest die Seite ein wie du sie haben möchtest. Denn eben war der Hamburger aktiv bei 1000px jetzt bei 768. Eben war auch keine Such Lupe dabei – jetzt schon. Wenn das feststeht sehe ich wieder drauf.
can you please post the full code – i do not see how to combine both if clauses.
because my solution removes the curtain footer from the footer page when i like to show the featured image.
February 25, 2025 at 12:35 pm in reply to: Post Navigation wird nicht angezeigt. Bitte um Support Hilfe #1477893long time ago that post of mine – hope it will still work.
what i see by first view – you maybe had to replace the selector #footer – because f.e. if you got a #footer-page or div.av-curtain-footer-containerin that line :
$('.postnav_new').detach().clone().insertBefore('.av-curtain-footer-container');
it depends on your footer setting.
Or: you insert it by appendTo as last-child to main etc.
$('.postnav_new').detach().clone().appendTo('main:first');
padding-top für #main musst du dann noch responsive anpassen. Und das immer in Bezug auf .logo img ( max-height) damit kannst du die Logo Größe steuern.
der Grund warum das Logo nicht mittig ist, ist das die flex items auf auto weite stehen.
Man muss also das Widget und die Navigation auf gleich Weite setzen.
Diesen absoluten Wert muss man dann aber im Responsiven Fall ( bei dir unterhalb 1000px) neu setzen, da der Hamburger dann die kleinere Version ist.Bitte schaue ob du diese Selektoren bereits verwendet hast – und ändere dann die Werte wenn Sie vorhanden sind bzw. setze die neuen Properties hinzu.
#top #header #header_main .container.av-logo-container .inner-container { height: inherit; position: relative !important; flex-wrap: wrap; padding: 20px 0; justify-content: space-between; } #top #header #header_main .container.av-logo-container .inner-container nav, #top #header #header_main .container.av-logo-container .inner-container > div { flex: 1 1 240px; } .responsive #top #header #header_main .inner-container .logo { order: 2; flex-basis: auto; min-width: 160px; max-width: 240px; z-index: 9; } .responsive #top #header #header_main .inner-container .main_menu { justify-content: flex-end } .av-main-nav > li .avia-menu-text { float: right !important; } @media only screen and (max-width: 1000px) { #top #header #header_main .container.av-logo-container .inner-container nav, #top #header #header_main .container.av-logo-container .inner-container > div { flex: 1 1 100px; } #top #header #header_main .container.av-logo-container .inner-container .logo { flex: 1 1 40%; overflow: visible !important; } #top #header #header_main .container.av-logo-container .inner-container .logo a { overflow: visible !important; } #top #header #header_main .container.av-logo-container .inner-container .logo a img { max-height: 130px } }
hast du es im bestehenden Code geändert oder irgendwo dazu gesetzt?
ich sehe das Logo soweit mittig – auch in der mobilen Ansicht. Aber ich schaue mal genauer drauf.
das Paddding kommt vom Flex Container – setze da einfach nur oben/unten padding:
#top #header #header_main .container.av-logo-container .inner-container { height: inherit; position: relative !important; flex-wrap: wrap; padding: 20px 0; justify-content: space-between; }
You can sketch it out – so we can better visualise what you want to achieve.
my test environment page ( webers-testseite.de ) has a child-theme functions.php with more than 4000 lines of code – i can not see any issues belonging to a different file structure.
i’m participant as you – so no private content field for me to read. sorry – you had to wait til mods are here.
is there a page (see demo pages) where we can see what you mean. Or do you belong not to icons but to the quotation marks used on text?
your sketch on the bottom is the non responsive case :
left a widget area – then logo – then main menu on the right ? and then under all that the page content?https://kriesi.at/documentation/enfold/example-of-widget-left-logo-center-menu-right/
setting the nav to:
#top #header .av-main-nav { display: flex; flex-flow: column nowrap; } #top #header_main > .container, #top #header_main > .container .main_menu .av-main-nav > li > a, #top #header_main #menu-item-shop .cart_dropdown_link { height: 30px; line-height: 30px; }
will put your list-items under each other.
BUT: Can you really recommend something like this?
functions-enfold.php is now inside includes/config-enfold/
I don’t think the child-theme functions.php is affected, and I suspect it’s just a matter of re-organising the administration.In turn, the functions.php file will retrieve the individual parts from this folder.
Thanks to clarify the usage.
hey ismael : i guess i will better post a new topic – there was that filter avf_default_icons – but because of that new handling of font-icons there has been changed alot. : https://kriesi.at/support/topic/how-to-replace-standard-icons/
PS: deine zum Upload vorbereiteten Fonts sollten vor allem auch woff2 beinhalten. Moderne Browser können die alle verwerten, und die sind auf Grund der Brotli Kompression viel schneller geladen als ttf.
Daher eventuell schmeiss auch deine Open-Sans mal raus und lade diese hier hoch.: Open_Sans.ziphier ist der Vergleich woff2 zu ttf (Alles jeweils gut 1/3 kleiner)
ok – ich sehe jetzt dein child-theme aktiv.
Wie erklärst du dir, das wenn ich in deiner Privacy die google webfonts erlaube – die schrift dann angezeigt wird?
dinpro-light steht oben mit dinpro-light() – da muss was beim generieren schief gelaufen sein. Ausserdem ist in deinen @font-face rules nur die din-alternate-cdnfonts zu sehen.
Man sieht das child-theme natürlich im Source Code – allerdings, nur bei den css und js files die auch davon herrühren: also z.B.<link rel="stylesheet" id="avia-style-css" href="https://marcusjeroch.de/wp-content/themes/enfold-child/style.css?ver=6.0.9" type="text/css" media="all"> <link rel="stylesheet" id="style-name-css" href="https://marcusjeroch.de/wp-content/themes/enfold-child/style.css?ver=6.7.2" type="text/css" media="all">
Lass die Nutzung der oberen Webfonts (ausser den Websafe Fonts ausser acht. Lade die gewünschten Schriften hoch.
Also z.B deine DINPro und die OpenSans. Deine Open-Sans sollte funktionieren die ist dort richtig gelistet (allerdings nur als ttf )
Schmeiss deine DINPro aus dem Font Manager raus und lade diese mal hoch: https://webers-testseite.de/DINPro.zip
Die wird dann dort gelistet:
Wähle dann unter General Styling – Fonts diese Schriften aus (bei den Hochgeladenen Schriften unten)
Du benötigst dann nicht mehr die Auflistung in der Privacy – da selbstgehostete Fonts verwendet werden.
all links above go to code that has old
$(window).load(function() {
keep in mind that jQuery 3.x it has to be:
$(window).on('load', function(){
on that article : Link – do you use any inline code or inline scripts on that page? I had that too on a page where i use a code-block element that is used to add content to that page.
Or have you manually set a tag (span, img etc ) in one of the text-block elements and forgotten to close it correctly?you can find all demos on GitHub Library: Link
download the zip file you need. Extract the xml file of it and look for the needed enfold shortcode of the wanted page — easiest way: search for the page ID as: post_id>206 or finding the home page on that demo search for: CDATA[home]
copy the needed enfold shortcodes from :
<content:encoded><![CDATA[ … here is the avia shortcode inside ]]></content:encoded>
this copied shortcodes you can enter on a new page inserting it to the debug mode input field (activate the debug mode on : Layout Builder – Debug Mode (Backend Only))
save that new page – now you have copied all the layout of the wanted page.You had to edit now that page elements to enter your image/media links inside that code.
February 22, 2025 at 8:10 pm in reply to: Self hosted video shows black border top and bottom. How to remove? #1477658sadly – thats online not so easy. i downloaded that video and on mac just info.:
(and final cut offers that info too)btw: you can enter on that input field 960:414
div .mejs-controls .mejs-time-rail .mejs-time-loaded { background: #f2d8c4; } .main_color .mejs-controls .mejs-time-rail .mejs-time-current { background: green !important; } .mejs-volume-current, .mejs-volume-handle { background: yellow !important; } .mejs-volume-total { background: #f2d8c4; height: 100px; width: 10px; }
February 22, 2025 at 8:03 pm in reply to: Self hosted video shows black border top and bottom. How to remove? #1477656thanks for the links – if you realy like to have it perfect – the aspect ratio is 960:414 = 2.319/1 so your 2.35/1 is not correct. ;)
February 22, 2025 at 7:30 pm in reply to: Self hosted video shows black border top and bottom. How to remove? #1477650html5 video :
(yes send link via e-mail please)div .mejs-controls .mejs-time-rail .mejs-time-loaded { background: yellow; } .main_color .mejs-controls .mejs-time-rail .mejs-time-current { background: green; } .mejs-time-hovered.negative { background: rgba(0,0,0,.9); } .mejs-volume-total { background: darkgoldenrod; height: 100px; width: 5px; } .mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-total, .mejs-controls .mejs-time-rail .mejs-time-total { background: blue; } .mejs-volume-current, .mejs-volume-handle { background: red; } .main_color .mejs-controls .mejs-volume-button .mejs-volume-slider .mejs-volume-current { background: green; }
etc.
-
AuthorPosts