A client requested his website to have the main navigation menu on both the top and the bottom of each page. The former was implemented by enabling the "Main menu" option in the theme settings (closing tags won't be included here, to save space):

<div id="navigation">
  <nav id="main-menu" role="navigation">
    <h2 class="element-invisible">Main menu</h2>
    <ul class="links inline clearfix">

The duplicate menu on the bottom was implemented by placing the "Main menu" block in the footer region:

<div id="block-system-main-menu" class="block block-system block-menu first odd" role="navigation">
  <ul class="menu clearfix">

I hope to use this module for both instances of the menu. On the module's configuration page (admin/config/user-interface/tinynav), I set the CSS / jQuery selector field to "nav#main-menu ul.links, #block-system-main-menu ul.menu", and left the other fields to their default values.

When the browser window is made smaller appropriately, the top menu works as expected (i.e., the separate menu labels disappear, replaced by the Tinynav list box), but the bottom menu shows not only the Tinynav list box, but also the separate menu labels as before.

I tried several ideas to try to figure out what is going wrong, but none of them worked:

  • reversed the order of the CSS selectors on that configuration page (i.e., "#block-system-main-menu ul.menu, nav#main-menu ul.links")
  • disabled the "Main menu" in the theme
  • removed the ul classes from the CSS selectors

Anyone have any suggestions?

Comments

mjross’s picture

mjross commented

I should have mentioned that the CSS code added by the module appears to be correct:

<style>.tinynav{display:none;}nav#main-menu ul.links,#block-system-main-menu ul.menu{display:block;}
</style>
<style media="all and (max-width:853px)">.tinynav{display:block;}nav#main-menu ul.links,#block-system-main-menu ul.menu{display:none;}
</style>
btopro’s picture

btopro commented
Priority: Major » Normal

hmm... could you possibly add a custom media query to account for this issue in not hiding the 2nd one?

mjross’s picture

mjross commented

Thanks for your reply. The theme is based upon the latest version of Zen, with a single custom CSS file added (which I named _custom.css). In that file, all of the media queries are commented out; so the only media queries should be from Zen and from this Tinynav module. When the browser window is made smaller than 853 pixels, and I inspect the duplicate menu on the bottom, I see that the Tinynav module has added:

media="(max-width: 853px)" {
#block-system-main-menu ul.menu {
display: none;
}
}

But that CSS is overridden by some styling in my custom stylesheet:

#block-system-main-menu ul.menu {
display: inline;
[etc.]

Those selectors have the same specificity, unless the media query changes the specificity (I'm not sure). Assuming it doesn't, I then checked the order in which the CSS is appearing in the rendered HTML. My custom stylesheet appears first:

@import url("http://example/sites/default/themes/dougwarren/css/_custom.css?mma2wh");</style>

Later the Tinynav code appears:

<script src="http://example/sites/all/modules/tinynav/tinynav-fork.js?mma2wh"></script>
<script src="http://example/sites/all/modules/tinynav/tinynav-drupal.js?mma2wh"></script>

Later there is some jQuery.extend() code containing:

"sites\/all\/modules\/tinynav\/tinynav-fork.js"

Shouldn't the Tinynav rule override my custom one, since the former appears after the latter?

btopro’s picture

btopro commented
Issue summary: View changes
Status: Active » Needs review

commit http://cgit.drupalcode.org/tinynav/commit/?id=74ede77 should resolve this potential conflict. This pushes the inline css all the way to the bottom of the theme layer so it's the LAST thing that gets added. this way if selectors are the same, tinynav's should win this race condition now.

mjross’s picture

mjross commented

I appreciate the patch. The project in question was a while ago, and no longer on my local web server, so I can't easily verify the patch. But I find have an opportunity to use this module again, I will. Thank you.