problem with active menu item #397
Assignees
Comments
|
Hi @benthien are you putting the active class on the li or the a element as I believe it should be on the li. Hope it's that simple otherwise will delve deeper. Cheers |
|
I put the class on the link.
George
George Benthien
511 Savoy Street
San Diego, CA 92106
619-224-4317
Sent from TypeApp
…On Apr 8, 2019, 5:02 PM, at 5:02 PM, Garrett Hyder ***@***.***> wrote:
Hi @benthien are you putting the active class on the li or the a
element as I believe it should be on the li. Hope it's that simple
otherwise will delve deeper. Cheers
--
You are receiving this because you were mentioned.
Reply to this email directly or view it on GitHub:
#397 (comment)
|
|
Thanks for confirming @benthien moving the active class to the li element should resolve your issue. Let us know if you have any other issues. Cheers |
|
You misunderstood my reply. I always had the active class on the link. My issue hasn't been resolved.
George Benthien
511 Savoy Street
San Diego, CA 92106
619-224-4317
Sent from TypeApp
…On Apr 8, 2019, 8:05 PM, at 8:05 PM, Garrett Hyder ***@***.***> wrote:
Thanks for confirming @benthien moving the active class to the li
element should resolve your issue. Let us know if you have any other
issues. Cheers
--
You are receiving this because you were mentioned.
Reply to this email directly or view it on GitHub:
#397 (comment)
|
|
Hi @benthien if your active class is on the link move it to it's parent |
|
The various items on the top bar are in a list beginning with <ul>. On
One of the list items I have <li class="active"> with an <a> link inside. I have used this many times with foundation and before it highlighted the item on the top bar. That isn't happening in JointsWP.
George Benthien
511 Savoy Street
San Diego, CA 92106
619-224-4317
Sent from TypeApp
…On Apr 9, 2019, 9:10 AM, at 9:10 AM, Garrett Hyder ***@***.***> wrote:
Hi @benthien if your active class is on the link move it to it's parent
<li>. The Foundation CSS expects it on the <li> and not the link <a>
element. Hope that clarifies.
--
You are receiving this because you were mentioned.
Reply to this email directly or view it on GitHub:
#397 (comment)
|
|
Thanks @benthien looking at my site the .active css chain is |
|
Below is the actual code I am using. The only page that uses WordPress is the blog. This code produces a top-bar for medium and above and an off-canvas menu for small. I use the same code in my other non-WordPress pages except that the links use relative addresses rather than absolute. The active class on blog produces the right result in the off-canvas menu, but produces no highlighting on the top-bar. Other than that everything works perfectly. In this case I can produce the highlighting on blog using css, but foundation normally does this automatically.
<div class="data-sticky-container" data-sticky-container>
<div class="sticky" data-sticky data-sticky-on="small" data-options="marginTop: 0;">
<div class="title-bar" data-responsive-toggle="widemenu" data-hide-for="medium">
<div class="title-bar-left">
<button class="menu-icon" type="button" data-open="offCanvasLeft"></button>
<span class="title-bar-title">Menu</span>
</div>
<div class="title-bar-right"></div>
</div>
</div>
</div>
<!—off-canvas menu for small-->
<div class="off-canvas position-left" id="offCanvasLeft" data-off-canvas>
<ul class="vertical menu nested" id="top-list">
<li><a href="http://ladle/index.html">Home</a>
</li>
<li class="menu-text">About
<ul class="nested menu vertical">
<li><a href="http://ladle/ministries.html">Ministries</a></li>
<li><a href="http://ladle/times.html">Times</a></li>
<li><a href="http://ladle/lhttp://ladle/location.html">Directions</a></li>
<li><a href="http://ladle/LadleHistory.html">History</a></li>
<li><a href="http://ladle/LadleStories.html">Stories</a></li>
</ul>
</li>
<li><a href="http://ladle/volunteers.html">Volunteer</a></li>
<li class="menu-text">Donate
<ul class="nested menu vertical">
<li><a href="http://ladle/DonateMoney.html">Donate Money</a></li>
<li><a href="http://ladle/DonateGoods.html">Donate Goods</a></li>
</ul>
</li>
<li class="active"><a href="http://ladle-blog">Blog</a></li>
<li class="menu-text">Contact
<ul class="nested menu vertical">
<li><a href="http://ladle/Attn_Ladle.php">Contact Us</a></li>
<li><a href="http://ladle/Attn_Ladle1.php">Join Prayer Team</a></li>
</ul>
</li>
<li>
<a href="http://ladle/assets/zoom_search/search.php">Search</a>
</li>
</ul>
</div>
<!-- top-bar menu for 'medium' and up -->
<div data-sticky-container>
<div id="widemenu" class="top-bar" data-sticky data-options="marginTop:0;">
<div class="top-bar-left">
<ul class="menu dropdown" data-dropdown-menu data-close-on-click-inside="false">
<li><a href="http://ladle/index.html">Home</a></li>
<li><a href="#">About</a>
<ul class="menu">
<li><a href="http://ladle/ministries.html">Ministries</a></li>
<li><a href="http://ladle/times.html">Times</a></li>
<li><a href="http://ladle/lhttp://ladle/ocation.html">Directions</a></li>
<li><a href="http://ladle/LadleHistory.html">History</a></li>
<li><a href="http://ladle/LadleStories.html">Stories</a></li>
</ul>
</li>
<li><a href="http://ladle/volunteers.html">Volunteer</a></li>
<li><a href="# ">Donate</a>
<ul class="menu">
<li><a href="http://ladle/DonateMoney.html">Donate Money</a></li>
<li><a href="http://ladle/DonateGoods.html">Donate Goods</a></li>
</ul>
</li>
<li class="active"><a href="http://ladle-blog">Blog</a></li>
<li><a href="#">Contact</a>
<ul class="menu">
<li><a href="http://ladle/Attn_Ladle.php">Contact Us</a></li>
<li><a href="http://ladle/Attn_Ladle1.php">Join Prayer Team</a></li>
</ul>
</li>
<li>
<a href="http://ladle/assets/zoom_search/search.php">Search</a>
</li>
</ul>
</div>
</div>
</div>
From: Garrett Hyder <notifications@github.com>
Sent: Tuesday, April 9, 2019 5:02 PM
To: JeremyEnglert/JointsWP <JointsWP@noreply.github.com>
Cc: benthien <benthien@cox.net>; Mention <mention@noreply.github.com>
Subject: Re: [JeremyEnglert/JointsWP] problem with active menu item (#397)
Thanks @benthien <https://github.com/benthien> looking at my site the .active css chain is .menu .active > a. So the .active class is on the li but there's also a .menu class on the ul. Is the menu class present in your build? Cheers
—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub <#397 (comment)> , or mute the thread <https://github.com/notifications/unsubscribe-auth/ALf2hdGIAFBGJlwTexJ_6u8bxLZzJEz2ks5vfSnbgaJpZM4cjKm6> . <https://github.com/notifications/beacon/ALf2hWtzPAu8Lau78ngPuh5Mjaf7__aKks5vfSnbgaJpZM4cjKm6.gif>
|
|
Thanks @benthien that's definitely odd, your markup looks right. |
|
I inspected the blog element on the top-bar. It was obvious that the active color setting was being overridden by another css element. Since the code looked right, I figured that I must have entered a wrong setting in _settings.scss. I reinstalled the JointsWP files and slowly made changes. I made changes in the _settings file one by one and didn’t make any changes in the dropdown menu section. I was able to get the result I wanted, including active element highlighting, without any changes in the drop down menu. Here are the settings I originally made in _settings
$dropdownmenu-background: $black;
$dropdownmenu-submenu-background: $black;
$dropdown-menu-item-color-active: $white;
$dropdown-menu-item-background-active: get-color(primary);
Leaving these settings at their original values we have
$dropdownmenu-background: null;
$dropdownmenu-submenu-background: $white;
$dropdown-menu-item-color-active: get-color(primary);
$dropdown-menu-item-background-active: transparent;
I don’t understand the original settings, but they work.
Thanks for your help
George
From: Garrett Hyder <notifications@github.com>
Sent: Thursday, April 11, 2019 4:49 PM
To: JeremyEnglert/JointsWP <JointsWP@noreply.github.com>
Cc: benthien <benthien@cox.net>; Mention <mention@noreply.github.com>
Subject: Re: [JeremyEnglert/JointsWP] problem with active menu item (#397)
Thanks @benthien <https://github.com/benthien> that's definitely odd, your markup looks right.
After you made the scss change did you npm run build to compile the SCSS to CSS?
Also when you inspect the active element that should be highlighted (inspect the .active > a element) is there any CSS for the .active class on the element?
—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub <#397 (comment)> , or mute the thread <https://github.com/notifications/unsubscribe-auth/ALf2hRKk0ZFYIYBxoYMx3djy1sPHNBWHks5vf8nvgaJpZM4cjKm6> . <https://github.com/notifications/beacon/ALf2hUJvTBBHMYyugsrLQsjCB94AQvuTks5vf8nvgaJpZM4cjKm6.gif>
|
garretthyder
pushed a commit
that referenced
this issue
Apr 14, 2019
…6.4.0 onwards This addresses issues found in #397 where the $dropdown-menu-item-background-active didn't seem to apply. But the actual issue is Foundation now uses .is-active and not .active. To preserve back-compat for other devs I've left .active present.
|
Thanks for that @benthien testing on a clean install I was able to reproduce your issue and found there's actually a JointsWP issue in place right now. It seems in Foundation 6.4.0 the active class was renamed is-active but active was still supported; The current foundation docs support this; https://foundation.zurb.com/sites/docs/menu.html#active-state In JointsWP it seems we're still applying 'active' instead of 'is-active'; I've updated this with back-compat in mind by leaving the 'active' class and simply introducing the 'is-active' class as well. Give it a try and let me know if that helps with your styling. @JeremyEnglert can you take a look as well my PR is in Introduce .is-active to the active nav class as used from Foundation … #398. Thanks |
|
If I leave $dropdown-menu-item-background-active at its default value of transparent in _settings.scss, class=”active ” produces the desired highlighting. If I inspect the active item on the top-bar, it is getting the background color from the css selector
.menu .active>a. However, the behavior of is-active is different. In this case it gets the background color for the active item from
.dropdown.menu>li.is-active>a which is by default transparent. I can change this by setting $dropdown-menu-item-background-active to get-color(primary). That produces the correct background on the active item, but also shows this background on any other dropdown menu item that I hover over. I think this is a foundation issue and not a jointsWP issue as I see similar behavior on non-wordpress pages.
George Benthien
From: Garrett Hyder <notifications@github.com>
Sent: Sunday, April 14, 2019 3:31 PM
To: JeremyEnglert/JointsWP <JointsWP@noreply.github.com>
Cc: benthien <benthien@cox.net>; Mention <mention@noreply.github.com>
Subject: Re: [JeremyEnglert/JointsWP] problem with active menu item (#397)
Thanks for that @benthien <https://github.com/benthien> testing on a clean install I was able to reproduce your issue and found there's actually a JointsWP issue in place right now.
It seems in Foundation 6.4.0 the active class was renamed is-active but active was still supported;
"Menus now use is-active instead if active for active state. The old active works but is deprecated and will be removed."
Release Notes - https://github.com/zurb/foundation-sites/releases/tag/v6.4.0
The current foundation docs support this;
"Add the class .is-active to any
* to create an active state. You could apply this server-side to mark the active page, or dynamically with JavaScript."
https://foundation.zurb.com/sites/docs/menu.html#active-state
In JointsWP it seems we're still applying 'active' instead of 'is-active';
https://github.com/JeremyEnglert/JointsWP/blob/master/functions/menu.php#L84-L91
I've updated this with back-compat in mind by leaving the 'active' class and simply introducing the 'is-active' class as well.
Give it a try and let me know if that helps with your styling.
@JeremyEnglert <https://github.com/JeremyEnglert> can you take a look as well my PR is in #398 <#398> .
Thanks
—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub <#397 (comment)> , or mute the thread <https://github.com/notifications/unsubscribe-auth/ALf2hZMLilDnbqsdyJObOjkjz3T041M5ks5vg6wJgaJpZM4cjKm6> . <https://github.com/notifications/beacon/ALf2hQdCwGjmk8KQz4_smfWAA6z_b2Ydks5vg6wJgaJpZM4cjKm6.gif>
|
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
I inserted code in header.php that produces a top bar for medium and higher and an offcanvas menu for small devices. It works fine except the active menu item is not highlighted. I put class="active" on the menu item and made the following changes in _settings.scss
$dropdown-menu-item-color-active: $white;
$dropdown-menu-item-background-active: get-color(primary);
I made similar changes for the offcanvas menu and that works fine.
The text was updated successfully, but these errors were encountered: