Moving search box in *CHILD THEME** of Twenty Eleven

  • **I am already working in a child theme. I do not need to be told how to create or work within a child theme. Thanks!**

    With that out of the way, what in the following do I need to modify to move the search box? I have used display:none on the blog title and subtitle, so the image appears at the top of the screen.

    I have cut and pasted the following from the original Twenty-Eleven stylesheet into the child theme stylesheet:

    [CSS code moderated – a link to your site is enough to access the stylesheets]

    I’ve tried modifying the values in:

    #branding #searchform

    and

    #branding .only-search #searchform

    and

    #branding .with-image #searchform

    but nothing I change seems to make any difference.

    Here is the site address: https://writing.shep.ca.

    I have tried the advice in this thread:
    https://www.ads-software.com/support/topic/twenty-eleven-move-search-box?replies=3

    but it does not make any difference.

    What needs to be changed to change the position of the search box?

    Any help appreciated!

Viewing 8 replies - 1 through 8 (of 8 total)
  • Thread Starter mattshepherd

    (@mattshepherd)

    I apologize for the overlong code cut-and-paste, which I now know exceeds board regs. If it gets (justifiably) trimmed from this post, the code was the “Search Form” section of style.css for Twenty Eleven in its entirety.

    **I am already working in a child theme. I do not need to be told how to create or work within a child theme. Thanks!**

    very good ??

    where do you want to move the searchform to?

    if you want to move it into the menu bar, try adding this to style.css of your theme:
    #branding #searchform { top: 295px; }

    if the result does not immediately show in the browser, try clearing the browser cache, by pressing ‘CTRL F5’ for instance.

    (btw: if you use the option dashboard – appearance – header: display text [no] the searchform would automatically get moved into the menu bar)

    Thread Starter mattshepherd

    (@mattshepherd)

    It’s more an issue with how the site displays on mobile devices such as my iPad, and how it turns up when I switch to a single column with no sidebar — I’m trying to figure out what to tweak to shift the search box around until I find a happy medium for single-column display and iPad display.

    Does

    #branding #searchform { }

    control its total positioning on the page (i.e. is that the sole line I should need to muck around with to move it around)?

    I’m going to feel pretty stupid if this was a cache issue — I’ve been CTRL-R to reload, but haven’t forced the cache. I’m going to mess around on my lunch break and see what I can see.

    Thanks!

    for smaller screens/handheld devices, the ‘responsive structure’ part in the last third of style.css of Twenty Eleven influences some of the positions.

    you might need to check which of those styles are targeted at the search form.

    Thread Starter mattshepherd

    (@mattshepherd)

    Aha! That’s exactly the sort of thing I need to know. I’ll mess around, break things, cry, repair things, and come back if I need a bit more help. For now, I think that’s what I need to know to dig into trying to make things act the way I want.

    Thanks again!

    I have had the same problem. Changing the top attribute in the twentyeleven css file as below works:

    #branding #searchform {
    position: absolute;
    top: 3.8em; /* changing to say 2.0em works */
    right: 7.6%;
    text-align: right;
    }

    but it does not work in the child form. How did you fix it?

    @msapsard

    please post a link to your site.

    without seeing the style.css of the child theme in the context of the theme, there is not much to suggest.

    alchymyth,
    Thanks for the reply. Whilst composing a reply to you, I noticed that the trailing ‘}’ below was missing. The code now works.

    /* import parent css file */
    @import url(“../twentyeleven/style.css”);

    #branding #searchform {
    position: absolute;
    top: 1em;
    right: 7.6%;
    text-align: right;
    }

Viewing 8 replies - 1 through 8 (of 8 total)
  • The topic ‘Moving search box in *CHILD THEME** of Twenty Eleven’ is closed to new replies.