Forum Replies Created
-
AuthorPosts
-
January 3, 2025 at 10:33 am in reply to: Is it possible to animate automatically the Icon Circles? #1474515
you can see here a trial:
https://guenterweber.com/if you hover the circle the animation stops (mouseenter) if you leave the circle – animation starts again.
Why there is a small delay – between icon and icon-text – i do not knowput this to your child-theme functions.php
function rotation_of_active_circle_icons(){ ?> <script type="text/javascript"> window.addEventListener("DOMContentLoaded", function () { // Select the parent element const parentElement = document.querySelector('.avia-icon-circles-inner'); // Parent // The classes to target and toggle const targetClasses = ['avia-icon-circles-icon', 'avia-icon-circles-icon-text']; // children const activeClass = 'active'; // Function to rotate the active class among children with specific classes function rotateActiveClassPair(parent, targetClasses, activeClass, interval) { // Get children for each target class const childrenGroups = targetClasses.map(cls => Array.from(parent.querySelectorAll(<code>.${cls}</code>))); const maxLength = Math.max(...childrenGroups.map(group => group.length)); let currentIndex = 0; let rotationInterval; // Ensure there are children to rotate if (maxLength === 0) return; // Function to remove all active classes function removeAllActiveClasses() { childrenGroups.flat().forEach(child => child.classList.remove(activeClass)); } // Start the rotation function startRotation() { rotationInterval = setInterval(() => { // Remove the active class from the current pair childrenGroups.forEach(group => { if (group[currentIndex]) { group[currentIndex].classList.remove(activeClass); } }); // Move to the next index (loop back to the start if at the end) currentIndex = (currentIndex + 1) % maxLength; // Add the active class to the new pair childrenGroups.forEach(group => { if (group[currentIndex]) { group[currentIndex].classList.add(activeClass); } }); }, interval); } // Start rotating initially startRotation(); // Pause the rotation and remove all active classes on hover parent.addEventListener('mouseenter', () => { clearInterval(rotationInterval); // Stop the rotation removeAllActiveClasses(); // Remove all active classes }); // Resume the rotation when the mouse leaves the parent parent.addEventListener('mouseleave', () => { startRotation(); // Restart the rotation }); } // Start rotating the active class every 3 seconds rotateActiveClassPair(parentElement, ['avia-icon-circles-icon', 'avia-icon-circles-icon-text'], 'active', 3000); }); </script> <?php } add_action('wp_footer', 'rotation_of_active_circle_icons');
with your logo this might work.
remove that one rule :
.logo.avia-svg-logo svg { height: 220px; max-height: 175% !important; overflow: visible; top: 10px; left: calc((1510px/2) - 50vw); right: auto; }
and insert instead:
.logo, .logo a { overflow: visible; } .logo.avia-svg-logo svg { height: 150px; max-height: 200% !important; overflow: visible; overflow: visible; left: -30px !important; top: 5px !important; }
to see my converted svg – look: https://webers-testseite.de/tribal/
Advantage – you can influence inside the svg by external eventsFirst – seeing your staging page now – your header setting seems to be “Let Logo And Menu Position Adapt To Browser Window”
on your screenshot this is not the case – see navigation ends with content of your page.
So the conditions are a bit different now.btw. your svg isn’t one ;). it is a svg file with an embedded png inside. – so you could neither use a png directly – or try to convert it to a real svg (only vectors inside). f.e: https://webers-testseite.de/wp-content/uploads/MuS.svg
i think the font is an Eurostile Version – the one i used from Bitstream does not fit a 100% – so if you tell me the exact name and font creator – i will find it.…
on your mockup it looks to me if the logo only moves down ( lower than the navigation)
now i looked better to that image – so you have a header with unchecked setting of : “Let Logo And Menu Position Adapt To Browser Window”because i do not see your page – you know better your setting for container width – on my test page it is 1510px
.logo.avia-svg-logo svg { height: 220px; max-height: 175% !important; overflow: visible; top: 10px; left: calc((1510px/2) - 50vw); right: auto; } @media only screen and (max-width: 1509px) { .logo.avia-svg-logo svg { left: 0px; right: auto; } }
btw: – see again test page and code for header_bg – i set in calculated height for it – because this is better to understand how it works. https://webers-testseite.de/tribal/
maybe there had to be adjustments for responsive case in addition.
PS : i think you can have a png as masking image too
https://www.w3schools.com/css/css3_masking.aspUnfortunately, I cannot inspect the page in question. I think I could also help with your query: Link . But without the page it’s just a guess what it might look like. Maybe the link to masking images will help you.
I hope you have a happy new year! I’m now getting ready to celebrate the evening, too.
css snippets are for css style-sheets ( in your case you have inserted it to style.css)
php snippets are meant for child-theme functions.php !you can see here a possible solution – even with shrinking header. https://webers-testseite.de/tribal/
The clou is – that shape goes to header_bg – so it is part of #header: https://webers-testseite.de/wp-content/uploads/konvexe-boegen.svgthis is the used svg – the right (smaller side) had to be of min-height of shrinked header height.
The Rest of the code used – you can see on my page
PS: for the following section it would be good to have enough top padding
PPS: the svg had to be one that fits to its dimensions: preserveAspectRatio=”none”This is not styled to its end usage ( some adjustings had to be made for responsive behaviour!
First Question: do you have a shrinking header?
or do you have a faulty setting for padding-top of #main on those pages?
Read carefully
“For that add to your child-theme functions.php:”
so both php snippets are needed.____________
on you style.css – remove the code – and then add : Link
@media only screen and (max-width: 989px) { .responsive #top #wrap_all #header .container { width: 95%; max-width: 95%; } #header { position: fixed !important; height: 110px !important; max-height: 110px !important; } #top #header.av_header_transparency #header_meta { background-color: transparent; } #header_main { border-bottom: none; } .responsive #top .av-logo-container , .responsive #top .logo a, .responsive #top .logo img, .responsive #top .logo svg { height: 80px; max-height: 80px !important; line-height: 80px !important; } .responsive #top .av-main-nav .menu-item-avia-special a { height: 80px !important; line-height: 80px !important; } .responsive.html_mobile_menu_tablet #top #wrap_all .av_header_transparency { background-color: transparent !important; } #top .header_bg { background-color: transparent !important; } #top #header:not(.av_header_transparency) .header_bg { background-color: #edddc6 !important; } .responsive.html_mobile_menu_tablet #top .av_header_transparency .logo img.alternate, .responsive.html_mobile_menu_tablet #top .av_header_transparency .logo .subtext.avia-svg-logo-sub { display: block !important; } .responsive.html_mobile_menu_tablet #top .av_header_transparency.av_alternate_logo_active .logo a > img, .responsive.html_mobile_menu_tablet #top .av_header_transparency.av_alternate_logo_active .logo a > svg { opacity: 0; } /*** depends on your setting ***/ #top #header.av_header_transparency #header_meta .phone-info * { color: #FFF !important; } .html_mobile_menu_tablet .header_color #header.av_header_transparency div .av-hamburger-inner, .html_mobile_menu_tablet .header_color #header.av_header_transparency div .av-hamburger-inner::before, .html_mobile_menu_tablet .header_color #header.av_header_transparency div .av-hamburger-inner::after { background-color: #edddc6; } .html_mobile_menu_tablet .header_color #header.av_header_transparency .menu-item-search a:before { color: #FFF; } .responsive #top #main { padding-top: 110px !important; } .responsive #top #main .sticky_placeholder { height: 0px !important; } .responsive #top #main .av-submenu-container { position : fixed !important; top: 110px !important; } } .responsive #top #wrap_all #header.hide-header, #header.hide-header + #main #sub_menu1 { opacity: 0 !important; transition: opacity 1s ease; } .responsive #top #wrap_all #header:not(.hide-header), #header:not(.hide-header) + #main #sub_menu1 { transition: opacity 0.5s ease; } @media only screen and (max-width: 469px) { #header { height: 140px !important; max-height: 140px !important; } #header_main { height: 80px; } .header_bg { height: 140px; } .responsive #top #main { padding-top: 140px !important; } .responsive #top .av-logo-container , .responsive #top .logo a, .responsive #top .logo img, .responsive #top .logo svg { height: 60px; max-height: 60px !important; line-height: 60px !important; } .responsive #top #main .av-submenu-container { position : fixed !important; top: 140px !important; } #top .av-submenu-pos-center .mobile_menu_toggle { border: none !important; } }
_______________
i don’t know what is all inside your child-theme functions.php – (this is not readable via the browsers or in dev tools)
both snippets of mine should be there:function hide_header(){ ?> <script> (function($){ 'use strict'; var c, currentScrollTop = 0, header = $('#header'); $(window).scroll(function () { var a = $(window).scrollTop(); var b = header.height(); currentScrollTop = a; if (c < currentScrollTop && a > b ) { header.addClass("hide-header"); } else if (c > currentScrollTop && !(a <= b)) { header.removeClass("hide-header"); } c = currentScrollTop; }); })(jQuery); </script> <?php } add_action('wp_footer', 'hide_header');
and:
function close_sub_menu_on_click_items(){ ?> <script type="text/javascript"> (function($) { $('.av-subnav-menu .menu-item a').on('click', function() { $(this).closest('.av-subnav-menu').removeClass('av-open-submenu'); }); })(jQuery); </script> <?php } add_action('wp_footer', 'close_sub_menu_on_click_items');
i see that there is only on style.css that code .
So better remove all – and add:now we got one thing that disturbs the usage:
if you are on an anchor that is on the bottom – the submenu will close because it scrolls downl.
But if you then click on an anchor link of the sub-menu – sub-menu does not close on click.For that add to your child-theme functions.php:
function close_sub_menu_on_click_items(){ ?> <script type="text/javascript"> (function($) { $('.av-subnav-menu .menu-item a').on('click', function() { $(this).closest('.av-subnav-menu').removeClass('av-open-submenu'); }); })(jQuery); </script> <?php } add_action('wp_footer', 'close_sub_menu_on_click_items');
i see that there is only on style.css that code .
So better remove all – and add:@media only screen and (max-width: 989px) { .responsive #top #wrap_all #header .container { width: 95%; max-width: 95%; } #header { position: fixed !important; height: 110px !important; max-height: 110px !important; } #top #header.av_header_transparency #header_meta { background-color: transparent; } #header_main { border-bottom: none; } .responsive #top .av-logo-container , .responsive #top .logo a, .responsive #top .logo img, .responsive #top .logo svg { height: 80px; max-height: 80px !important; line-height: 80px !important; } .responsive #top .av-main-nav .menu-item-avia-special a { height: 80px !important; line-height: 80px !important; } .responsive.html_mobile_menu_tablet #top #wrap_all .av_header_transparency { background-color: transparent !important; } #top .header_bg { background-color: transparent !important; } #top #header:not(.av_header_transparency) .header_bg { background-color: #edddc6 !important; } .responsive.html_mobile_menu_tablet #top .av_header_transparency .logo img.alternate, .responsive.html_mobile_menu_tablet #top .av_header_transparency .logo .subtext.avia-svg-logo-sub { display: block !important; } .responsive.html_mobile_menu_tablet #top .av_header_transparency.av_alternate_logo_active .logo a > img, .responsive.html_mobile_menu_tablet #top .av_header_transparency.av_alternate_logo_active .logo a > svg { opacity: 0; } /*** depends on your setting ***/ #top #header.av_header_transparency #header_meta .phone-info * { color: #FFF !important; } .html_mobile_menu_tablet .header_color #header.av_header_transparency div .av-hamburger-inner, .html_mobile_menu_tablet .header_color #header.av_header_transparency div .av-hamburger-inner::before, .html_mobile_menu_tablet .header_color #header.av_header_transparency div .av-hamburger-inner::after { background-color: #edddc6; } .html_mobile_menu_tablet .header_color #header.av_header_transparency .menu-item-search a:before { color: #FFF; } .responsive #top #main { padding-top: 110px !important; } .responsive #top #main .sticky_placeholder { height: 0px !important; } .responsive #top #main .av-submenu-container { position : fixed !important; top: 110px !important; } } .responsive #top #wrap_all #header.hide-header, #header.hide-header + #main #sub_menu1 { opacity: 0 !important; transition: opacity 1s ease; } .responsive #top #wrap_all #header:not(.hide-header), #header:not(.hide-header) + #main #sub_menu1 { transition: opacity 0.5s ease; } @media only screen and (max-width: 469px) { #header { height: 140px !important; max-height: 140px !important; } #header_main { height: 80px; } .header_bg { height: 140px; } .responsive #top #main { padding-top: 140px !important; } .responsive #top .av-logo-container , .responsive #top .logo a, .responsive #top .logo img, .responsive #top .logo svg { height: 60px; max-height: 60px !important; line-height: 60px !important; } .responsive #top #main .av-submenu-container { position : fixed !important; top: 140px !important; } #top .av-submenu-pos-center .mobile_menu_toggle { border: none !important; } }
after that we will go on to start fine-tuning.
-
This reply was modified 7 months, 2 weeks ago by
Guenni007.
Opacity has one big advantage – you do not need to find a solution for that sub-menu – because it is not part of #header but of #main it will be a bit complicated to find a solution. Except you go and change some settings on menu.php (sub-menu).
see here my comment on this : https://kriesi.at/support/topic/how-to-make-the-submenu-sticky-on-mobile/#post-1225108
(but do not adopt the alb changings for child-theme menu.php – because that topic is 4years old)
see here sticky submenus on mobile screens : https://webers-testseite.de/transparent-header/
_______
for opacity see demo and code on:
https://webers-testseite.de/pietzas/Simple – look to the header behaviour on desktop screen width.
believe it or not – my first solution with sticky header on every screen width was the best.
Then you can decide to shift the header including sub-menu or to set those two things to opacity : 0shifting is a lot of css – the opacity solution is nice too.
you had to correct that sub-menu thing!
by the way the code with only opacity looks well too!
read the post carefully- that script is adding a class to the #header
so you can play with the selector: #header.hide-header to do something with the header – see example page and the code listed there ;)f.e. (less complicated than a shift to top)
#header.hide-header, #header.hide-header + #main #sub_menu1 { opacity: 0; transition: opacity 2s ease; } #header:not(.hide-header), #header:not(.hide-header) + #main #sub_menu1 { transition: opacity 0.5s ease; }
by this script inside your child-theme functions.php:
function hide_header(){ ?> <script> (function($){ 'use strict'; var c, currentScrollTop = 0, header = $('#header'); $(window).scroll(function () { var a = $(window).scrollTop(); var b = header.height(); currentScrollTop = a; if (c < currentScrollTop && a > b ) { header.addClass("hide-header"); } else if (c > currentScrollTop && !(a <= b)) { header.removeClass("hide-header"); } c = currentScrollTop; }); })(jQuery); </script> <?php } add_action('wp_footer', 'hide_header');
what does the script do: after a scrolldistance of the header height a class is added to the header : hide-header
it is up to you to neither the whole header goese to opacity: 0 or to set a translateY value etc.see: https://webers-testseite.de/bemodesign/
css values on that page depends on the given settings.it is working – and my snippet is working too. But i wouldn’t make that space between your navigation and the first section not by setting up a margin top/bottom on color section. This looks bad on responsive case.
you could have done this:#header_main_alternate { margin-bottom: 40px; }
because header_main_alternate goes to display: none in responsive case – there will be no distance then between header and main.
By the way : nice to have a response on having success with the code ;)
no thanks is needed but just a success reportAre you shure that it is (breadcrumbs) not there? because on inserting that page to header – you had to adjust the padding-top of #main.
ok – then erase the given css code.
But for having the submenue sticky aswell there had to be hardcoded changes to enfold elements. This is not so easy as just css settings.but even 990px are not enought – your menue overlays the logo much earlier.
@media only screen and (max-width: 1080px) { #top #header .av-main-nav > li.menu-item:not(.menu-item-search-dropdown) { display: none!important; } #top #header .av-burger-menu-main { cursor: pointer; display: block!important; } }
Do you only like to see the burger icon fixed – or do you like to have header too fixed on top?
by the way – if it is the page that belongs to your nick – it would be better to break at 990px to hamburger menu.
Then try this :
@media only screen and (max-width: 989px) { .responsive #top #wrap_all #header .container { width: 95%; max-width: 95%; } #header { position: fixed !important; height: 110px !important; max-height: 110px !important; } #top #header.av_header_transparency #header_meta { background-color: transparent; } #header_main { border-bottom: none; } .responsive #top .av-logo-container , .responsive #top .logo a, .responsive #top .logo img, .responsive #top .logo svg { height: 80px !important; max-height: 80px !important; line-height: 80px !important; } .responsive #top .av-main-nav .menu-item-avia-special a { height: 80px !important; line-height: 80px !important; } .responsive.html_mobile_menu_tablet #top #wrap_all .av_header_transparency { background-color: transparent !important; } #top .header_bg { background-color: transparent !important; } #top #header:not(.av_header_transparency) .header_bg { background-color: #edddc6 !important; } .responsive.html_mobile_menu_tablet #top .av_header_transparency .logo img.alternate, .responsive.html_mobile_menu_tablet #top .av_header_transparency .logo .subtext.avia-svg-logo-sub { display: block !important; } .responsive.html_mobile_menu_tablet #top .av_header_transparency.av_alternate_logo_active .logo a > img, .responsive.html_mobile_menu_tablet #top .av_header_transparency.av_alternate_logo_active .logo a > svg { opacity: 0; } /*** depends on your setting ***/ #top #header.av_header_transparency #header_meta .phone-info * { color: #FFF !important; } .html_mobile_menu_tablet .header_color #header.av_header_transparency div .av-hamburger-inner, .html_mobile_menu_tablet .header_color #header.av_header_transparency div .av-hamburger-inner::before, .html_mobile_menu_tablet .header_color #header.av_header_transparency div .av-hamburger-inner::after { background-color: #edddc6; } .html_mobile_menu_tablet .header_color #header.av_header_transparency .menu-item-search a:before { color: #FFF; } .responsive #top #main { padding-top: 110px !important; } .responsive #top #main .sticky_placeholder { height: 0px !important; } }
give this a try:
@media only screen and (min-width: 990px) { .html_header_top.html_logo_center #top #header_main_alternate .main_menu { width: 100% } .html_header_top.html_logo_center #header_main_alternate .main_menu #avia-menu { display: flex !important; flex-flow: row nowrap; justify-content: space-evenly; } .html_header_top.html_logo_center #header_main_alternate .main_menu .av-main-nav > li > a { padding: 0 !important; font-size: 19px !important; } }
i guess you will set the header widget to display none on small screens
@media only screen and (max-width: 989px) { #header .widget { display: none; } }
by the way: is it intentional that the container width is set to 1130px ?
Wie willst Du es haben: immer Bild zuerst – dann Text ?
In dem Fall müßtest du jetzt die Grid-Rows bearbeiten bei denen das Bild rechts ist.
Die öffnest du im Editor, weiterhin dann die Zelle öffnen :
dort zu dem Advanced Tab und dort dann die Linke Zelle auf Position 2 und die Rechte Zelle auf Position 1 setzen.
Wenn du dort in den Zellen nur die Hintergrundbilder hast – entweder – wie schon geschehen einen min-height setzen.
ich bevorzuge in die Zellen einen Whitespace Separator zu ziehen. Wie du willst.December 27, 2024 at 5:58 pm in reply to: Change Search Icon to Search Field – only for expanded menu #1474305or just – activate the option in main menue to show search icon ( this is the one for ajax search )
and put this to your child-theme functions.php:
function add_search_to_main_menu($items, $args) { if ($args->theme_location == 'avia') { $search_form = '<li id="menu-item-search-desktop" class="menu-item av-medium-hide av-small-hide av-mini-hide" role="menuitem">' . get_search_form(false) . '</li>'; $items .= $search_form; } return $items; } add_filter('wp_nav_menu_items', 'add_search_to_main_menu', 10, 2);
and this to quick css:
#avia-menu { display: flex; flex-flow: row nowrap; justify-content: space-between; align-items: center; } #top #searchform > div { position: relative; max-width: 220px; opacity: 1 !important; display: block !important; } /*=== synchronise it with your hamburger breakpoint ===*/ @media only screen and (min-width: 990px) { #menu-item-search { display: none; } }
Advantage : Ajax Functionality is preserved for mobile case.
see: https://enfold.webers-webdesign.de/PS: after you have seen the demo page, I will remove it again, because it disturbs other demos on the site.
e.g. the one with left and right header layoutand you have found on top right the switch between Slide and Layers.
Go to Slide then navigate to Timing & Transition – and go to Slide Transitions – press Select Transitions – and choose the type you like to have.You have to find these rules:
@media only screen and (min-width:768px) and (max-width:989px) { body, body .avia-tooltip { font-size:80px } h1 { font-size:60px } h2 { font-size:50px } h3 { font-size:42px } } @media only screen and (min-width:480px) and (max-width:767px) { body, body .avia-tooltip { font-size:66px } h1 { font-size:46px } h2 { font-size:37px } h3 { font-size:29px } } @media only screen and (max-width:479px) { body, body .avia-tooltip { font-size:53px } h1 { font-size:38px } h2 { font-size:28px } h3 { font-size:20px } }
This is a very unusual scaling.
First of all, the value for the base (body) is set very high.
Even if you take the aspect of wai aria into account, a body font-size of 53 ( below 479px) is gigantic. For desktop screen widths, this is 13px.
Here I would rather go higher, e.g. to 16px.Because you have set a merging of the styles – i can not say where the rules comes from ( maybe it is a merging of W3total Cache ).
have a look if you have set on General Styling – Typography these values or in your quick css.
i’m participant as you are – so no private content for me. But now – seriously – now i’m out – first guest will arrive at 3pm
By the way – you can open svg files with good text editors. (Sublime Text on Mac – or Notepad++ on Windows)
That’s a first hint. I opened your logo in Illustrator and created meaningful groups. I then edited these in Sublime Text. Above all, I renamed the standard Illustrator group names (manually) and assigned IDs to the groups.But unfortunately I’ll have to put you off until after Christmas – from now on I’ll be in off-duty mode.
As I said, it’s always better for us who want to help to be able to analyze the page with the problems. -
This reply was modified 7 months, 2 weeks ago by
-
AuthorPosts