Create Menu in Structure.

Place menu as a block where you need it and configure it in "Blocks Layout"

Here's the CSS: (Note: I had to save the css directly to the Gin styles.css for it to work. It would not work in my custom theme)

#block-YourMenuMachineName > ul{
  display: flex;
  justify-content: center;
  list-style-type: none;
  margin-top: 50px;
  margin-bottom: 25px;
  padding: 0;
  overflow: hidden;
  background-color: #333333;
  width: 100%;

Case use: We had a form that was a memory hog so it took a long time to load the next step. Users kept clicking the Next button which was really a "Submit" button that created a user account, so we had duplicate user accounts being made.
So this solution will disable the button, change the test of the button to "Processing" so users will not keep clicking on it. :)

Your JS file

Mine is in my custom themes folder in a JS sub-folder with the title scripts.js.

1. After saving a new content item entity of type Event
2. User has role(s)

Parameters: user: @user.current_user_context:current_user, roles: [reg_admin], operation: AND

3. Page redirect

Parameters: url: http://yoursite.site/product/add/webinar?destination=/node/{{node.nid}}/products

Token is {{node.id}}

Basic GET example

URL: http://example.com/jsonapi/node/article/{{article_uuid}}

Response

HTTP 200 response. The response body contains the JSON:API object of a single article node, including attributes, relationships, and links.

The expressions:

outputs('Get_file_content_using_path')?['body']['$content-type']

outputs('Get_file_content_using_path')?['body']['$content']

The Html for the body:

<img src="data:@{outputs('Get_file_content_using_path')?['body']['$content-type']};base64,@{outputs('Get_file_content_using_path')?['body']['$content']}" />

#block-cart .cart-block--contents {

  width: 300px;

  background: white;

  color: black;

  font-size: 14px;

  border: #033558 3px solid;

}

#block-cart .cart-block--contents__inner {

  padding: 10px;

}

Spaces the columns

#block-cart .cart--cart-block .cart-block--contents td{

padding-left: 1em;

}

Separates the items in the cart

<div class="logout-myaccount-page">
      {% set url = url('<current>') %}
    
        {% if (logged_in) and 'participant' in url|render|render %}
          <ul>
            <li>{{ link('My Account', 'route:user.well-known.change_password') }}</li>
            <li>{{ link('Logout', 'route:user.logout') }}</li>
          </ul>
          {% elseif (logged_in) and 'edit' in url|render|render %}
          <ul>

 /*Upgrade Button for view*/
      if($statuses['floater']) {
        $options = ['absolute' => TRUE];
        $url2 = \Drupal\Core\Url::fromRoute('entity.node.canonical', ['node' => 67], $options);
        $url2->setOptions(['attributes' => ['class' => ['btn']]]);
        $upgradebut = Link::fromTextAndUrl(t('Upgrade'), $url2);
      }

Creates a button

Case use:

{% if logged_in %}
{{ link('Logout', 'route:user.logout') }}
  {% else %}
  {{ link('Login', 'route:user.login') }}
  {% endif %}

user.register:

path: '/user/register'

defaults:

_entity_form: 'user.register'

_title: 'Create new account'

requirements:

_access_user_register: 'TRUE'

user.logout:

path: '/user/logout'

defaults:

The code in my template file. (Page.html.twig)

<div class="login-logout">
{% if logged_in %}
{{ link('Logout', 'route:user.logout') }}
  {% else %}
 {{ link('Login', 'route:user.login') }}
  {% endif %}
  </div>

My css to make my link display where and how I want it