moving the search bar into the header

This forum is for all Flare issues not related to any of the other categories.
Post Reply
jmcgill
Propeller Head
Posts: 20
Joined: Thu May 14, 2015 3:35 pm

moving the search bar into the header

Post by jmcgill »

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!
Gary Taylor
Propeller Head
Posts: 13
Joined: Tue May 14, 2013 9:08 am

Re: moving the search bar into the header

Post by Gary Taylor »

Go to Dynamic Help and search for "Search bar".
jmcgill
Propeller Head
Posts: 20
Joined: Thu May 14, 2015 3:35 pm

Re: moving the search bar into the header

Post by jmcgill »

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.
cdschroeder
Sr. Propeller Head
Posts: 189
Joined: Mon Feb 22, 2016 9:18 am
Location: Cincinnati, OH

Re: moving the search bar into the header

Post by cdschroeder »

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

Image
jmcgill
Propeller Head
Posts: 20
Joined: Thu May 14, 2015 3:35 pm

Re: moving the search bar into the header

Post by jmcgill »

Thanks Casey. It moved the Search bar to the right, but its still underneath the nav menu. Thanks for the suggestion.
cdschroeder
Sr. Propeller Head
Posts: 189
Joined: Mon Feb 22, 2016 9:18 am
Location: Cincinnati, OH

Re: moving the search bar into the header

Post by cdschroeder »

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

Image
jmcgill
Propeller Head
Posts: 20
Joined: Thu May 14, 2015 3:35 pm

Re: moving the search bar into the header

Post by jmcgill »

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.
NorthEast
Master Propellus Maximus
Posts: 6359
Joined: Mon Mar 05, 2007 8:33 am

Re: moving the search bar into the header

Post by NorthEast »

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().
jmcgill
Propeller Head
Posts: 20
Joined: Thu May 14, 2015 3:35 pm

Re: moving the search bar into the header

Post by jmcgill »

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: 20
Joined: Thu May 14, 2015 3:35 pm

Re: moving the search bar into the header

Post by jmcgill »

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: 20
Joined: Thu May 14, 2015 3:35 pm

Re: moving the search bar into the header

Post by jmcgill »

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");
});
Post Reply