moving the search bar into the header
moving the search bar into the header
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!
-
- Propeller Head
- Posts: 13
- Joined: Tue May 14, 2013 9:08 am
Re: moving the search bar into the header
Go to Dynamic Help and search for "Search bar".
Re: moving the search bar into the header
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.
-
- Sr. Propeller Head
- Posts: 189
- Joined: Mon Feb 22, 2016 9:18 am
- Location: Cincinnati, OH
Re: moving the search bar into the header
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.
.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
Re: moving the search bar into the header
Thanks Casey. It moved the Search bar to the right, but its still underneath the nav menu. Thanks for the suggestion.
-
- Sr. Propeller Head
- Posts: 189
- Joined: Mon Feb 22, 2016 9:18 am
- Location: Cincinnati, OH
Re: moving the search bar into the header
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.jmcgill wrote:Thanks Casey. It moved the Search bar to the right, but its still underneath the nav menu. Thanks for the suggestion.
Casey
Re: moving the search bar into the header
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
If you want to move the divs (or any other tags), you could use jQuery - e.g. use appendTo() or prependTo().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.
Re: moving the search bar into the header
Thanks Dave!
A little trial and error and I came up with this...
And modified the .css to control the size and positioning.
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.
A little trial and error and I came up with this...
Code: Select all
$(document).ready(function(){
$(".search-bar").prependTo(".title-bar-section");
});
Code: Select all
.search-bar
{
width: 33.33%;
float: right;
margin-right: 140px;
margin-top: 12px;
}
Next on my list is adding the min, max, and close buttons after the hamburger icon.
Re: moving the search bar into the header
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:
I added these modifications to the CSS to control the size and placement.
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:
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:
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.
I also added this to my CSS to add an icon to the Explore menu:
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:
Code: Select all
$(document).ready(function(){
$(".search-bar").insertBefore(".navigation-wrapper");
});
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;
}
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>
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;
}
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;
}
Here is the final product:
You do not have the required permissions to view the files attached to this post.
Re: moving the search bar into the header
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");
});