Search box in main menu

• 

  ceskfreixas · Member · Nov 20, 2015 at 8:45 am

  • Copy link
  • Add topic to favorites

  How do I create a search box in the main menu of Promenade Theme?

  Thanks!

  The blog I need help with is: (visible only to logged in users)

• 

  thesacredpath · Member · Nov 20, 2015 at 10:44 pm

  • Copy link

  Due to the way the HTML and CSS are structured in Promenade, and give that it is a responsive design which adjusts the design for all screen/window widths from a desktop monitor all the way down to a phone, there really isn’t a clean way to do this for all screens/window widths.

  I may be able to place a search widget at the top right or left of the site title and then limit that change to screens/windows wider than 768px. If you wish to give that a try, place a search widget in the footer widget area and let me know and I can see what I can do for you.

• 

  ceskfreixas · Member · Nov 22, 2015 at 9:43 am

  • Copy link

  Thank you very much, @thesacredpath!

  Of course! I would love that you tried to do it! I have already placed the box search in the footer widget area. You can move it to the top? Maybe, one thing I would change is the size of the search box, it probably has a large size. You could make it a little smaller?

• 

  thesacredpath · Member · Nov 23, 2015 at 8:28 pm

  • Copy link

  Hi, I was able to do this, but we need to limit this change to screen/window widths greater than 850px since below that width the search box collides with the site title. See what you think with the following. Add it at the very end of your custom CSS.

  @media screen and (min-width: 850px) {
  .site {
  	position: relative;
  }
  #search-10 {
  	position: absolute;
  	top: 30px;
  	z-index: 10;
  	display: block;
  	right: 0;
  	width: 300px
  }
  }

• 

  ceskfreixas · Member · Nov 24, 2015 at 3:16 pm

  • Copy link

  Thanks!

  Can I change the vertical size of the search box to make it thinner?

  Then, I would also like to place the social menu widget (in the footer widget area) at the top left of the page, just on the left side of the page name. It’s possible?

  Thank you a lot!

• 

  thesacredpath · Member · Nov 26, 2015 at 2:04 am

  • Copy link

  I’m not seeing the search box in your header right now so I can’t work out the code, but yes, we can make it shorter.

  The social media icons are quite a long string, so we really wouldn’t have room for them on the left of the site title. It could be that we could put them below the site title and then the search to the right as we had previously done.