Viewing 30 posts - 1 through 30 (of 38 total)
1 2
  • Author
    Posts
  • March 5, 2020 at 8:38 pm #1190626
    designbasis

    Hi Folks,

    how can I add a further colour for the active submenu-link?
    With your snippet from the documentation I’m able to change
    the submenu-link-colour. So far so good…
    ——————————————————————————————-
    /* Submenu links */

    #top #wrap_all #header .av-burger-overlay #av-burger-menu-ul .sub-menu a {
    color: #ffffff;
    }
    ——————————————————————————————-
    But how can I add a further colour for the °active” link in the submenu?

    Best regards
    Carsten

    March 6, 2020 at 8:18 pm #1190975
    Victoria

    Hey Carsten,

    Unfortunately, the sub-menu item does not get the class in this case that identifies it as current.

    You can try this css:

    
#top #wrap_all #header .av-burger-overlay #av-burger-menu-ul .sub-menu a:active .avia-menu-text {
  color: red;
}

    Best regards,
    Victoria

    March 7, 2020 at 4:24 pm #1191129
    designbasis

    Hi again Victoria,

    thx for your answer and new snippet! But unfortunately it’s not working.
    Is there maybe/hopefully another way?

    Best regards
    Carsten

    March 7, 2020 at 5:59 pm #1191141
    Guenni007

    there is one thing to know the parent of that sub-menu link got the same class: current-menu-item
    but it has an additonal one of active-parent-item so you had to exclude this parent from being influenced too:

    #av-burger-menu-ul :not(.active-parent-item) .current-menu-item > a {
    color: red !important;
}

    better would be to see your page – because sometimes there are second-, third-, fourth-level sub-menu items .

    March 7, 2020 at 9:49 pm #1191170
    designbasis

    Hi again Guenni,

    thx for your new reply and infos!

    Sorry, but for this project it’s not possible to make the site public, because
    it is a very special customer. I’m not allowed, so to speak. ;-/ But again,
    thank you very much for your support…that’s very kind from you! And because
    of your nick-name I thought you’re german, but you’re not, don’t you? :-)
    Anyway…

    Of course I tried your new snippet, but it is not working…sorry! So, dear Enfold-
    Team…the ball is back to you again. ;-)

    Best regards
    Carsten

    March 8, 2020 at 10:26 am #1191235
    Guenni007

    ja – ist eben leider so, dass es ohne die Seite schwer ist den genauen Code zu generieren. Du siehst allein anhand des vorhandenen Codes von Enfold , dass hier genau geschaut werden muss welche Ebene des Menus nun angesprochen werden soll – die
    .av-burger-overlay li a, .av-burger-overlay li li a, .av-burger-overlay li li li a Cascaden sprechen dort mit hinein.

    March 8, 2020 at 5:26 pm #1191280
    designbasis

    Hi Günther,

    ok, also doch „deutschsprachig“…fein :-) Hatte Dir nämlich auf Dein erstes Feedback
    zu meiner anderen Frage auf Deutsch geantwortet und zusätzlich auf Englisch, da
    ich eben nicht wußte. ;-)

    Ja, meine Kundin ist eine sog. prominente Person aus dem Showbiz und daher muss
    ich hier etwas zurückhaltend sein. Die Seite ist natürlich aktuell insgesamt nicht
    öffentlich. Irgendwann demnächst wird sie es dann natürlich sein…ist ja der Sinn des
    ganzen hier, logo. ;-)

    So tief, wie Du, bin ich nicht drin in der Programmier-Materie, da ich hauptberuflich
    Designer bin, aber der Bereich überschmeidet sich mittlerweile so stark, dass ich
    eben angefangen habe, mich damit zu beschäftigen. Und mit dem Enfold-Theme
    funktioniert das ja auch ganz gut. Aber man stößt eben immer wieder an seine
    (natürlichen) Grenzen. ;-) Machst Du das hier sozusagen „ehrenamtlich“ oder be-
    kommst Du auch etwas dafür? Denn Dein Status steht ja auf „ Participant“ und
    nicht auf „Moderator“.

    So, dann warte ich mal ab, bis Victoria sich wieder rührt…manchmal dauert es ja
    leider ein Weilchen, aber nun denn…

    Dir noch einen schönen Sonntag und bis zum nächsten Topic! :-) Wünschte, ich
    könnte sagen, beim nächsten Mal helfe ich Dir, aber das wird wohl noch eine
    ganze Weile dauern. ;-)

    Beste Sonntagsgrüße
    von Carsten

    March 9, 2020 at 4:12 pm #1191558
    Guenni007

    Das CSS ist kein Hexenwerk, wenn man sich mal mit den Browser eigenen Developer Tools beschäftigt (nahezu alle bringen da mehr oder weniger gute mit – bei Safari muss man das in den Einstellungen allerdings aktivieren).
    siehe mal hier mein Kommentar unten: https://kriesi.at/support/topic/arrange-to-middle/#post-1094963

    Da kann man ganz gut vergleichen was an Klassen zB an einem aktivem Menu Punkt anliegt.

    Man kann dort “virtuell” css code einfügen, und die Veränderung beobachten – bevor man es überhaupt in das Quick CSS einfügt.

    March 11, 2020 at 3:24 pm #1192315
    designbasis

    Hi Günther,

    ja, richtig – alles ist kein Hexenwerk, wenn man sich damit ausreichend
    beschäftigt! ;.) Natürlich kenne ich auch die „Developer-Tools“…auch
    unter Safari. Man schaut rein und findet einiges, aber richtig damit aus-
    einandergesetzt habe ich mich eben noch nicht – steht aber auf meiner
    To-Do-Liste. :)

    Da ich aber mit der Seite aktuell weiter kommen muss, benötige ich halt
    erst mal weiterhin Hilfe vom Support…telaviv… ;-/

    Bis demnächst….und noch mal Dankeschön!

    Gruß
    Carsten

    March 11, 2020 at 3:55 pm #1192333
    designbasis

    Hi again Victoria,

    unfortunately the problem is still not solved. Are you seeing any
    other chance to fix that? It would be great!

    Best regards
    Carsten

    March 19, 2020 at 3:57 am #1194291
    Ismael

    Hi,

    This is not possible by default because the child menu item in the burger menu doesn’t contain the appropriate class attribute that will identify it as the current menu item. There is a workaround but you have to add this script in the functions.php file.

     function ava_enqueue_custom_script_resize() {
    if ( wp_script_is( 'avia-default', 'registered' ) ) {
        wp_add_inline_script( 'avia-default', "(function($){
		    $('.av-burger-menu-main a').on('click', function() {	
				setTimeout(function() {
					$('.av-active-burger-items .sub-menu li').each(function() {
						var link = $(this).find('a'),
							href = link.attr('href');

						if(href.includes(window.location.pathname)) {
							link.addClass('current-child-menu-item');
						}

						return false;
					});
				}, 1000);
			});
})(jQuery);" );
    }
 }
 add_action( 'wp_enqueue_scripts', 'ava_enqueue_custom_script_resize', 9999);

    This will search for the link that contains the pathname and apply a unique class attribute to it. After adding the script, use this code in the Quick CSS field or the style.css file to adjust the look of the active child menu item or the current-child-menu-item.

    .current-child-menu-item {
  color: blue;
}

    Best regards,
    Ismael

    March 19, 2020 at 6:17 pm #1194496
    designbasis

    Hi Ismael,

    thanks for your answer and your great explanation! I did all you told me, but
    unfortunately it doesn’t work. Maybe you have another look at the site.
    Would it helps if you get an admin-login?

    Best regards
    Carsten

    March 23, 2020 at 11:29 am #1195419
    Guenni007

    but i really do not see the need for it : there is allready a class for the current menu item: current-menu-item
    The only problem is that the first level parent li’s get the same class but in additon they become that class: active-parent-item
    So this should do the job for mega menu sub-menu items if they have themself a sub-menu!

    #av-burger-menu-ul li:not(.active-parent-item) .current-menu-item a {
    color: green !important;
}

    and this here for normal first-level sub-menu links:

    /*** colorize parent***/
#av-burger-menu-ul li.current-menu-parent.current-menu-item > a {
    color: red !important;
}
/** colorize active item ****/
#av-burger-menu-ul li.current-menu-item > a {
    color: green !important;
}

    the only need for a new class could be a mega-menu title with own link and sub-menu : there is only a class: av-width-submenu

    may i see your site please – send me a link via e-mail if you have no other choice – see my nick or avatar.

    • This reply was modified 4 years, 9 months ago by Guenni007.
    March 23, 2020 at 12:12 pm #1195436
    Ismael

    Hi,

    We adjusted the code a bit. Please try it again. We tried to adjust it manually but we get an error whenever we try to update the functions.php file.

    @guenni007: He’s trying to target the active child menu item of the active parent item.

    Best regards,
    Ismael

    March 23, 2020 at 12:18 pm #1195437
    Guenni007

    Yes : see private content url – everything works without script – except the mega-title links with sub-menu level

    March 23, 2020 at 7:52 pm #1195561
    designbasis

    Hi Günter,

    erneut ein großes Dankeschön für Deine Mithilfe! Du bist also ein Kollege,
    der auch aus dem klassischen Printbereich kommt…witzig. :) Komme gerne
    auf Dein Angebot zurück, falls alle Stricke reißen. ;) Aber jetzt versuchen
    wir mal, ob wir es nicht mit gemeinsamer Hilfe von Ismael nicht doch zum
    Laufen bringen. ;)

    Dein erster Code-Schnippsel funktioniert leider nicht. Deine beiden anderen
    funktionieren, aber leider nur auf Ebene 1. In den Untermenüs wird leider
    kein aktiver Menüpunkt grün. Hilft das bei Deinen Überlegungen weiter?

    Werde jetzt noch Ismael antworten. Vielleicht sind wir ja schon auf der Ziel-
    geraden. ;)

    Schönen Abend und beste Grüße nach Bonn
    Carsten

    March 23, 2020 at 8:16 pm #1195566
    designbasis

    Hi Ismael,

    thx for your new reply and the informations!

    Yes, I know…the functions.php-update in the backend is not working correctly.
    I’ve got no explanations for that. ;-/ But please, send me the code and I update
    the file manually again per ftp…no problem! Sorry, but at the moment here is
    everything like before…nothing changed.

    The second code-snippets from “Guenni“ works quite good, but not perfect.
    I leave it in the css so have a look for yourself. The first level works but not
    the second level.

    I hope that your both codes do not clash eachother. ;-/
    I’m looking forward to hear from you.

    Best regards
    Carsten

    March 26, 2020 at 6:24 am #1197950
    Ismael

    Hi,

    You can get the updated snippet above.

    // https://kriesi.at/support/topic/burger-mobile-submenu-links-how-can-i-add-a-further-colour-for-the/#post-1194291

    If you can provide a login account for the file server, we’ll try to test the script.

    Best regards,
    Ismael

    March 26, 2020 at 3:01 pm #1198059
    designbasis

    Hi again Ismael,

    thank you for your new reply and the updated function-code!!
    But unfortunately it still doesn’t work.

    Ok, you want a login to the server…look at private content.

    Best regards
    Carsten

    March 27, 2020 at 6:44 am #1198236
    Ismael

    Hi,

    We edited the functions.php file and adjusted the code a bit. We also added this code in the Quick CSS field to change the color of the active child menu item.

    #top #wrap_all #header .av-burger-overlay #av-burger-menu-ul .sub-menu a.current-child-menu-item .avia-menu-text { 
   color: blue;
}

    You can of course change the color as you wish. Here’s how it looks now.

    Screenshot: https://imgur.com/a/LzLv7O3

    Best regards,
    Ismael

    March 27, 2020 at 1:41 pm #1198333
    designbasis

    Hi Ismael,

    thx for your new reply and your effort!

    Yes, it works, but unfortunately only on that menu-item that
    you tried on the screenshot. And this item is also permanent
    active. That’s not correct, isn’t it? And all other submenu-items
    do not react on the new snippet, sorry. Did you test them, too?

    PS: Once again for clarity: I would like every menu item that is
    active to have the special color. So both submenus and main
    menu items.

    I’m looking forward to your new answer.

    Best regards
    Carsten

    • This reply was modified 4 years, 8 months ago by designbasis.
    March 30, 2020 at 2:43 am #1198984
    Ismael

    Hi,

    If you are viewing the 30 Jahre Zenit page, the only active menu items will be the corresponding 30 Jahre Zenit child menu item and the Programme menu item, which is the parent menu item. The active menu item/s should change based on the page that you’re currently viewing.

    Which menu items are you referring to? Do you want to change the color on hover?

    Best regards,
    Ismael

    March 30, 2020 at 8:48 pm #1199193
    designbasis

    Good evening Ismael,

    thx for your new reply! So far so good…I’ll try to explain my wish again.
    Please take a new look at the screenshots. I would like to design the complete
    menu as follows: each active menu item should be coloured white. (screenshot 1)
    And it doesn’t matter whether it is a parent menu item or a child menu item! (screenshot 2)
    And all hovers should also be white! Was this explanation better for your understanding?
    I hope so.
    Colour Scheme for the complete menu:
    —————————————————-
    Every inactive item = #e69d37
    Every active item = white
    Every hover = white
    —————————————————-

    I think next time it will be better not to use a demo template again! What do you think?
    Never mind…;-/ ;-)

    Best regards
    Carsten

    April 2, 2020 at 6:15 am #1199977
    Ismael

    Hi,

    Thank you for the update.

    We used the following css code to change the color of the inactive sub menu items to #e69d37, the active item to #ffffff and the same white color on hover.

    #top #wrap_all #header .av-burger-overlay #av-burger-menu-ul .sub-menu a.current-child-menu-item .avia-menu-text { 
   color: #ffffff;
}

#top #wrap_all #header .av-burger-overlay #av-burger-menu-ul .sub-menu li:hover a .avia-menu-text { 
   color: #ffffff;
}

#top #wrap_all #header .av-burger-overlay #av-burger-menu-ul .sub-menu a {
	color: #e69d37 !important;
}

    Please remove the cache before you check the page.

    Best regards,
    Ismael

    April 2, 2020 at 2:38 pm #1200186
    designbasis

    Hi Ismael,

    thx for your new reply and the new snippets! They working, but
    unfortunately still not perfect in the child-menus. If you click
    there every menu item is coloured white, not only the one which
    was choosed.

    You didn’t say that I should delete the old snippets. Could it be
    that they clash? So, is it maybe better to delete the old ones?
    Or do we still need them for functionality?

    Best regards
    Carsten

    • This reply was modified 4 years, 8 months ago by designbasis.
    April 6, 2020 at 5:03 am #1201123
    Ismael

    Hi,

    Yes, please try to delete the previous css code or just disable them temporarily. Again, don’t forget to toggle or disable the Performance > File compression settings and remove the browser cache after adjusting the css.

    Best regards,
    Ismael

    April 6, 2020 at 10:27 pm #1201396
    designbasis

    Good evening Ismael,

    thank you for your new answer and informations!
    I hope and think that I deleted the previous css code completely and I disabled also
    the complete “File Compression“. But again – it doesn’t helped. ;-/ Maybe I’ve
    overlooked one or two snippets?

    Could you please so kind and have another look by yourself in the backend? Or do
    you have another idea/suggestion? I’m really sorry…I don’t wanna create a “never-
    ending story“…for sure!

    Kind regards
    Carsten

    April 13, 2020 at 8:27 am #1203243
    Ismael

    Hi,

    You’ve actually deleted the most recent modification instead of the older one. We’ve added the css code again in the Quick CSS field. It should work properly now. Please don’t forget to remove the cache prior to checking the page and if you have further questions, try to open a new thread.

    Screenshot: https://imgur.com/a/8tiyv3j

    As you can see in the screenshot above, the active parent/child menu items are white and the other child items are the default orange. They should also change to white on hover.

    Best regards,
    Ismael

    April 14, 2020 at 3:05 pm #1203610
    designbasis

    Hi Ismael,

    thx for your new reply and the informations!

    Really…have I done that? What kind of fool am I? ;-/ Thx again for your new support
    and the correction!

    I really would like to close this thread, but SORRY…your new code works still not
    perfectly. ;-/ Currently the link “30 Jahre Zenit” is directly active if you come
    to the site. And if you click another child-page-link then the new link doesn’t get white.
    Only the hover is everywhere correct…it’s always white. And also the inactive links…
    it’s beeing orange.

    So, there are two things left – the directly active link “30 Jahre…” and that an new active
    child-page-link doesn’t get white. I hope and think that can be not a huge problem further
    for you…fingers crossed!

    Best regards
    Carsten

    April 16, 2020 at 2:44 pm #1204440
    Ismael

    Hi,

    We can’t edit the functions.php file from the Appearance > Editor panel. Please locate the previous script that we provided above and look for this line of code.

    if(href.includes(window.location.pathname)) {
							link.addClass('current-child-menu-item');
						}

    Replace it with:

    if(href == window.location.href) {
							link.addClass('current-child-menu-item');
						}

    Best regards,
    Ismael

  • Author
    Posts
Viewing 30 posts - 1 through 30 (of 38 total)
1 2
  • The topic ‘Burger/Mobile submenu links / How can I add a further colour for the…’ is closed to new replies.