Icon external link

Archive
1

Helo. How can i make an icon only in navigation menu that go to external link like Grav website do with Twitter and Github icon link? Im totally new in this and step by step instruction would be nice. Thank you

2

The icon-only links on the getgrav website are done simply via modifying the templates/partials/navigation.html.twig file in the theme. If you do modify the core antimatter theme, it’s advisable to first create your own theme, and extend antimatter:

After you have that setup, you can provide just this new navigation.html.twig file in the templates/partials folder:

<ul class="navigation">
{% if config.themes.antimatter.dropdown.enabled %}
        {{ _self.loop(pages) }}
    {% else %}
        {% for page in pages.children %}
            {% if page.visible %}
                {% set current_page = (page.active or page.activeChild) ? 'active' : '' %}
                <li class="{{ current_page }}">
                    <a href="{{ page.url }}">
                        {% if page.header.icon %}<i class="fa fa-{{ page.header.icon }}"></i>{% endif %}
                        {{ page.menu }}
                    </a>
                </li> 
            {% endif %}
        {% endfor %}
    {% endif %}
    <li><a href="http://learn.getgrav.org">Learn</a></li>
    <li><a href="http://twitter.com/getgrav"><i class="fa fa-twitter"></i></a></li>
    <li><a href="https://github.com/getgrav/grav"><i class="fa fa-github"></i></a></li>
</ul>

As you can see after the for loop, there’s just some simple links.

BTW, I do want to add a more flexible solution into the default antimatter that can take an array of link from site.yaml and loops over those and outputs them. You could do this also, but it’s more advanced.

3

Actually i’ve added this to Antimatter. See this commit:

And also the instructions in the README.md:

4

Nice i update my works :smiley:

5

I see now I have to add the link just before the end of the line. And I also understand that you have made some update with it. This is great.Thanks

6

For some reason I manage to add ‘open in new window’ feature to that link. I just add target="{{ mitem.target }}"
to this line : .
And in site.yaml, I just add “target: _blank” (without quote) to this :
- icon: twitter
url: http://twitter.com/getgrav
target: _blank
You might want to modify this a bit so it will be more understandable to new user. Hope this help.

7

The problem is that the target attributes is not valid in HTML5:
http://www.w3schools.com/tags/att_link_target.asp

8

I see. Thanks for the info

9

I am a little wasted here. I am using the skeletton onepage theme and done the inheritance. Now I have the following problem, when I follow the instructions like written by rhukster, I do not have the icon-links in the normal navigation, if i open the window at fullwidth. (Screen1)

But when I small down the window and the “mini-menu” comes, I do have the icon-links but not the “normal” navigation. (Screen2)

Second question. If I would like to set an (external) link to the features-page (logo and text), how do I manage that? Bildschirmfoto 2015-04-29 um 23 Bildschirmfoto 2015-04-29 um 23

10

The menu on the left is the main menu as created by your page structure. The menu you see in the onepage menu is the on-page menu that lets you jump to sections of that page.

You can turn off the on-page menu by setting the onpage_menu header option to false in your modular.md file.

Also you might want to look at this thread: http://getgrav.org/forum#!/theme-development:grav-one-page-antimatter-th as we discussed the same things there.