Keystone Theme - how do I add some additional menu items?

I am using the Keystone Theme but struggling to work out how to add external links to the top bar similar to those of the sign-in and register button.

Anyone have any idea where to add them?

Comments

  • charrondevcharrondev Application Developer (PHP, JS) Montreal Vanilla Staff

    The next release will have an easy way to add these without any particular theming knowledge.

    Until then this requires a custom theme.

    xorg
  • R_JR_J Cheerleader & Troubleshooter Munich Moderator

    By now Keystone doesn't play well with the custom_menu: on mobile it is in the hamburger menu and in desktop view the menu is hidden. It would be great if this can be changed so that using the custom_menu, the preferred way to add menu items would be possible again.

    But having something more flexible, like "exposing" the custom_menu to the dashboard would also be great. Doing this via a theme would be wasted since this would restrict such a feature to only that theme. How about making that a feature of the pockets plugin? To me that sounds like the best match: pockets are there to insert any kind of content at many flexible places, so why not also add content into the menu with pockets?


  • edited March 31

    Hi all, I've noticed this problem too, I've tried to solve it with this simple html and css added using an addon:

    This goes just under the closing of desktop head in html:

    <div class="Header-top-base">
      <div class="Header-top">
        <div class='Top-int-row'>
          <a href='/categories' class='Navigation-link Selected'>
            Categorie
          </a>
        </div>
        <div class='Top-int-row'>
          <a href='/discussions' class='Navigation-link '>
            Discussioni
          </a>
        </div>
        <div class='Top-int-row'>
          <a href='/activity' class='Navigation-link '>
            Attività
          </a>
        </div>
        <div class='Top-int-row'>
                <a href='your blog link' class='Navigation-link sub-menu'>
            Blog
          </a>
        </div>
        <div class='Top-int-row'>
                <a href='your shop link' class='Navigation-link sub-menu'>
            Shop
          </a>
        </div>
      </div>
    </div>
    

    And this is the necessary css to let all work fine

    .Header-top {
      background-color: #00aff2;
      align-self: flex-start;
      align-items: flex-start;
      display: flex;
      margin: 0 auto;
      max-width: 1224px;
      padding-right: 18px;
    }
    .Header-top-base {
      background-color: #00aff2;
    }
    .Top-int-row {
      float: left;
    }
    
  • R_JR_J Cheerleader & Troubleshooter Munich Moderator

    @Lorenzo_Prn i've edited your comment to make it more readable: if you mark some lines, you can click on the paragraph symbol on the left and you get an option to mark those lines as a code block


    Lorenzo_Prn
  • I would also love for Pockets to be able to accept some kind of dynamic code, Smarty at least. Then all our issues would be half gone ... :)

Sign In or Register to comment.