Support » Themes and Templates » Twenty Eleven » Below 650px Window, Search is over Header contrary to intent

  • In the style.css file, there is this code:

    /* Make sure the logo and search form don't collide */
    #branding #searchform {
    	top: 1.625em !important;
    }

    However, if the header text is not displayed, this causes the search bar to be over (in the Z axis) the header image. There is no way to override this without an important tag. In order to overcome this, I used the following code in a child theme. The Important tag did work, but I think this is an oversight.

    @media (max-width:650px){
     body { padding:0; }
     #branding .only-search #s,
     #branding .only-search #s:focus {
      width: calc( 100% - 40px );
     }
     #branding .only-search.with-image #searchform {
      top: auto !important;
     }
     #branding .only-search.with-image{
      position: relative;
      top: initial;
      bottom: initial;
      clear: both;
     }
     #branding .with-image #searchform {
      max-width: none;
     }
    
     #branding .only-search.with-image #searchform {
      top: initial;
      bottom: initial;
      left: 0;
      right: 0;
      position: relative;
     }
     #branding .only-search + #access div {
      padding-right: 20px;
     }
     #access ul { margin:none; }
    }
  • The topic ‘Below 650px Window, Search is over Header contrary to intent’ is closed to new replies.