[Resolved] Definitive method to center horizontal menu in toolset starter with layouts

[Author]

Posts

[timB]

I am trying to: Center a horizontal menu in Toolset Starter with Layouts installed

As the images show, I have identified what appear to be the classes for manipulating the menu, but when I set float:auto, or even float:right nothing happens:

.ddl-nav-wrap, .ddl-navbar .ddl-navbar-default, .ddl-nav-horizontal, .pull-left{
  float:auto; 
}
 .ddl-nav .ddl-navbar-nav .ddl-nav-horizontal{
  float:auto; 
}

Am I calling the classes wrongly?

I have turned off the theme's CSS in the customiser. However the pull-left class is still being called, even though I have specified 'no floating' in the Customiser's menu options.

I visited this URL: https://toolset.com/forums/topic/how-do-i-center-the-menu-when-using-toolset-starter-theme-and-child-theme/
and https://toolset.com/documentation/user-guides/toolset-starter-theme/#using-with-layouts

I expected to see: An explanation of how to truly center a menu so the menu items themselves can expand out from the center (not just give it the center 4 columns in bootstrap)

Instead, I got: No explanation, but quite a few unanswered threads.

Is it possible with Toolset Starter theme and Layouts to code a centered menu? Can we have a definitive method please, because it is a common desirable with clients of mine.

Thank you

[Beda]

This thread basically explains it:
https://toolset.com/forums/topic/how-do-i-center-the-menu-when-using-toolset-starter-theme-and-child-theme/

1. https://toolset.com/documentation/user-guides/toolset-starter-theme/ > Changing the menu position
Choose the position mentioned

2. Yes, it sounds too simple to be true, and it is.

Because neither the DOC is accurate, nor does any of the settings mentioned even exist, nor does it work even with the available settings.

In the Theme's menu styling I see "Left, Right and no float", not as per DOC mentioned:
Inside Banner
Outside Banner
Static Top
Fixed Top

None of those settings work, because layouts has only 2 options, and overwrites the theme's settings:
Left
Right.

Also, there is a problem
Let's assume you have a centred menu. Then you add several items. What should happen is a line break, correct?
(I am asking to be sure about your goals)
Because one could also want it to shrink until a certain size, and then break line.

Either way, I acknowledge the incoherent approach here and will contact our Theme Developer in regard.
Because currently, not even with Custom CSS you can get neat results.

I simply think, when Layouts is active, the Customizer Settings should not apply and the Layouts settings should be extended by a 3rd argument:
Centred (just as this solution here applies: http://stackoverflow.com/questions/18777235/center-content-in-responsive-bootstrap-navbar)

[Beda]

I consulted this with the Toolset Starter Developer.

You should create a Layout with a menu in a separate row.

The row settings should be:
"Row background extends to full width"
Add a class to it:

bg-primary

Insert a full width (12 cols) menu cell.
Add a class to Layouts Menu cell:

menu-center

Then paste this CSS either in Layouts CSS or in Toolset Starter Custom CSS:
http://pastebin.com/EuydEjNv

The result can be seen in the ScreenShot.

Some changes will be implemented in the next Toolset Starter Theme since those Settings right now are overwritten by Layouts.
This should thou not affect the above approach.

Why do you need Custom CSS for a centered menu?
As it comes to centring Bootstrap menu, this is not super trivial and we always need custom coding for this because Bootstrap does not have an option for a centred menu.

So, no matter if in Toolset Starter or in Layouts itself, we would need to create our own hacky CSS
and we want of course avoid non-Bootstrap styling in the Layouts plugin.

Let me know if you need more help.

[timB]

Yes Beda

Thank you - that worked. And I'm really grateful for such a comprehensive answer.
I had set the menu background to transparent, and that changed to my primary color with this new css, so I went to Customise|Color and changed it to white. So its fine for now (although transparent might be preferable later).

You have given a definitive solution to centering the menu with Layouts and Toolset Starter theme. Thank you!
Best wishes
Tim

[Gavin]

Thanks for this! 🙂