vstemen's picture

Hi. I was preparing to file this as a bug report but I thought I would try here first just in case I am overlooking something silly.

In the process of experimenting with creating a Backdrop theme from scratch, I have encountered a strange issue.

If I float the header menu to the right, it quits working on all sub-pages. When logged in, the My account and Log out links are dead and when not logged in, the Login link is dead. Hover has no effect and they do nothing when I click on them. It only works on the front page.

I had a similar problem with another theme, where I tried various layouts but it did not matter which layout. I thought at the time it was a theme problem.

So, for testing, to try to narrow down the cause, I created a completely empty theme with only the following CSS.

  .header-menu {
          float: right;
      }

So other than that, the only CSS and layout code being applied is coming from core and the layout system.

I am not overriding anything.

If I place the Primary navigation block above the Header block in the HEADER region or if I move the Primary navigation out of the HEADER and into another region, such as TOP, it starts working. Also, with the Primary navigation moved out, if I add a Search block under the Header block, it also disables the header menu.

I'm running Backdrop 1.10.1
I have tested on both Firefox and Chrome with the same result.

I can make an external test site available for testing if needed.
I remembered after writing this that I created an issue earlier this week about a similar problem.

Broken searchbox using Bartik them #3278

I thought at the time that it was a Bartik bug but these new tests indicate it is something else in the core layout code.
 

Accepted answer

My guess is your CSS change means that some other element is covering your menu links. Nothing is dead, you just can't access them because you've floated them and they're now "behind".

Because it depends on whether you're logged in I'm going to guess "contextual links" is involved (the gear icon on the top right of elements). Can't be sure.

Comments

My guess is your CSS change means that some other element is covering your menu links. Nothing is dead, you just can't access them because you've floated them and they're now "behind".

Because it depends on whether you're logged in I'm going to guess "contextual links" is involved (the gear icon on the top right of elements). Can't be sure.

vstemen's picture

Thanks herb. You were right. That was helpful. I finally solved it. Thank you. The main menu was transparently covering it up. The fix was to set a "float: left" attribute on the main menu. Prior to that, I tried setting a z-index attribute on the header menu to see if I could push it to the top but it had no effect.

CSS is very powerful but it sure often makes me pull my hair out getting it to work right. It's worse than learning a programming language.