'Masthead compact' v1.2 page not responsive

[elisabetb]

Refrence: /meta-patterns/masthead-compact

Hi, we have used the masthead-compact header, but after updating to the new version 1.2 we realised that the page is not responsive when we resized the window. Is this something you are still working on?

[khawkins98]

This should be responsive. Here's a sample page: https://ebiwd.github.io/EBI-Pattern-library/sample-site-v1.2/boilerplate/search-results.html

Is your page somewhere I can have a look at?

[elisabetb]

So, without using the compact header, the resizing is responsive like this http://www.ebi.ac.uk/gxa/home . Note that when you resize the navigation links collapse into "Also in this section" dropdown. But when we use the compact header, that doesn't happen and all the navigation links are visible (please see the attached screenshot)

compact-header.pdf

[alfonsomunozpomer]

@khawkins98 We have disabled it in production for the time being. You can see that the menu items overflow into more than one line, whereas the regular masthead groups the overflowing items into a drop-down select. See image below for comparison.

[elisabetb]

We will post it online

[elisabetb]

Here you can see the page code, instead of the screenshot https://elisabetb.github.io/Compactheader/index.html

[khawkins98]

So the "responsive" dropdown menu expects the ul classes to be dropdown menu float-left. It's the float-left you're missing.

And some of you responsive grid classes might also be causing issues, here's the structure I'd suggest:

<div class="masthead-inner row expanded">
    <div class="class="medium-7 large-4 columns"" id="local-title">
        <a href="http://localhost:8080/gxa/home/" title="Back to Expression Atlas homepage">
            <h1>Expression Atlas</h1>
        </a>
    </div>

    <div class=" medium-5 large-push-5 large-3 columns">
        <form id="local-search" name="local-search" method="get" action="http://localhost:8080/gxa/search">
            <fieldset>...</fieldset>
        </form>
    </div>

    <nav class="large-pull-3 large-5 columns">
        <ul class="dropdown menu float-left" data-description="navigational">
            <li>...</li>
        </ul>
    </nav>
</div>

I've also moved the ul to come last. In general I think you'll want it that way, and then use foundation's push/pull classes to rejig for large screen.

Screen grab after in-browser editing (I manually deleted the second search box glitch):

[elisabetb]

Ok thanks, I will try to change it as you propose and let you know

Thank you very much