Menu icon Foundation
MENU text replaces Site Title

So I am following your steps to recreate top bar but one thing that you over looked is that the menu icon and text replaces your site title. This is no good. I'm not going to post my code because you can simply refer to your own example here:

http://zurb.com/building-blocks/f6-top-bar

Just about everything else regarding 6 looks like a wonderful improvement. I'm just not happy about how the topbar functionality that was all built in is now missing.

So I'm following your recreate topbar in f6 to look like f5. One major issue with it is that the menu icon and text replace the site title. This is a big problem I think. I am not going to post my code because I am merely following your directions here.

http://zurb.com/university/lessons/how-to-re-create-top-bar-with-foundation-6

With the example here: http://zurb.com/building-blocks/f6-top-bar

Everything else with the new version looks great. Thank you in advance.

Jim

topbar site title area

So I am following your steps to recreate top bar but one thing that you over looked is that the menu icon and text replaces your site title. This is no good. I'm not going to post my code because you can simply refer to your own example here:

http://zurb.com/building-blocks/f6-top-bar

Just about everything else regarding 6 looks like a wonderful improvement. I'm just not happy about how the topbar functionality that was all built in is now missing.

So I'm following your recreate topbar in f6 to look like f5. One major issue with it is that the menu icon and text replace the site title. This is a big problem I think. I am not going to post my code because I am merely following your directions here.

http://zurb.com/university/lessons/how-to-re-create-top-bar-with-foundation-6

With the example here: http://zurb.com/building-blocks/f6-top-bar

Everything else with the new version looks great. Thank you in advance.

Jim

Colin Marshall almost 4 years ago

To keep the site title in the Top Bar on mobile, all you have to do is edit this line:

<div class="title-bar-title">Menu</div>

Jim almost 4 years ago

That absolutely makes sense and I'm not sure why I didn't think of it. I'm also sorry if I came off bitchy. lol...

But my lovely hamburger icon? I want it on the right... simple float or reorder of divs through pushing and pulling?

Thank you in advance!! I'm not a total n00b to CSS but I am new to foundation and I just got comfy with 5 so I feel all thrown off. lol

Rafi Benkual almost 4 years ago

There has to be research about what side the hamburger menu is most effective on. I think I read somewhere that most people use their left hand and therefor their thumb can reach it easier You can swap it to the right with some CSS:

.menu-icon {
  position: absolute;
  right: 0;
}