Add custom css class to navigation item of navigation block

  • When I look in my navigation block, I see code like this:

    <!-- wp:navigation-link {"label":"Donate","opensInNewTab":true,"url":"https://www.paypal.com/donate?hosted_button_id=myid","kind":"custom"} /-->

    How do I add a custom CSS class called my-custom-class to this item so that the eventual html element looks something like this

    <li class="my-custom-class ...etc..."><a><span></span></li>
Viewing 2 replies - 1 through 2 (of 2 total)

  • Your first bit of code is the json, you can’t edit that.

    You can add custom css to your menu items under Menus –> Screen Options –> CSS

    https://www.greengeeks.com/tutorials/add-a-custom-css-class-to-wordpress-menus/

    @corrinarusso, you didn’t understand the question. The matter is about navigation blocks, not about the old navigation menus.

    @evermight, when working with Gutenberg blocks (in visual editor) it’s important to always keep the left list opened to fully understand the current element you are working with. So, select your element on the left panel and, on the right panel, look for the “Advanced” section, then for “Additional CSS Class”. There’s where you should assign your custom classes.

    Sorry, I would use images to clearify but they are not allowed in the post.

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Add custom css class to navigation item of navigation block’ is closed to new replies.