Page 1 of 1
moving the search bar into the header
Posted: Tue Dec 05, 2017 3:51 pm
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!
Re: moving the search bar into the header
Posted: Thu Dec 07, 2017 8:42 am
by Gary Taylor
Go to Dynamic Help and search for "Search bar".
Re: moving the search bar into the header
Posted: Mon Dec 11, 2017 12:55 pm
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.
Re: moving the search bar into the header
Posted: Mon Dec 11, 2017 2:18 pm
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.
Re: moving the search bar into the header
Posted: Mon Dec 11, 2017 2:59 pm
by jmcgill
Thanks Casey. It moved the Search bar to the right, but its still underneath the nav menu. Thanks for the suggestion.
Re: moving the search bar into the header
Posted: Mon Dec 11, 2017 3:10 pm
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.
Re: moving the search bar into the header
Posted: Mon Dec 11, 2017 3:26 pm
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.
Re: moving the search bar into the header
Posted: Tue Dec 12, 2017 12:43 am
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().
Re: moving the search bar into the header
Posted: Tue Dec 12, 2017 5:14 am
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.
Re: moving the search bar into the header
Posted: Wed Jan 03, 2018 2:40 pm
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
Re: moving the search bar into the header
Posted: Tue May 08, 2018 5:57 am
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");
});