OllieWP / ollie

A finely-crafted WordPress block theme by Mike McAlister
https://olliewp.com
GNU General Public License v3.0
370 stars 49 forks source link

Active Navigation menu #139

Closed DecimusBurton closed 4 months ago

DecimusBurton commented 9 months ago

I think this might be a feature request rather than a bug report - I think its also a current failing of the WP block themes.

We currently use Astra Pro. We tried to replicate our site using the Ollie block theme.

Currently the ONE big deal breaker is the navigation block cannot be customised to highlight the active page nor can a hover be added as a visual cue as we do currently with Astra Pro.

The menu item for the current active page is not even underlined on the menu to give a visual cue of the page you are on. 

Nor is there a way to change the colour of the menu items. 

With Astra Pro for instance you can define the the Primary Menu and the Sub-menu menu colours and you can define a the default menu colour, the hover colour and the active page menu colour. 

A work-around was to load the plugin Twentig - this is only a partially fix.

Outside of Astra Pro we could achieve similar with css:

/* Highlight parent page link when on child page */ .current_page_parent >a, .current-page-ancestor >a, .current-menu-parent >a, .current-page-ancestor >a, .current-menu-item >a { color: #990000 !important; }

According to @zoonini a WordPress Support Moderator: in Full Site Editing / block themes .current-menu-parent or ancestor is not automatically assigned yet - the workaround is to use Parent ID"

I hope this is fixed in WP6.5

We are looking forward to making the jump from a classic theme to a block theme.

Peter

mikemcalister commented 8 months ago

Hi there,

Thanks for the feedback and apologies for the delayed response. Yeah, unfortunately the navigation block is really weak right now. They seem to be always working on it, but the changes are very incremental.

There are some things we can do in Ollie, like making the link underlined when you are on the active page. But it won't be super customizable just yet. We're about to release an update to the theme ahead of the Ollie Pro release and I'll be sure to add an active state in that release.

DecimusBurton commented 8 months ago

Mike

I've got a partial fix but it does not work on mobile

Take a look here: https://www.staging3.bajanthings.com/

This is my main site. https://www.bajanthings.com/

I added some css into the navigation

/ Highlight parent page link when on child page see: https://stackoverflow.com/questions/15603950/wordpress-highlight-the-parent-menu-item-when-child-menu-item-page-is-selected and https://www.wpexplorer.com/highlighting-wordpress-menu/ / .current_page_parent >a, .current-page-ancestor >a, .current-post-ancestor

a, .current-menu-item >a { color: #990000 !important; }

/ suggested by Brian Coords who suggested using the new CSS :has() selector - see: https://www.briancoords.com/fse-navigation-block-woes/ / .wp-block-navigation-item:has(.current-menu-item) { color: #990000 !important; }

The above works for the desktop version. If a sub-menu item is chosen then the parent menu item is also highlighted in the desktop primary Nav location. It does not work, yet, with the mobile and tablet hamburger menu. Where the hamburger icon is used, sub-menu is highlighted but parent menu item is not highlighted.

I'm looking forward to 6.5. My feeling is the woefully weak navigation block is holding block themes back

Peter

Peter Burton 巴培德 email: @.*** UK mobile: 0787 261-0026 HK mobile: 9315-1181

Peter this November is supporting Movember for the 12th year https://movember.com/m/decimus?mc=40

skype: decimus_burton

UK address: Silver Trees, Warren Drive, Kingswood, Surrey, KT20 6PT, UK.

Email Disclaimer: The information in this email is confidential and may be legally privileged. It is intended solely for the addressee.

On Tue, 5 Mar 2024 at 20:42, Mike McAlister @.***> wrote:

Hi there,

Thanks for the feedback and apologies for the delayed response. Yeah, unfortunately the navigation block is really weak right now. They seem to be always working on it, but the changes are very incremental.

There are some things we can do in Ollie, like making the link underlined when you are on the active page. But it won't be super customizable just yet. We're about to release an update to the theme ahead of the Ollie Pro release and I'll be sure to add an active state in that release.

— Reply to this email directly, view it on GitHub https://github.com/OllieWP/ollie/issues/139#issuecomment-1979602831, or unsubscribe https://github.com/notifications/unsubscribe-auth/ABO22AJGZGBCZAGIFDPME4LYWYU3HAVCNFSM6AAAAABDIPK7QCVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMYTSNZZGYYDEOBTGE . You are receiving this because you authored the thread.Message ID: @.***>

mikemcalister commented 4 months ago

These issues have been fixed and you should now see an active underline on the current page.

DecimusBurton commented 4 months ago

OK I will turn off the bit of css I added

Peter Burton 巴培德 email: @.*** UK mobile: 0787 261-0026

- Peter this November is supporting Movember for the 13th year https://movember.com/m/decimus?mc=40

skype: decimus_burton

UK address: Silver Trees, Warren Drive, Kingswood, Surrey, KT20 6PT, UK.

Email Disclaimer: The information in this email is confidential and may be legally privileged. It is intended solely for the addressee.

On Wed, 10 Jul 2024 at 20:20, Mike McAlister @.***> wrote:

These issues have been fixed and you should now see an active underline on the current page.

— Reply to this email directly, view it on GitHub https://github.com/OllieWP/ollie/issues/139#issuecomment-2221256779, or unsubscribe https://github.com/notifications/unsubscribe-auth/ABO22AKDZ5AM4C3FBXEL4FDZLWCQFAVCNFSM6AAAAABDIPK7QCVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDEMRRGI2TMNZXHE . You are receiving this because you authored the thread.Message ID: @.***>