Foundation Menu besides TopBar?

Classic Stacks
1

I’ve built a Foundation site but am not really happy with TopBar. It seems to have some bugs with the menu disappearing at certain sizes for me. I’ve looked into MagicGellan2, but that seems to be designed for a single-page site. TopBar takes all pages in the project, but MagicGellan2 doesn’t. Am I right? Is there a way to use MG as a replacement for TopBar for a multi-page site?

2

Chances are that your page names are too long and you menu cannot be displayed since it’s too wide. There are 3 possible solutions to this…

  • Have less pages in you menu. Its ok not to have every page in your entire site inside of the menu.
  • Choose shorter page names
  • There is a setting in Top Bar to make it go to the mobile menu sooner.
1 Like
3

Setting the Full Menu to Custom and reducing the breakpoint worked. Thanks Joe.

I really liked how the site icon in MagicGellan can be larger than the menu bar. Is this possible with TopBar?

4

The fourth option is to use a 3rd party menu system with your Foundation site. I do it all the time, mainly because I like the way my site works on Mobile devices. Navigation, for example, works as I expect a menu to on mobile. See an example here (desktop or, more importantly, mobile): https://www.scdiag.com Select an item with dropdown to see what I mean.

5

yes, it’s possible to do this with top bar using some CSS.
here’s a blog post from @tav that may help: https://www.bigwhiteduck.com/posts/top-bar-resize-logo

6

Thank you! I added the CSS code below and the icon looks great.
.top-bar .name img{
width:80px!important;
height:auto!important;
}

7

1 more question about the Target stack. I searched but couldn’t find how to rotate the newest version 2.0 stack. The old Target Legacy had a rotate option built in. The Target description still says it can be rotated, but how?

Nevermind, I found it in Additional Features!!

8

Make sure you look on mobile as well, you may need to use a css media query to size and position differently for different devuces

9

I just noticed the CSS code above only works when the full menu is displayed. After the breakpoint when the menu is compacted, the icon gets cutoff at the TopBar edge. Is there a fix for this?

10

So before the breakpoint, at full menu, the logo is resized with CSS to be larger than the topbar. After the breakpoint, the overflow of the logo gets cutoff. Is there a different CSS class that refers to the logo after the breakpoint? I can’t seem the figure this out.

11

If you look at Task 3 in my post where you got the code it shows how to wrap the CSS in a media query to prevent it taking effect on smaller screens.
It is possible to change the logo size on the mobile menu but it is a different technique and I would not advise it in most cases as screen real estate is limited and expanding the logo just eats into it.

12

Thanks Tav. I have my breakpoint set to 1300 pixels. Even on desktops with windows narrower than 1300 my top-bar menu was disappearing. So there’s still plenty of space for the logo. It’s just that under 1300, the resized logo gets cutoff. I actually don’t have the logo show in the bar for mobile sizes at all.

13

If you want to send me a stripped down project file then I can sort it for you. Alternatively I could probably also do it from a url if you have it published somewhere.

14

Wow, sure. That’s great. The website is studiodentalarts.com
Thank you much for your input!

15

Thanks for the link, I know understand what you are trying to do. Unfortunately, there is no simple way using CSS that you can have an overflowing logo when the mobile menu is in operation below the breakpoint. This is because TopBar relies on hiding overflowing content in order to hide the dropdown menu when it is not open.

I’m afraid that your only option is just to limit the re-sizing of the logo to above the breakpoint by wrapping the code in a media query as follows:

@media screen and (min-width: 1300px){
.top-bar .name img {
    width:80px!important; 
     height:auto!important;
}
}
16

This fixed the “bug.” I’m grateful for your knowledge and kindness!

2 Likes
17

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.