WordPress.org

Forums

Twenty Eleven
Below 650px Window, Search is over Header contrary to intent (1 post)

  1. Arlen22
    Member
    Posted 2 years ago #

    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; }
    }

Topic Closed

This topic has been closed to new replies.

About this Theme

About this Topic