Support » Themes and Templates » add search box in primary menu

Viewing 6 replies - 1 through 6 (of 6 total)
  • You shold do this simply using CSS imho.
    For example, make your header

    position: relative

    then make the searchform

    position: absolute; bottom: 0; right: 0;

    and leave some padding-right on your menu, so menu entries won’t go under the searchbox.

    This is just one way to do it.

    No need for complicated code here.

    I added the

    #header {
        position: relative;
    }

    I then added the position: absolute; top: 145; right: 140; to this css (see below) and the search box is now appearing inside the nav menu bar on the right margin.

    #searchform {
    	color: #fff;
    	float: right !important;
    	border: 0 !important;
            position: absolute; top: 145px; right: 135px;
    	padding: 10px;
            background: #FEC42D;
            width: 240px;
    	}

    It works, thanks to your input. Now I’d like the search box to appear on the left side of the primary menu. I used float: left; but the box never moved to the left margin. I then used this and the search box appears on the left margin but it hides the navigation pages “Home” and “Sample Page”:

    position: absolute; top: 145px; left: 135px;

    I want the search box to appear inside the primary menu on the left margin. Any other css tricks to do this? Or do I have to make a change to the code for the nav pages?

    Moderator Andrew Nevins

    (@anevins)

    Forum moderator

    For CSS-specific queries, consider CSS-specific forums.

    WPyogi

    (@wpyogi)

    Forum Moderator

    Try this — move the menu items over by adding the margin-left:

    .main-navigation {
        margin-left: 250px;
    }

    The remove all the absolute positioning — that’s not the way to go — use float: left, change the width and a negative top margin to move it up:

    #searchform {
        background: none repeat scroll 0 0 #FEC42D;
        float: left !important;
        width: 240px;
        margin-top: -50px;
    }

    But do be aware that all this fooling around with the layout and adding elements willy nilly may be wrecking havoc with the responsiveness of the original theme code…

    I used Firebug’s Inspect Element and Web Developer’s Tools to find the code in the Twenty Twelve parent theme. On line 1393, I found the css for the nav bar positioning so I added the following code to the 2012 child theme’s custom css file:

    @media screen and (min-width: 600px)
      .main-navigation ul.nav-menu,
      .main-navigation div.nav-menu > ul {
        text-align: right;
      }

    When I use Firebug, the menu items (Home, Sample page) appear as desired — aligned on the right margin and the search box on the left margin as I want it. However, the css changes don’t appear on my browser. I experienced the same issue when I loaded the site on another computer.

    @wpyogi It works beautifully!

    I used Firefox Web Developer Tools > Responsive Design View. And you’re right about the responsive view — the top navigation links don’t appear on 360×640 or lower screens; only the search box appears. I will say that the pages do appear in the footer widget though.

    I checked the theme (without this css code) to see if it supports 360×640 and lower. It doesn’t (the top navigation links don’t appear) so I’ll inform the theme’s author because many themes support lower resolution.

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘add search box in primary menu’ is closed to new replies.