Closed elisabetb closed 7 years ago
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?
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)
@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.
We will post it online
Here you can see the page code, instead of the screenshot https://elisabetb.github.io/Compactheader/index.html
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):
Ok thanks, I will try to change it as you propose and let you know
Thank you very much
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?