moving the search bar into the header

This forum is for all Flare issues not related to any of the other categories.

moving the search bar into the header

Postby jmcgill on Tue Dec 05, 2017 3:51 pm

I'm working with an HTML5 - Top Navigation template. I've been tasked with moving the search bar into the header in between the product logo and the drop-down menu. I'm pretty savvy with CSS, but I'm new to scripting. Do you have any recommendations on making this change to the search bar? Thanks!
jmcgill
Jr. Propeller Head
 
Posts: 9
Joined: Thu May 14, 2015 3:35 pm

Re: moving the search bar into the header

Postby Gary Taylor on Thu Dec 07, 2017 8:42 am

Go to Dynamic Help and search for "Search bar".
Gary Taylor
Propeller Head
 
Posts: 13
Joined: Tue May 14, 2013 9:08 am

Re: moving the search bar into the header

Postby jmcgill on Mon Dec 11, 2017 12:55 pm

Gary, I am assuming that you are pointing me in the direction of using the search bar proxy and inserting it into a master page. Unfortunately, that is not what I am looking for. I am attempting to insert the search bar between the product logo and the hamburger icon. This cannot be controlled from the master page. I am attempting to create a script that will append the search bar proxy after the logo, but I have not been able to get anything to work yet. Please let me know if you intended to point me in a different direction. Thanks.
jmcgill
Jr. Propeller Head
 
Posts: 9
Joined: Thu May 14, 2015 3:35 pm

Re: moving the search bar into the header

Postby cdschroeder on Mon Dec 11, 2017 2:18 pm

I'm testing a new design where I used CSS to move the search bar to the top right corner (where the hamburger menu usually is - my top nav menu is hidden). You could probably do something similar; just float left and add appropriate margins. Here's the style I modified:

.search-bar
{
float: right;
margin-top: -40px;
}

Then in the mobile media query, I adjust it like this:

.search-bar
{
float: none;
margin-top: 0px;
}

You may also need to trim the width of the search bar (I did this in the top nav skin).

Fair warning - MadCap could change their styles at any time, which might force you to make some changes. But this has worked pretty well for me thus far.
Casey Schroeder

Image
cdschroeder
Sr. Propeller Head
 
Posts: 155
Joined: Mon Feb 22, 2016 9:18 am
Location: Cincinnati, OH

Re: moving the search bar into the header

Postby jmcgill on Mon Dec 11, 2017 2:59 pm

Thanks Casey. It moved the Search bar to the right, but its still underneath the nav menu. Thanks for the suggestion.
jmcgill
Jr. Propeller Head
 
Posts: 9
Joined: Thu May 14, 2015 3:35 pm

Re: moving the search bar into the header

Postby cdschroeder on Mon Dec 11, 2017 3:10 pm

jmcgill wrote:Thanks Casey. It moved the Search bar to the right, but its still underneath the nav menu. Thanks for the suggestion.

Like I said, you'll probably need to switch it to float left instead of right, and then add a left margin to compensate for the logo. Also, your margin-top will vary depending on the height of your header. Play around with some different values and see what works for you.
Casey Schroeder

Image
cdschroeder
Sr. Propeller Head
 
Posts: 155
Joined: Mon Feb 22, 2016 9:18 am
Location: Cincinnati, OH

Re: moving the search bar into the header

Postby jmcgill on Mon Dec 11, 2017 3:26 pm

I can't get past the nav div. I believe the clearfix is preventing anything from floating to the right of the nav div - instead forcing it below. If I open an output .htm in Visual Studio, I can move around the div tags to get everything in the right spot. I just can't figure out how to "break" Flare's positioning and use my own.
jmcgill
Jr. Propeller Head
 
Posts: 9
Joined: Thu May 14, 2015 3:35 pm

Re: moving the search bar into the header

Postby Dave Lee on Tue Dec 12, 2017 12:43 am

jmcgill wrote:I can't get past the nav div. I believe the clearfix is preventing anything from floating to the right of the nav div - instead forcing it below. If I open an output .htm in Visual Studio, I can move around the div tags to get everything in the right spot. I just can't figure out how to "break" Flare's positioning and use my own.


If you want to move the divs (or any other tags), you could use jQuery - e.g. use appendTo() or prependTo().
Dave Lee
Master Propellus Maximus
 
Posts: 5034
Joined: Mon Mar 05, 2007 8:33 am
Location: UK

Re: moving the search bar into the header

Postby jmcgill on Tue Dec 12, 2017 5:14 am

Thanks Dave!

A little trial and error and I came up with this...

Code: Select all
$(document).ready(function(){

      $(".search-bar").prependTo(".title-bar-section");

});

And modified the .css to control the size and positioning.

Code: Select all
.search-bar
{
   width: 33.33%;
   float: right;
   margin-right: 140px;
   margin-top: 12px;
}


It's working pretty well as long as the user doesn't make the window really small, but I think it will do the trick.

Next on my list is adding the min, max, and close buttons after the hamburger icon.
jmcgill
Jr. Propeller Head
 
Posts: 9
Joined: Thu May 14, 2015 3:35 pm


Return to Flare's General Discussion

Who is online

Users browsing this forum: Bing [Bot], wclass and 7 guests