How to get nav menu to wrap around logo text box

Hi, I’ trying to get Blocs to break a nav menu so that it reliable breaks around a logo/text box. See samples below… in some some modes and widths it separates into two lines, above and below, the logo text… in other’s it doesn’t break but gets lost under the logo text… I don’t see how to get it to break nicely in all widths. Any suggestions on how to achieve this would be great!

Hi all… does anyone know how to get the two line menu to appear around title/logo text? I’m trying to force this behavior so the menu items don’t run under the title/logo text? To me it looks better, but I cannot see any settings in Blocs to predictable set this behavior. Appreciate all feedback on this topic as I’d think others have run into this whenever this a longer menu bar.
Thanks in advance!

Hi @LewisO,

I don’t know if there is an easy way to do what you want, but in any case, I don’t think two line menus are good choice. If you menu has a lot of items, I would suggest to build something like @mackyangeles did in this website.

Cheers,
Eldar

Thanks Eldar, I was hoping to find out how to format the menu bloc… but don’t see how to achieve that. However… you’ve given me some idea about how to achieve this using a text block with links and not the menu manager. If anyone else has further ideas or suggestions, I’d love to hear them. – Lewis

You can format the main menu by creating a new class (not a subclass) called:
navbar-nav li a

Editing this class will control the menu.

I picked this up from another forum post and I’d love to know why it works; I think it’s a Bootstrap feature.

I’ve gotten help with adding the < br> into mobile menus to control the line breaks… but I’m still at a total loss at how to format the menu text displayed when one clicks on a hamburger view. It should be easy! Is there a class I’m simply not finding? thanks!

The class I referenced above controls the text.

Don’t forget that each class effectively has three sets of settings, one for each of phone/tablet/computer breakpoints. Change Blocs’ view to phone before editing the class and you’ll change the menu text from the hamburger menu.

Cmd-F – I got a question: does the name of the class matter? is that a code requirement?? I ask because I’m just trying to understanding if a ‘class name’ has some meaning, or is a naming convention, or rather meant to be a way to remember what the class’s settings without having to open the class setting panel.

Thanks for clarifying.

I even created new Blocs and have tried assigning the class - navbar-nav li a - to the menu text… and I still cannot get the Text formatting to change. I must be missing something here…

I can reliably assign classes to text say in brics and get changes that I want, but for some reason assigning classes (and changes) in the menu items that are populated say when one puts a navigation bloc in just doesn’t seem to work. It seems to me that the menus behave different that other elements.

I think I found where these setting are changed.
Go to Project settings > Text > under Object pull down to select Navigation Links and there you can edit text, font size, line spacing, etc. Here it impacts the navigation menus… but setting a class after selecting the object menu does not! Classes do not seem to apply to certain items.

Here’s a perfect example of where rich detailed documentation and superb tutorials would help users get far more use and utilize the power in Blocs.

Hope this helps some other fellow Blocs users.

EDIT: this however doesn’t achieve the goal of changing Menu settings at/for different breakpoints, which is the beauty of using classes if they’d work everywhere.

The name does matter. I guess it must be embedded in Blocs somewhere.

I have asked on this forum how I should know to use this name but not had a reply. I treat it as ‘black magic’ but it does work (for me, anyway, along with the person that originally posted it).

1 Like

Cmd-F, when I’ve created new classes it does’t seem to make much difference on any specific naming convention… but I don’t know for certain, and there might be preset/in-use named classes… if so, you’re 100% correct, there should be a list of them available in documentation. Thanks for your insights and input.

1 Like

Cmd-F – Thanks, but I think there is still some uncertainty about this, which I have because when reading many other posts in the forum, advance coders do state to use specific naming protocols when they discuss something, but then here: Custom Classes Basics – Blocs – User Documents there is no mention of a naming protocol, but rather to name a class as you wish. Perhaps there are different scenarios where different naming conventions are required or not?

Hello,

You can name your personal classes to modify features, as explained here:
https://help.blocsapp.com/custom-classes/

But also BLOCS uses the standard names of Bootstrap’s.
As an example see this link:

1 Like

@DanielF: You can generally use your own naming convention but I think, in this case, you’re overriding an existing class somewhere within Blocs (or, actually, the Breakpoint library that @Wam just referenced). Hence, if you invent your own name for the class, it won’t override the existing one so it won’t work.

1 Like

Yikes. Seems like an important thing to know prior to naming classes! Wonder if there is a list for Blocs without having to go to Bootstrap docs to figure this out…

Thanks!

Ok… I think some progress. I played around with Class names and naming. Notes: if one types a new class name into the Class pane of the toolbar… it automatically adds “-” where there’s spaces. However, if one creates a new class in Class manger it offers/allows one to leave spaces in the class names. Not sure of the total impact, but if one wants to create a class “navbar -nav li a” and keep the spaces, you need to do so in the Class manager and not Toolbar. Two, really important… so I’m playing with this and in Class Manager I decide to simply type “Nav” and then click the Subclass Lib pull down and I see “Special Navigation Links” - so I create this Class/Subclass and then edit the leading/spacing for the text and low and behold - it correctly fixed by line spacing issue that I had when one selected the Hamburger menu and set to Full Screen menu. Not only that - by also setting a Class-subclass as “Special Navigation Close Symbol”, sos that I could edit the color of the close “X” of the Full Screen menu, when the hamburger menu was selected, so it was more visible.
So… now I’m wondering, if all the applicable classes and subclasses are already in Blocs, or if there’s others that might be useful? If so, where is the documentation of them?