Menu icon Foundation
menu-center is not working
  • 7
    Replies

I'm using foundation 6 for sites and I've tried centering the main navigation (menu-center) but it's not working.

I've had to add padding to center the entire row, but once I start scaling down to a small screen size, it jumps off canvas. I've even made another menu (for small screens only). But I would rather just have one menu that adjusts well for all screens.

Also any suggestions on the top section of the site would be greatly appreciated. I know it doesn't look pretty when scaling down.  

Sorry Guys! I really like foundation, and I'm trying to get the hang of it, lol..

Here is the test site:

http://new.roseleafcares.com/

 

 

 

p

I'm using foundation 6 for sites and I've tried centering the main navigation (menu-center) but it's not working.

I've had to add padding to center the entire row, but once I start scaling down to a small screen size, it jumps off canvas. I've even made another menu (for small screens only). But I would rather just have one menu that adjusts well for all screens.

Also any suggestions on the top section of the site would be greatly appreciated. I know it doesn't look pretty when scaling down.  

Sorry Guys! I really like foundation, and I'm trying to get the hang of it, lol..

Here is the test site:

http://new.roseleafcares.com/

 

 

 

Rafi Benkual over 2 years ago

Are you using flex version or the float version. The flex way is to add align-center to the <ul>

AJ over 2 years ago

I've tried the align-center class as well as floating the row center, but neither are working.

Maybe I'm doing something wrong..

Val Ery over 2 years ago

 @Rafi!

I confirm: aligning classes do not work in the Flexbox version.

@AJ! Such an example suits you - https://codepen.io/Val_Ery/pen/NgYprNIn the example:
1. centered drop-down menu
2. for small screens - usual drilldown menu (not centered)
3. sticky menu
4. "anti" title-bar (white background, dark gray icon)

Preventing FOUC was not used.

Ryan Patterson over 2 years ago

I was having the same issue. I'm using the flex grid (Foundation V. 6.3.1) and had a UL with just .menu and .align-center and was not horizontally centering the menu. 

The fix for me was adding 

.ul-class-name {
    display: flex;
}

 

Rafi Benkual over 2 years ago

Sounds like you don't have flex mode on.

 

in settings.scss

$global-flexbox: true;

Val Ery over 2 years ago

OK. Then it turns out that xy-grid is just a grid that allows you to place blocks on the page without the possibility of aligning the inner content along the axes.

I am disappointed.

IMHO, the advantage of the framework was in the ability to easily manage elements by the usual use of classes and attributes. Now in complete version we get the need to add the css rules by hand. I think it's a step back ...

P.S. I'm talking about the "complete" version, which is available on the download page. I understand that using the command line interface, I will get the result that I need.

Ryan Patterson over 2 years ago

@rafi, you were absolutely correct. I did have $global-flexbox set to false. I set to true and now .align-center works as expected. 

Thank you for making me aware of that!