Custom Navigation Bar Design Help


(Joel Christensen) #1

Hey Guys I need help. I’m trying to design a custom Nav. bar for my website and I want it to look something like this…


What I’m trying to get is a Nav bar like this one but with a square that contains the logo in the center dividing the yellow bar in half. (I’m not trying to copy the exact layout. I’m trying to figure out how to expand the Nav. bar and get the different sections like the picture has) I’ve tried to get it to work but have failed repeatably.

I’m using rapid weaver 6 with stacks and foundation as my theme. If you guys could help direct me that would be great. My knowledge of CSS and HTML so I’ll be able to understand some terms but not all. Thanks in advance guys.


(Andrew Tavernor) #3

It is possible with some work. You will need to use two Top Bars, one either side of the logo and then put them all in something to make them fixed or sticky and provides the unified background. You can see one I did for the SlideUp stack on the demo page http://demo.bigwhiteduck.com/SlideUp/. That of course uses SlideUp for the fixed and sticky examples but you could equally use the Pin stack.

It is a lot of work though and the menus need to be in custom HTML mode so that you can decide which of the pages appear on which side (i.e. which bar).

There is also a bit of extra CSS to hide the slogan to stop bar overflows at intermediate screen sizes and finally a Visibility controlled mobile alternative - just so that you get a “normal” topbar in mobile mode for small devices.

That was all done in Stacks2 without the option to use Partials. With Partials, the whole thing becomes a lot easier in terms of maintaining the menu across pages.


(Peter Danckwerts) #4

Can’t you just use standard Top Bar plus a MagicGellan stack with the logo bit between? I’ve done that here (except without a logo between):

It’s not very elegant, I admit! But that’s down to me rather than the technique.


(Joel Christensen) #5

Thanks guys, I think I can make it work with 2 top bars and using some cleverly placed rectangles to create what I need to. You guys saved me a lot of time fiddling around trying to figure out how I was going to do this.