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
Propeller Head
 
Posts: 17
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
Propeller Head
 
Posts: 17
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: 174
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
Propeller Head
 
Posts: 17
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: 174
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
Propeller Head
 
Posts: 17
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: 5265
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
Propeller Head
 
Posts: 17
Joined: Thu May 14, 2015 3:35 pm

Re: moving the search bar into the header

Postby jmcgill on Wed Jan 03, 2018 2:40 pm

I wanted to include an update to my search bar. I found that the prependTo option prevented a user from entering anything in the Search field, so I came up with a better solution:

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

      $(".search-bar").insertBefore(".navigation-wrapper");

});


I added these modifications to the CSS to control the size and placement.

Code: Select all
.search-bar
{
   width: 33.33%;
   float: left;
   margin-left: 175px;
   margin-top: 10px;
}
.search-bar .search-submit-wrapper
{
   position: absolute;
   top: 2px;
   right: 0;
   font-size: 0.8em;
}

.search-bar.search-bar-container .search-submit
{
   width: 24px;
}


We are also displaying our online help in a frameless browser window so I needed to add a min, max and close button to the right of the navigation menu. Here's how I did it...

In the master page, add the following:

Code: Select all
<button id="btnMinimize" type="button" onclick="javascript:SendWindowAction('min');">▬ </button>
<button id="btnMaximize" type="button" onclick="javascript:SendWindowAction('max');"><span style="font-size: 17pt;">□ </span></button>
<button id="btnClose" type="button" onclick="javascript:SendWindowAction('close');"><span style="font-size: 14pt;">x</span></button>


This creates the buttons on your topics and ties them to the nifty JavaScript the developers created. Then, in the Topic Toolbar Custom JavaScript add:

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

      $("#btnMinimize").insertAfter(".navigation-wrapper");
});

$(document).ready(function(){

      $("#btnMaximize").insertAfter(".navigation-wrapper");
});

$(document).ready(function(){

      $("#btnClose").insertAfter(".navigation-wrapper");
});


This tells Flare to move the buttons from the body of your topic to the header.

Then, add this to the CSS to control how the buttons will appear when you hover and click.

Code: Select all
button
{
   float: right;
   margin-right: 20px;
   margin-top: 12px;
   margin-bottom: 12px;
   display: inline-block;
   width: 28px;
   height: 28px;
   text-align: center;
   font-family: opensans-regular;
   color: #757575;
   line-height: 1.1em;
   border: none;
   border-radius: 1px;
   background-color: white;
}

button:hover
{
   background-color: #6699CC;
   color: white;
}


button:active
{
   background-color: #527AA3;
   color: white;
}


I also added this to my CSS to add an icon to the Explore menu:

Code: Select all
ul.navigation
{
   background-image: url(navigation.png);
   display: inline-block;
   background-repeat: no-repeat;
   background-position: left;
   font-size: 0.9em;
   position: absolute;
   margin-left: 20px;
}


I set my Tablet Breakpoint to 200px so that the web medium is always used and everything stays in place.

Here is the final product:

FlareHeaderCustomization.png
You do not have the required permissions to view the files attached to this post.
jmcgill
Propeller Head
 
Posts: 17
Joined: Thu May 14, 2015 3:35 pm

Re: moving the search bar into the header

Postby jmcgill on Tue May 08, 2018 5:57 am

Just wanted to post an update regarding some modifications to the jquery I had to make with Flare 2018. Instead of using the navigation-wrapper, I had to use ul.navigation to position the buttons.

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

      $("#btnClose").insertAfter("ul.navigation");
});

$(document).ready(function(){

      $("#btnMaximize").insertAfter("ul.navigation");
});

$(document).ready(function(){

      $("#btnMinimize").insertAfter("ul.navigation");
});
jmcgill
Propeller Head
 
Posts: 17
Joined: Thu May 14, 2015 3:35 pm


Return to Flare's General Discussion

Who is online

Users browsing this forum: Google [Bot] and 1 guest