Minimal top-nav bar: menu and search only

[bobmoon]

Hi all -

As I'm working on converting my project to use the top-nav output, my UX guy would like for our help to have minimal content in the header area. He wants just the menu and the search bar in one "row" across the top.

I've turned off the logo and slimmed down the size of the header in the skin settings, but what I get is two "rows", one for the navigation menu and one for the search box.

This seems like this should be feasible, but my research on the forum makes me think this is one thing you can't do within the confines of the Flare skin.

Before I spend lots of cycles tweaking CSS and template files, am I wasting my time? Is there some way to achieve this with proxies?

Thanks,
Bob

[NorthEast]

In short, it's probably going to be tricky to achieve that layout.

You can't achieve that layout just using the standard top nav skin.
If you use component skins, then there is a search bar proxy (skin), but there is no proxy for the drop down menu.
There is a menu proxy (skin), but it's not a drop down menu like you see in the top nav.

It'd be quite easy to use a script to manipulate the layout; I use a simple script to tweak the layout in this help, to move content and a search bar proxy above the top nav menu.
However, I didn't touch the menu part of the top nav, and I don't know if Flare's CSS for the menu would still work if you manipulate the structure; especially since it has responsive modes too, and may expect to be full width.

[bobmoon]

Thanks Dave. That's what I expected.

I've tinkered with the script you shared on the forum and I was able to move a test div above the menu. However, trying to figure out how to move the nav-search div up and next to the menu div (without wrecking the responsive layout) is beyond my current skill level. (Okay, I'm itching to try it, but can't toss my other duties aside for days of mucking around in there, as enjoyable as that would be.)

I'll have to see if my UX guy wants to have a crack at it, or whether he wants to redesign the header so that the menu and search bar can play nicely together.

Thanks!
Bob

[NorthEast]

It'd actually be pretty simple to move the menu, I just don't know if the menu's CSS would work properly in a different structure.

For example, in your master page, create a Foundation grid for the layout.
Here, div#menu_container is a placeholder for where you want the menu, and the search bar proxy is in the other div.

Code: Select all

        <div class="row">
            <div class="small-12 medium-6 columns" id="menu_container">
                <!-- move menu here -->
            </div>
            <div class="small-12 medium-6 columns">
                <MadCap:searchBarProxy />
            </div>
        </div>

Then use a script to move the top nav menu (nav.tab-bar) into the container:

Code: Select all

$( document ).ready(function() {
	$('nav.tab-bar').prependTo("#menu_container");
});

That will move the menu where you want, it's just a case of whether the CSS for the menu will still work; and if it does it'll still probably still look odd in tablet/phone responsive modes.

(You can hide the logo and search bar in the top nav skin, so it's just the menu.)

[chrisj]

I might be misunderstanding what you are looking for, but couldn't this be achieved by using a search bar proxy and setting a negative top margin?

[NorthEast]

You could simply add a search bar proxy and set it's position with { position:absolute; }, rather than negative margins.
However, using either would mean that the search bar and menu could overlap, and wouldn't resize around each other.