Symfony NelmioAPIDocBundle: Remove Logo Header?

Question

Is it possible to remove the logo header shown in the web-based output of NelmioApiDocBundle? And if so, how?

I would like to include the output of this endpoint (/api/doc if you're using the default settings) in an existing website. However, that site already has a header, and adding a second header would be a poor user experience IMHO. But I can't find any place in the documentation that describes how to exclude this gloriously 1990s-style piece of web design.

I've provided a screenshot of the default config below, which is what I get when viewing the docs in a tool like Insomnia. As you can see, the green header is covering the page as it scrolls.

I think you could use `CSS` or `javascript` if you want to hide this header. — Lounis, Oct 16 '21 at 18:07

score 5 · Accepted Answer · answered Oct 17 '21 at 23:05

Yes, you can do it.

You should override bundle template, say steps bellow :

1 - Create template file in 'templates/bundles/NelmioApiDocBundle/SwaggerUi/index.html.twig'

2 - Put the content bellow :

{% extends '@!NelmioApiDoc/SwaggerUi/index.html.twig' %}

{% block header %}
    <a style="text-decoration: none;" id="logo" href="#" target="_blank">
        <h1 style="color: black">You personal title</h1>
    </a>
{% endblock %}

That's it , we done

score 0 · Answer 2 · answered Nov 03 '21 at 22:35

I've now tested the answer provided by @Abdelhak-ouaddi, and while it's correct, I realize that I didn't ask the question clearly enough to get the answer I needed. The provided answer does work for changing the CONTENTS of the green header, but it doesn't remove the header entirely.

See this page at the NelmioApiDocBundle GitHub page for details on how to customize the twig template. The actual default template is located in the repo here.

What I found is that you can easily override the {% header %} twig block to change the contents of the header as the accepted answer states, but since the {% header %} tags are INSIDE the <header> HTML tags, doing this can't remove the header entirely.

In order to remove the ENTIRE header, you need to follow the steps in the accepted answer... but instead of just overwriting the {% header %} block, paste in the entire contents of the index.html.twig file. Then, completely delete the <header> HTML tags and everything inside them (including the {% header %} twig tags).

As a bit of extra credit: removing the header entirely leaves you with a large margin above the page title. You can get rid of that by adjusting the <body> tag in your new index.html.twig file to:

<body style="margin: 0px;">

I'm sure there's a cleaner way to do that, but... that's for another ticket.

score 0 · Answer 3 · answered Mar 02 '23 at 15:57

With the same method as Abdelhak ouaddi, you can get ride of the full sticky header, using CSS.

Create a file in 'templates/bundles/NelmioApiDocBundle/SwaggerUi/index.html.twig' with the content below:

{% extends '@!NelmioApiDoc/SwaggerUi/index.html.twig' %}

{% block stylesheets %}
    {{ parent() }}
    <style>
        body { margin: 0}
        header { display:none; }
    </style>
{% endblock %}

Symfony NelmioAPIDocBundle: Remove Logo Header?

3 Answers3