Is there a way to prevent the navigation (see short video) from jumping down when resizing the window?
It looks as if there is no longer enough space and a break is made at the next place with sufficient space.
When there is no longer enough space, you can switch to the âhamburgerâ menu. For each of the breakpoints, you can set whether the menu appears as a hamburger.
Thanks BLOCS-Freak, is it also possible somehow to make the distance between the menu items smaller, so there will be space enough that way (in case hamburger is not wanted this early/I mean while the window is still pretty wide)?
I can see where you are coming from as I have had this at times when I seem to have so much space in the navigation it drops down a line in Blocs I do find the Nav container quite wide - but I am guessing this is a Bootstrap design.
I would suggest for visual appeal I personally would centre the menu text so it fills that line using Flex (not ignore this if you like it set to the left)
I would then remove so much space in between the text (padding / Margin) and let the Flex spread it out or just reduce it and keep reducing it till it sits on the next break point.
The issue you have is you want it to sit on the MD breakpoint, but this needs space to breath still so it will again jump down a line when it gets to SM point.
But if you only want the full menu showing on LG - try reducing the gap and try Flex.
Have a play ! this is why I love Blocs - its like Lego for developers! we play till we get what we want!
Enjoy.
2 Likes
âBut if you only want the full menu showing on LG - try reducing the gap and try Flex.â
Yes, thanks, Adie, sounds interesting even if I canât really get what you describe here, tried to read it a few times but the details missing, for me (Iâm not a power true user of Blocs), canât get the things in really. I want the âtextâ menu to work for the first 2 breakpoints, or maybe 3, and then the hamburger jumps in, and the hamburger jumps in well even now when the window is thin enough (and works ok on mobile!) â I simply want the distance between the âtextâ menu titles to be smaller, it doesnât heed that âhugeâ space like it has now.
1 Like
Hi @Himmelstrutz, just following on from @AdieJAM suggestion.
Your Nav Container contains a list (which houses each menu/List item) and each menu/List item contains the link itself.
Add your Flex settings to the âListâ box and adjust each âLinkâ size by dragging the handles on the box.
The screenshots below have the items selected (maybe not the best example because of the volume of menu items pushes it to 2 rows, but you should be able to see what I mean).
2 Likes
Thanks but sorry, I have no idea what you do there and you also mention âflexâ. I cannot really drag anything in the handles, they seem to be like stuck. Isnât this something about a css where this should be adjusted?
Hello again, Iâve enlarged the padding on my previous examples for you to see better.g
First off, your banner that says âThis Is Himmelstrutz Custom Shopâ needs to be below the item called Nav Bar - this will stop your menu being split when reduced (âAboutâ falling below the banner). It looks as though the Custom Shop banner is within the list item somehow, maybe accidentally dragged?
Personally, Iâd set your Source for the menu to none and do it manually - this just seems easier to me, but should work both ways.
Make sure the item called Nav Container is set to as wide as you can get it, which will give the menu items more room to manoeuvre.
Here is my class setting for Flex, nice and simple - and note which item it is assigned to:
Finally, the âLinkâ, not âList Itemâ has the resizeable handles, but I do find this very hit and miss. Today I can reduce with the handles, but not enlarge - so whether it works for you is another matter!
Sorry, I donât think I can be any more help than this, but best of luck.
Thanks for your time and help, but I donât get this to work.
So next step must be to try to make a âmanualâ navigation menu, on each page. But how, yeah thatâs another question.
Got it to work with a few lines of code from ChatGPT. Just shout if you want to see that magic code 
1 Like